View Full Version : IE CSS poblem: extra space

Jan 24th, 2007, 01:58 PM

I have read all about IE CSS bugs and I can't find an answer.
The page I am working on displays OK in Firefox and all other browsers but has problems in IE.
I have fixed many problems but this one still remains:

IE adds extra spacing to some div and table elements.

You can see the problem by visiting http://www.lekarnar.com with IE(visit it with Firefox to see how it should look).
- The drop-down menus have 2px transparent borders(only in IE).
- The category menu(top box on the left) has 5px between categories(should be 1px).
- The rounded boxes have 1px lines added.

I think this could be an inheritance problem since only some div and table elements on the page are affected.

Please help, I really need a solution for this.

P.S. Please do not make test orders on the site as it is a live shop!

Jan 24th, 2007, 04:24 PM
IE doesn't understand the css border-spacing property which you have set to 0 in your style sheet. To eliminate border-spacing you will have to use cellspacing="0" within table tags in your html.

You have really many tables. Perhaps you should try to take better advantage of css.

Jan 25th, 2007, 01:19 PM
Thanks for you suggestion!
It worked!!!!

You are a genious!

Adding cellspacing="0" to the table removed extra spacing.
But only my "Category box" had tables. The drop-down menus use div elements. The rounded boxes use a combination of div and hr elements.
Any ideas on how to fix those?

I know I have way too many tables....this is left from the old design....this is really an oscommerce problem. I would have to change 100's of files to get rid of all of them. It would be great if you could help me to get it to work as it is now.

Thanks so much really, I almost busted my head over this.

Jan 25th, 2007, 03:20 PM
Hi dotsi,

Alright I see it now.
Your page is rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html) which might cause problems. To avoid this try to put in a doctype declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html) before the html tag and see if this resolves anything.

I recommend you use this one for your document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

It is important that is is put at the very beginning of the file. There must not even be any comments before it.

Jan 25th, 2007, 04:25 PM
Hi Koyama,

You were spot-on again!
I added the doctype declaration and it "cured" the drop-down menus.

Now, thanks to you I only have one problem left. The rounded boxes still get the white lines added.
I used Nifty Corners with CSS and Javascript (http://www.html.it/articoli/nifty/index.html) to make the rounded boxes. Like the other two poblems....works in every other browser, doesn't work in IE.

Thanks for your great support, I wish I could at least buy you a beer!

Jan 26th, 2007, 03:29 AM
I don't think that the remaining problem is a trivial one. I see the stripes in IE7. But in IE6, for some reason, I only see them after hovering on the basket icon? Very mysterious to me.

The 'Nifty Corners' script for adding rounded corners adds 1 pixel tall <b> block elements to simulate roundness. My best guess is that... somehow, something has triggered IE back to its usual behavior where some elements have minimum the height of the font size.

I didn't test, but please try to change a part of your style sheet like this (add the red part) and see if it makes any difference. I think it is worth trying at least.

.rtop, .rbottom {display: block; font-size: 0}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; font-size: 0}

Jan 27th, 2007, 03:01 PM
Hi koyama,

Great...it worked!

You are really good with this things!!!
Now you've fixed all of my problems.
Just one more new little problem popped up:
Im my search form the "Najdi"(Find in english) button gets put into a new line.
This only happens on some browsers on some operating systems.Win Xp/ IE 6.0 for example.

Thanks for all your valuable support!

Jan 27th, 2007, 09:44 PM
To prevent this you must alter the white-space property for the form element that contains the input fields. Try this:

<td class="headerNavigation4"><form style="white-space: nowrap" name="quick_find" action="advanced_search_result.php" method="get" autocomplete="off">...