SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    va
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS, tabs, logo and spacing problem

    I'm trying to implement a list apart's sliding door tabs but seem to be running into a problem with the spacing around the tabs.

    http://www.normalkid.com/testcss/headertest.html

    On Windows IE, I get a large space between the tabs and the test bar.

    On Safari, they are lined up right next to each other.

    I'm a CSS novice... and can't seem to figure out why there is a gap on Windows IE and how to correct this.

    thoughts?
    arn

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try adding margin-bottom:0 to your ul.
    Code:
    #header ul {
    	 padding:10px 10px 10px 0;
    	 list-style:none;
    	 margin-bottom:0;
    }
    Hope that helps.

    Paul

  3. #3
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UL automatically puts spacing above and below why, you need to add a margin to the bottom

    Code:
    #header ul {
    padding:10px 10px 10px 0;
    list-style:none;
    margin-bottom:0;
    }
    Hope this helps a bit.
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  4. #4
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops I see someone posted while I was answering as well... same thing
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    va
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm... I feel foolish. I thought I had tried that.

    thanks for the quick assistance.

    arn

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    va
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm...

    another issue that I've had on this same page

    the "test" bar that appears on Safari and Windows IE is completely absent in Mac IE. Actually... it appears to be under the logo/tabs div... and therefore doesn't show up. I'm not sure if this is a Mac IE specific issue, or I have some ambiguous css.

    arn

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    va
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm...

    well, looking into it... it seems that the navbar div starts right below the blue banner-ad.

    Can someone explain why "navbar"'s DIV starts rendering right under the "banner" DIV and does not _start_ under the tabs (ul block):

    Code:
    <div id="banner">
    	<div id="banner_topad">
    	
    	<img src="http://spd.atdmt.com/b/MYMYFANCYACY/728x90_gen_2.gif" />
    	</div>	
    
    	<div id="header">
    		<div id="searchbox">
    			<form action="" action=post><input type=text name=searchterm size=15> 
    			 <input type=submit name=submit value="Search"></form>
    		</div>
    		  <ul>
    			<li id="nav-home"><a href="#">Forums</a></li>
    			<li id="nav-news"><a href="#">Shop</a></li>
    			<li id="nav-products"><a href="#">Product Guide</a></li>
    			<li id="nav-about"><a href="#">About Me</a></li>
    			<li id="nav-contact"><a href="#">Home</a></li>
    		  </ul>		  
    	</div>
    
    	<div id="navbar">
    	test
    	</div>
    
    </div>
    I added a 5px red border around the navbar so you can see what I'm talking about

    http://www.normalkid.com/testcss/headertest.html

    arn

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    va
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok... getting there.

    removed the "float:left" from the header and had to add extra padding on the bottom... but of course the padding isn't exact... on various browsers.

    arn


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •