Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old October 7th, 2007, 02:10 PM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default Spacing issue with Position element in IE6


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
__________________
Gaz
Reply With Quote
  #2 (permalink)  
Old October 7th, 2007, 06:42 PM
Wrox Author
Points: 13,255, Level: 49
Points: 13,255, Level: 49 Points: 13,255, Level: 49 Points: 13,255, Level: 49
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2005
Location: Ohio, USA
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
Send a message via AIM to dparsons
Default

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
================================================== =========
Reply With Quote
  #3 (permalink)  
Old October 8th, 2007, 04:49 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #4 (permalink)  
Old October 8th, 2007, 01:12 PM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #5 (permalink)  
Old October 8th, 2007, 01:53 PM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Ok. So if I add:

<!--[if IE 6]>
<style type="text/css">
#branding { margin-bottom:-2px; }
</style>
<![endif]-->

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
Reply With Quote
  #6 (permalink)  
Old October 8th, 2007, 02:02 PM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to get the position of an element nazran Javascript How-To 3 February 2nd, 2010 06:56 AM
Problem adding element to the previous element dani1 XSLT 5 September 10th, 2008 01:38 AM
CSS overflow:hidden issue in IE6 and IE7 kwilliams CSS Cascading Style Sheets 1 May 27th, 2008 05:44 AM
navigation table spacing issue obfuscaTed HTML Code Clinic 2 January 19th, 2007 05:14 PM
CSS style issue ok in Firefox but not in IE6 socoolbrewster CSS Cascading Style Sheets 1 September 22nd, 2006 10:01 AM



All times are GMT -4. The time now is 06:15 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.