Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

Question

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

I am working on creating a unique table layout for a web page that resembles the design linked below:

Click here to view the image http://kelostrada.pl/upload/test.png

Your assistance in achieving this would be greatly appreciated.

Currently, I have implemented a solution that functions properly in Firefox. However, in Chrome and Internet Explorer, the entire table shifts down:

<div style="width: 1000px;">

    <img src="magnifier.png" style="z-index: 10; border-width: 0px; width: 200px; top: 30px; right: 30px; position: relative; float: right;" />
    <table style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
        <tbody>
            <tr style="background-color: #6788bb;">
                <td style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Interview of the Month
                </td>
            </tr>
            <tr style="background-color: white;">
                <td style="padding: 20px;">
                    <div style="width: 200px; height: 100px; float: right"></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
                    <p>
                        Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

If you have any ideas on how I can achieve the desired outcome without encountering these issues, please feel free to share them.

To test how the webpage behaves in your browser, you can access it using the following link:

html css cross-browser html-table

Answer 1

Answer №1

To achieve the desired effect, ensure that the div has a width of 1000px;, with a position:relative;. Inside this div, the img tag should have a style of position:absolute; instead of position:relative;.

For example, you can use the code snippet provided in the link you shared. Simply copy and paste it into your HTML from <body> to </body>, and it will function correctly.

You can view a WORKING EXAMPLE for reference.

<body>
    <span class="test">TESTOWY NAPIS</span>
    <div style="width:1000px; position:relative;">
    <img src="lupa.png" style="z-index: 10; border-width: 0px; width:200px; top: 30px; right: 30px; position: absolute; float: right;"> <table style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
    <tbody>
        <tr style="background-color: #6788bb;">
            <td style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
            </td>
        </tr>
        <tr style="background-color: white;">
            <td style="padding: 20px;">
                <div style="width:200px;height:100px;float:right"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blan...rutrum neque, at dapibus enim feugiat id.</p>
            <p> Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id....te scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
            </td>
        </tr>
    </tbody> </table>
        </div>

    </body>

I have tested this solution and it worked without any issues on my end.

I hope this explanation clarifies everything for you.

Answer 2

To achieve the desired effect, ensure that the div has a width of 1000px;, with a position:relative;. Inside this div, the img tag should have a style of position:absolute; instead of position:relative;.

For example, you can use the code snippet provided in the link you shared. Simply copy and paste it into your HTML from <body> to </body>, and it will function correctly.

You can view a WORKING EXAMPLE for reference.

<body>
    <span class="test">TESTOWY NAPIS</span>
    <div style="width:1000px; position:relative;">
    <img src="lupa.png" style="z-index: 10; border-width: 0px; width:200px; top: 30px; right: 30px; position: absolute; float: right;"> <table style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
    <tbody>
        <tr style="background-color: #6788bb;">
            <td style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Wywiad Miesiąca
            </td>
        </tr>
        <tr style="background-color: white;">
            <td style="padding: 20px;">
                <div style="width:200px;height:100px;float:right"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blan...rutrum neque, at dapibus enim feugiat id.</p>
            <p> Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id....te scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
            </td>
        </tr>
    </tbody> </table>
        </div>

    </body>

I have tested this solution and it worked without any issues on my end.

I hope this explanation clarifies everything for you.

Answer 3

Answer №2

I decided to revamp the layout by replacing all table elements with divs, and I'm happy with how it turned out.

Check out the updated design on jsfiddle

<div style="width: 1000px;">

<img src="http://placehold.it/200x200" style="z-index: 10; border-width: 0px; width: 200px; top: 30px; right: 30px; position: relative; float: right;" />
<div style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
    <div style="background-color: #6788bb;">
            <div style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Interview of the Month
            </div>
        </div>
        <div style="background-color: white;">
            <div style="padding: 20px;">
                <div style="width: 200px; height: 100px; float: right"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
                <p>
                    Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
                </p>
            </div>
        </div>
</div>

Answer 4

I decided to revamp the layout by replacing all table elements with divs, and I'm happy with how it turned out.

Check out the updated design on jsfiddle

<div style="width: 1000px;">

<img src="http://placehold.it/200x200" style="z-index: 10; border-width: 0px; width: 200px; top: 30px; right: 30px; position: relative; float: right;" />
<div style="width: 100%; border-color: #6788bb; border-style: solid; border-width: 1pt; border-spacing: 0; border-collapse: collapse;">
    <div style="background-color: #6788bb;">
            <div style="padding: 40px; color: #FFFFFF; font-family: calibri; font-size: 18pt;">Interview of the Month
            </div>
        </div>
        <div style="background-color: white;">
            <div style="padding: 20px;">
                <div style="width: 200px; height: 100px; float: right"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum urna justo, in mattis libero hendrerit sit amet. Nullam ac ultricies felis. Proin pulvinar nulla sapien, in molestie augue pharetra vel. Nam et elit quam. Donec non erat lobortis, ornare ligula a, blandit nisl. Vivamus ut pulvinar tortor, eget scelerisque sem. Quisque faucibus rutrum neque, at dapibus enim feugiat id.</p>
                <p>
                    Morbi vel justo ultrices, fermentum lectus eget, condimentum arcu. Nullam commodo, neque eget fringilla fringilla, purus velit pretium nulla, vel bibendum augue enim ut lorem. Vivamus feugiat augue lorem, tempus pharetra sapien blandit id. Vivamus orci neque, laoreet vitae convallis id, malesuada et sem. Vestibulum tincidunt in mi eu ultrices. Praesent quis purus mattis, facilisis elit a, congue sapien. Nullam arcu nisi, sagittis eget nisi sed, posuere tempor odio. Aliquam vitae lorem nunc. Fusce ante libero, aliquam vel sollicitudin quis, pellentesque at mauris. Suspendisse quis arcu at odio gravida porttitor et at felis.
                </p>
            </div>
        </div>
</div>

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

Answer №1

Answer №2

Similar questions

Turn off hover functionality for mobile and tablet devices

Exploring the World of Micro-Frontends with the Angular Framework

Cannot Get jQuery .flip() to Work Automatically Every 2 Seconds

Tips for preventing CORS errors while rendering an image on a canvas

What is the best way to conceal a row when a particular field is devoid of content?

adjust the div's position based on the window's scrolling bars

How to place a child <div> within a parent <div> that is fixed on the page

Guide for utilizing the Primary Key in a Django context view to display data in an HTML template through a Python for loop

Is it feasible to decrease the lateral margins of Bootstrap's container without the need for custom CSS? If so, what is the method?

Word.js alternative for document files

Eliminate the CSS triggered by a mouse click

Tips for properly styling the input type range element

Maintain the fixed position of the table header while scrolling

Exploring how to display JSON objects containing spaces in an HTML table

The color scheme detection feature for matching media is malfunctioning on Safari

A checkbox placed within an anchor tag

Adjust the width of the unordered list to match the width of its widest child element

Background image that covers the entire page

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Establishing updated file path for resources in JavaScript based on environment