IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu?

#header-container #header ul.top-nav
{
    float: left;
    margin: 20px 0 20px 10px;
}
#header-container #header ul.top-nav li
{
    float: left;
    margin-right: 8px;
    border-right: 1px solid #008cd3;
    line-height: 15px;
}

I've noticed that in IE6 and IE7, the margin-bottom on the ul element is only 19px. I tried adjusting it by removing the margin-bottom and setting a fixed height of 36px, which solved the alignment issue across different browsers. However, I'm not sure if this is considered a hack.

Has anyone else encountered this problem before?

 <div id="header-container">

    <div id="header">

        <a href="/" class="logo">esPAY</a>

        <ul class="top-nav">

            <li><a href="">adam wright</a></li>

            <li><a href="">Links</a></li>

            <li><a href="">Help</a></li>

            <li class="last"><a href="">Logout</a></li>

        </ul>

        <div id="TabStrip1" class="RadTabStrip RadTabStrip_esPay RadTabStripTop_esPay">

...menu code telerik..

/* Header */

header-container

{ width: 100%; margin-bottom: 10px; background: transparent url('Images/navbg.gif') top left repeat-x; height: auto; }

#header-container #header
{
    width: 960px;
    margin: auto;
    position: relative;
}

    /* Header / Logo */
    #header-container #header a.logo
    {
        width: 200px;
        height: 53px;
        text-indent: -5000px;
        background: url('Images/logo.gif') left top repeat;
        position: absolute;
        top: 20px;
        right: 0;
    }

    /* Header / Top Navigation */
    #header-container #header ul.top-nav
    {
        float:left;
        margin: 20px 0 20px 10px;             

    }

        #header-container #header ul.top-nav li
        {
            float: left;
            margin-right: 8px;
            border-right: 1px solid #008cd3;
            line-height: 15px;

        }

        #header-container #header ul.top-nav li.last
        {
            border-right: none;
        }

            #header-container #header ul.top-nav li a
            {
                font-size: 1.2em;
                color: #008cd3;
                margin-right: 8px;
            }

            #header-container #header ul.top-nav li a:hover
            {
                text-decoration: none;
            }

Answer №1

It appears to be resembling the infamous double margin bug. One potential solution is to insert display:inline to your floated components or utilize *display:inline specifically for targeting IE 6 and 7 without conditional comments. Typically, this issue occurs on the sides rather than at the bottom.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a dynamic header image that adjusts its resolution based on the device and pixel density for

After finishing a design in Sketch, I have 3 unique layouts with header images displayed below: To ensure the height is consistent and to crop the image appropriately on different devices, I export the following images from Sketch: dog-header-mobile-1x.p ...

Implementing a fixed div with jQuery scrolling

I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...

Encountered an issue when trying to generate a shader cache entry- there was an error when attempting to locate an

Today, I decided to write a basic Python script utilizing Selenium that would identify an element by its Css selector. My target? The input field on the Google webpage, specified by input[name=q] Upon running the script, Chrome opened as expected but prom ...

I'm new to Angular and I'm wondering how to close the panel by clicking on the 'x' button and also by clicking on the screen. Can anyone help me with this

Below is the HTML code I use for my button: <button class="btn btn-outlined " ng-click="vm.showCommentBox1()">Notify All</button> <div class="comment-box custom saveAll" ng-if=""><div class="panel panel-default"> ...

Stop the border from curving along with the container's border radius

Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border. However, I'm facing an issue where the border curves along with the border radius instead of rem ...

Issue with margin-top on <p> and <a> elements not displaying correctly?

I've been attempting to incorporate margin-top for a link button, but unfortunately it's not working as expected. I've even experimented with inline styles for both the 'p' and 'a' tags. There are three list elements, I ...

What could be causing the problem with my CSS background-image being referenced correctly?

Everything seems to be in order: background-image: url(./dir/img.jpg); However, I encounter a 404 error when attempting to reference an image using this approach: index.html <div style="--url: url(./dir/img.jpg);"></div> css backg ...

Displaying left and right div elements alongside each other in HTML/CSS works in Chrome, but not in Safari or Firefox

I've encountered an issue with aligning divs side by side in Firefox and Safari, although it seems to be working perfectly in Chrome. It's a bit tricky to provide all the CSS code as I have different stylesheets for mobile, normal, and print vers ...

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

I am finalizing my app structure by enclosing it within an MUI Container with maxWidth set to false. The issue I'm facing is that the AppBar inside the container doesn't span the full width of the screen due to paddingX property enforced by the c ...

versatile grid tiles with CSS flexibility

Trying to remove the svg elements while keeping the grid layout intact. The svgs are used to maintain a 1:1 aspect ratio for all tiles. UPDATE: Discovered a CSS Solution for this. Simply set aspect-ratio: 1 for the tiles. Is there an alternative soluti ...

"Picture positioned on the edge of the container, just on one

Using Bootstrap 4, I was able to create a container with a div positioned outside of the container on the right side. Now I am wondering if it is possible to achieve the same effect with a picture div. I managed to do so by using a pseudo-element :after an ...

Customize stroke widths for each individual SVG item

I'm facing an issue with applying consistent stroke width to my CSS on a webpage. Here is the code snippet I am using: path { fill: none; stroke-width: 10pt; stroke: red; } Despite this, the rendering appears differently on certain SVGs. You c ...

The specified number of columns and width values are being disregarded

The Challenge While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling: body { padding: 0; background-color: black; margi ...

Placing an image within a table row that spans multiple rows to maintain center alignment in relation to other rows that are not span

Having trouble with centering the image in an email signature when viewed in GMail. The layout works fine in JSBin but appears uneven in GMail. Any suggestions on how to make sure it stays centered? Check out the code here https://i.sstatic.net/F2LXV.png ...

What is the best way to trigger a jQuery function after adding a <div> element through Ajax loading?

When I use Ajax to append a <div>, the dynamic inclusion of jQuery functions and CSS for that particular <div> does not seem to work. The insertion is successful, but the associated jQuery functions and CSS do not load properly. How can this be ...

Implementing a splash screen upon selecting the second exit option

Check out the code snippet here: https://jsfiddle.net/wust7gdy/ Once the curtain is raised, the exit button will appear. How can I introduce a splash screen after clicking the 2nd exit button? Currently, there is a splash screen that appears after click ...

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

Looking for assistance with a straightforward CSS opacity fix for Internet Explorer

Take a look at this page comparison between chrome and IE. On the right side, you'll notice drop down fields. While Chrome displays them correctly, IE shows rectangular boxes instead. To fix this issue, I added opacity to the select fields with the ...

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

My form is divided into 3 sections, with the latter two initially hidden using CSS. When users click the next button in the first section, the second section is supposed to slide down into view. However, I'm experiencing an issue where the animation s ...

Utilizing Isotope JS on your Wordpress website

I'm in the process of integrating the .js plugin, Isotope, into my Wordpress installation. It should be positioned at the bottom of this page: To achieve this, I am referring to an example on codepen: https://codepen.io/desandro/pen/mEinp The script ...