How to eliminate the white line ? It drived me crazy :(

How to eliminate the white line ? It drived me crazy :(

Zen Cart: V1.3.7
Template: PurpleShades LATEST VERSION
Browser : IE6
My Site : http://www.ohiseekyou.com

After I installed the Zen Cart and the Template PurpleShades, I found there is a white line right between the LOGO BAR and the NavMain BAR in IE6. There is no such white line in FireFox. It must be a bug in IE6.

I checked the CSS file and the file tpl_header.php located in \includes\templates\template_default\common.

But I did not find the key to fix the bug.

I also found there is no white line in site : http://(sorry, site offline)/137/index.php?main_page=index&template_dir=purpleshades

And the version of template PurpleShades in (sorry, site offline) is previous of my version in my link: http://www.ohiseekyou.com

Give me some directions, plz! It almost drive me crazy !

My link: http://www.ohiseekyou.com
may not be accessed !

So you can see the bug in my attached pic!

Now I replaced the background pic to try to find the key!

Any hint is welcome!

Attempted to visit site.. blank white page received
:(

Now I'm sure it's a bug of IE6.

<style> <!-- div { border:1px solid red; background:orange; } img { width:276px; height:110px; } --> </style> <div> <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"/> </div>

Run the code above. We'll find there are 3px gap under the image.
The google supplies the key: add "display:block;" or "vertical-align:top | bottom |middle |text-bottom" to image selector.

But there is a gap under the logo still.
What can I do except decreasing the height of the logo ?

This may or may not be causing the problem but, it's a start.> #navMain ul, #navSupp ul, #navCatTabs ul {

line-height:2.5em;
list-style-type:none;
margin:0pt;
padding:0.5em 2em;
text-align:center;
}
Firefox probably knows you wanted no margin while IE (as usual) says:huh:

BTW,
Your graphics are huge for a website:shocking: That may be why some are seeing a blank page and leaving.

dbltoe:

This may or may not be causing the problem but, it's a start.
Firefox probably knows you wanted no margin while IE (as usual) says:huh:

The defaut settings in Template PurpleShades are:

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 2em;
list-style-type: none;
text-align: center;
line-height: 2.5em;
}

I tried to append the Unit "pt" to "margin:0".
But Saddly, the bug is still not fixed!
Maybe the <div> contains <div>, and <div> contains <img>, cause the problem!

pt is NOT a valid unit for margin, height, padding,.....

Either px or em or the usually used with an occasional % thrown in. px is a set amount while em sets the item based on the resolution of the user's browser.

I think you should re load the purpleshades stylesheet.css (save your current as stylesheet.old) and S L O W L Y change item by item to see what's happening.

OR... 1. Do a view source on your main page, save it as test.html to your desktop.
2. Save the current stylesheet.css to your desktop.
3. Get a copy of TopStyle Lite.
4. Use TopStyle Lite to adjust the stylesheet using test.html as a go by.
5. Load the corrected stylesheet back to your site.