View Full Version : padding in IE

01-23-2005, 08:15 PM
Hey...this question may be redundant, but i have searched google and cf for a long time and still couldn't answer 100% of my problems. My problem is in the nav area. The pixy rollovers work in all my mac browsers, but i've heard reports that they are no-show in IE6

My page: http://jalenack.com/sim/

In FF Mac, it works beautifully.
In IE6/Win, it pads each image a couple pixels and makes the lines not match the lines to the side (not a major problem). So it ends up making the nav box a few pixels taller in IE than FF. Also, at the bottom of the navbar, it extends the background 2px past the last button. I've tried applying margins, padding, etc. and none of its working. All of the <a> tags have been set with display: block. I've done a little bit of hacking to get my top and bottom content divs to work, but i haven't been able to hack myself out of this one.

01-23-2005, 08:33 PM
It might help people more if you included your external CSS file....

01-23-2005, 08:42 PM
hmm..i thought you might be able to find it :rolleyes:

here are all the bits that pertain to the navbar

#nav a {
background-repeat: no-repeat;
display: block;
width: 121px;
height: 41px;

#nav a:hover {
background-position: -121px 0;

#home {background: url(images/home.jpg) }
#products {background: url(images/products.jpg)}
#downloads {background: url(images/downloads.jpg)}
#support {background: url(images/support.jpg)}

#bottomnav {
background: url(images/bottomcorner.jpg) no-repeat;
height: 14px;
width: 43px;

#topnav {
background: url(images/topcorner.jpg) no-repeat;
height: 14px;
width: 43px;

#nav {
margin-top: 17px;
float: left;
background: url(images/navback.jpg) repeat-y;

#nav ul li {
list-style: none;

#nav a span {
display: none;

* {
padding: 0;
margin: 0;

Oo and by the way, this site is going to be 100% windows users and probably a high percentage of IE users, so its gotta work. Also, i do not need to worry about Version 4 browsers.
Ok I'm aware that my topnav.jpg image is 16px high and i specified 14px in the css. I can crop the image in a minute, but it really should not make a difference, seeing as the two extra px get cropped out anyway, right?

01-25-2005, 02:08 AM
I think i found a solution...


god...can someone test my site in IE6 now and see if it fixed? This project has convinced me i need a testing PC...I've managed to get a comp to use..now all I need is a monitor..hmm

01-25-2005, 03:56 AM
Here's what it looks like in IE6 on WinXP.


01-25-2005, 06:13 AM
I can't even open your site in IE6....It tries to download every time!

In Moz, you're serving as text/html, but in IE it tries to download, even if I enter the full path: http://jalenack.com/sim/index.html :confused:

Something is mighty wrong there dude... Are you using mime-type negotiation or something?

The IE whitespace bug is a pain in the butt. My preferred solution is

* html #nav li { height:1%; }

That fixes it without having to alter the source and is less code than John Hick's or Andy Budd's solutions.
...plus I thought of it myself, so of course I prefer it! ;)

01-25-2005, 10:03 PM
thats awfully strange. I've tested it at school computers and it doesnt attempt a download on IE6...plus i haven't touched any mime stuff...it should be running default text/html to all browsers... :confused: ill try your fix...

01-26-2005, 05:37 AM
ok now im major pissed. Now, the links and the rollovers don't work in IE. They are frikking links! <a href="index.html" id="index">Index</a> ...wtf is wrong with that? does IE think that id's on links make it an anchor <a> like <a name="></a> used to be? should i wrap my links in a span with the id?