Spacing issue with Position element in IE6

socoolbrewster · October 7th, 2007, 02:10 PM

I'm developing a website that has a ABSOLUTE position navigation contained within a container set to relative. The navigation looks ok in IE7, Firefox etc.. However, when viewed in IE6 the navigation has about 2 -3 px spacing between the navigation and the tabs and I cant see why IE6 would do this.

Has anyone come across this problem before?

The demo site can be viewed here:

http://www.mediamole.net/95danish/

and the CSS for the top half is as follows:

Code:

/* Start of branding and navigation styling */

#branding { margin:8px auto 0 auto; width:960px; text-align:left; height:95px; }
#branding-logo { width:229px; float:left; text-align:left; height:95px; }
#navigation { width:726px; float:left; height:95px;
              background-image: url('cart-bk.gif');
              background-repeat:no-repeat;
              background-position:top right;
              position:relative;
}

#globalnav { position:absolute; left:0; top:61px; height:34px;}

#cartlnk { width:160px; float:right; color:#000; background-color:transparent; }

#cartlnk p { padding:0 0 5px 0; margin:0; }

#cartlnk p a { color:#C42206; background-color:transparent; 
               text-decoration:underline; 
               padding-right:4px; border-right:solid #C42206 1px;
               font-weight:bold;
               }

#cartlnk p a:hover { text-decoration:none; }

#cartlnk p a.nobord { padding-right:0; border-right:none; padding-left:3px; }

Gaz

dparsons · October 7th, 2007, 06:42 PM

hmm not sure but in IE 7 on Vista Biz your navigation is off by about 120px??

================================================== =========
Read this if you want to know how to get a correct reply for your question:
http://www.catb.org/~esr/faqs/smart-questions.html
================================================== =========
Technical Editor for:
Beginning Visual C# 2008
Professional Search Engine Optimization with ASP.NET
Professional IIS 7 and ASP.NET Integrated Programming
Wrox Blox: Introduction to Google Gears
Wrox Blox: Create Amazing Custom User Interfaces with WPF and .NET 3.0
================================================== =========

socoolbrewster · October 8th, 2007, 04:49 AM

Hi

Not sure what you mean? do you mean the space between the tabs and logo? as that is meant to be like that. As when I view in IE7 on Vista Business it looks as intended.

My issue is when I view the site in IE6 there is a white line break before the black search bar

Gaz

socoolbrewster · October 8th, 2007, 01:12 PM

Hello all,

I have my strange bug, yet no doubt stupid bug.

When I view the following site in IE6 it puts a white line between the black search bar and div containing logo / tabs.

http://www.mediamole.net/95danish/

I've tried positioning, floating and all sorts of tricks for the TABS yet no matter I do there's still a line. I have validate the CSS / XHTML and it's all fine. I have tested in Opera, IE7, Safari and Firefox and it all works fine. Apart from IE6. So if you want to see how it should look, view it in any of those.

I have been trying to resolve without a hack, as it must be a bug on my part, yet I cant see it. Would and can any of you spot?

Gaz

socoolbrewster · October 8th, 2007, 01:53 PM

Ok. So if I add:



I can resolve the problem in IE6 - but it still puzzles me to where this space is coming from. Has anyone come across this problem before? and know how I can get it to work without the IE6 if statement?

Gaz

Imar · October 8th, 2007, 02:02 PM

A couple of suggestions that may or may not work.

Try resetting padding and margin on the <form>

form
{
padding: 0;
margin: 0;
}

Different browsers use different default values for these properties.

Also, try condensing your HTML Sometimes this fails:

<img src="" />
<img src="" />

while this works:

<img src="" /><img src="" />

Sometime, whitespace causes the issues you're describing...

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004