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

Passing a variable to the render method in a PDF document

The $(window).load(function() function is unable to run once the entire document has finished loading

Applying the CSS property overflow-x: hidden will prevent horizontal overflow and only display

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

Issue with Bootstrap 5 Card Header not extending to full width

Obtaining the XPath for a data table containing two td elements that can be simultaneously clickable

What is the reason behind using '-webkit-backface-visibility: hidden;' to resolve problems with negative margin transitions on iOS/iPad 5.1?

Ways to connect to a minimized hidden tabindex component using the hashtag symbol

What are the steps to convert a canvas element, using an image provided by ImageService as a background, into a downloadable image?

Elements styled as inline blocks with static dimensions, irregular in size

The Bootstrap modal will not appear when the parent container's position is fixed

Modifying the calendar from a 7-day week to a 5-day week

Deleting an element from an HTML page with jQuery

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

Adjust the width of the dropdown menu to match the text input field using jQuery

What could be causing my image not to show up on ReactJS?

Encountering a problem with Bootstrap 4 when trying to set medium breakpoints for columns, causing them to wrap to

The process of eliminating body padding in Nuxt.js

When the child of li is clicked instead