View Full Version : Another IE vs. FF positioning issue

05-22-2008, 08:49 PM
You know learning all this stuff is fun until you run into some quirky issue that you just don't understand.

I just assembled a form for submitting a quote request. I positioned it (to the best of my abilities) with CSS, by adding 10px "padding-right" to the "leftnav" DIV within the same DIV. In FF it looks exactly as I intended. In IE however it lost its MIND! Before adding the padding to the "leftnav" IE had it closer to what I wanted than now. Can someone please show me where I'm going wrong?

HTML is here (http://tvpinc.com/test/quote.htm)
CSS is here (http://tvpinc.com/test/style.css)

05-22-2008, 10:23 PM

your problem is with your dimensions. Your container is 700px width. Inside you have #right (width:180px) + #main (width:500px) = 680px . This is ok but in your #main you have #leftnav (width:105px) + padding-right: 10px + 405px (the table) = 520px. This makes 20px more then 500 and this is why IE puts it down.

If you give 520px to #main, this will make it in IE7 but not in IE6 due to 3px jog. If you want to avoid that the best way is to float all your three "columns".

05-22-2008, 10:38 PM
Thank you very much Candygirl!

Ive never been very good with math. :D

05-22-2008, 11:13 PM
hmmm, I guess its back to the drawing board. I need it to work in IE6 for sure. So tomorrow I'll see if I can get it changed over to float all 3 columns. Thanks for your help!

05-23-2008, 07:46 PM
Alright, I got it changed over to float all 3 columns. It looks nice in FF 2, IE 7, NS 7 and Safari 3.1................ but in IE 6 I still have a problem with the "main" DIV being pushed down by the "leftnav" DIV.

Am I over looking something?
(the "home" and "quote request" are the only active links at the moment)

HTML is here (http://tvpinc.com/test)
CSS is here (http://tvpinc.com/test/style.css)

05-23-2008, 11:08 PM
Well, I tweaked code and tweaked code.... I never got the IE6 issue fixed but I managed to get it all messed up in several different ways, in several different browsers and now its time to call it a day again. I'll jump back on this problem tomorrow or monday.

If anyone can supply me with an answer to this issue (or a link to some reading that will help me) I'd really appreciate it.

05-24-2008, 11:45 AM
If you watch your result you can see two things:

- the right column is to far from the border in IE6. This is a double margin bug issue. You can correct it by giving #rightside a display:inline

#rightside {

- The left column is too width. This could be a default margin-padding issue and/or something too width inside your #leftnav. In your css:
#navlist1 li

#navlist1 li

Position: relative;


left: 0;

top: 2px;

list-style-position: inside;

list-style-image: url(images/lil-cross.jpg);


If you remove this width this wont be too width anymore and will fit in IE6.