Now switch ‘compatibility view’ on, and look at it again.
Does it look wrong? It does on mine. Do any of you fine web developer dopers know how to fix this weirdness? I am vaguely aware that things like this are supposed to have simple fixes in the CSS. I’ve tried using “zoom:1;” but that just makes it worse.
For those without IE 8 or not wanting to mess about with their settings. Here’s what it looks like normally.
Here’s what it looks like in compatibility mode.
You should be able to view source to look at the code, but for your convenience here it is…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centered Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body {
background: #FFF;
color: #000;
font: 62.5% "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#navigation {
background: #AFD5E0 url("bg-nav.gif") repeat-x;
border: 1px solid #979797;
border-width: 1px 0;
font-size: 1.1em;
margin-top: 1em;
padding-top: .6em;
}
#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul {
padding: 5px 0 4px;
text-align: center;
}
#navigation ul li {
display: inline;
margin-right: .75em;
}
#navigation ul li.last {
margin-right: 0;
}
#navigation ul li a {
background: url("tab-right.gif") no-repeat 100% 0;
color: #06C;
padding: 5px 0;
text-decoration: none;
}
#navigation ul li a span {
background: url("tab-left.gif") no-repeat;
padding: 5px 1em;
}
#navigation ul li a:hover span {
color: #69C;
text-decoration: underline;
}
/*\*//*/
#navigation ul li a {
display: inline-block;
white-space: nowrap;
width: 1px;
}
#navigation ul {
padding-bottom: 0;
margin-bottom: -1px;
}
/**/
/*\*/
* html #navigation ul li a {
padding: 0;
}
/**/
// -->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Our Work</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li class="last"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
</body>
</html>
My impression is that compatibility mode was put in IE8 specifically to accommodate non-standard websites that had been built to work with IE6’s idiosyncracies. If you’re doing a new design, there’s no reason you should be coding to use IE6’s bugs.
By all means test a standard website in IE6 to make sure that its text and still images are readable, but newer features should be designed to work on IE7, IE8, Firefox, Safari, Opera, etc, etc, and on multiple platforms. Incuding mobile! Don’t end up with a site like one I saw last night, that only works on IE. The memus weren’t accessible on any other browser, even on Windows.
I’m trying to make it look right in ALL browsers, including IE6. I know it’s an old an unsupported browser, but I’m a perfectionist like that.
Also, it is going to be used on a company intranet, and for some reason many browsers seem to have the compatibility mode for intranet sites on by default. Rather than go around altering everyone’s browsers I’d like to know how to fix it for IE6 or compatibility mode.
Overall I’m trying to get into the habit of being a ‘good css designer’ by making my CSS work for as many browsers as possible.
This makes it look right to me for the browsers I can check without much pain (Firefox 3, IE6, and IE7, all on Windows):
#navigation ul li a {
background: url("tab-right.gif") no-repeat 100% 0;
padding: 5px 0;
*padding: 0;
color: #06C;
text-decoration: none;
}
The various /// tricky-comments at the bottom didn’t help on any of these browsers. An alternative to the “*padding” trick which also seemed to work is the IE non-comment
<!--[if gt IE 5]>
<style type="text/css">
#navigation ul li a {
padding: 0;
}
</style>
<![endif]-->
(this goes after the first </style>).
No idea how badly that will break all of the other browsers you want to test to.
First off, I assume you know you can use <meta http-equiv=“x-ua-compatible” content=“IE=8”> to force IE to try to render in Standards Compliant mode.
Anyways, the line that is screwing you up is padding: 5px 0; . If you leave it out, IE7 renders it completely fine. But then you get this in IE8 or Firefox. My solution was to add a line *padding: 0px 0; , which negates the line mentioned above, but only in IE7 or lower.
There are probably other ways to do it. And, of course, check my work. I’m not really a CSS developer. I just like to tweak userstyles.
ETA: Grr, and I was beaten since I took the time to find a place to upload that image. Oh well. I think there’s still some useful info in there.
There is a movement to no longer carry that dead body called IE6. By no longer supporting IE6, it’s just that much easier to use the newer technologies and web code. It really comes down to deciding to walk away from a dead horse. We need to quit handholding those web users who just cannot get with the program.
