CODEWITHSUNDEEP
css
CMP
CMP

Reputation: 435

CSS looks different in chrome, safari VS Internet Explorer

This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:

chrome and safari

But on Internet Explorer, it looks fine:

internet Explorer

Here's my CSS:

div.hideSkiplink {
    background-color: #000;
    width: 100%;
    display: block;
    height: 42px;
    font-size: large;
    font-weight: bold;
    background: transparent url('../images/redslate_background.gif') repeat-x left top;
    font-family: 'Times New Roman' , Times, serif;
    text-transform: uppercase;
    color: #000000;
}

div.menu ul {
    position: absolute;
    margin: 0px;
    padding: 0;
    list-style-type: none;
    width: auto;
}

div.menu ul li {
    display: block;
    float: left;
    margin: 0 1px 0 0;
}

div.menu ul li a {
    display: block;
    float: left;
    color: #000000;
    text-decoration: none;
    padding: 14px 22px 0 22px;
    height: 42px;
}

div.menu ul li a:hover, div.menu ul li a.current {
    color: #fff;
    background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}

Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?

Upvotes: 0

Views: 7925

Answers (2)

Pankaj Parashar
Pankaj Parashar

Reputation: 10232

It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.

It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...

Upvotes: 0

Jesus Adolfo
Jesus Adolfo

Reputation: 97

Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues

There are hundreds of articles related to this topic so you should google things like

  • IE and CSS compatibility
  • IE and CSS issues

Upvotes: 2

Related Questions