SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 not showing bottom border

    I've designed this test page:-

    http://www.step-up-to-science.com/bi...reWs/test.html

    I've put a bottom border on the top right links: 'Skip to contents' and 'Skip to navigation'. It works fine in Firefox, but in IE6, the bottom border doesn't show. I've put these links inside a 'skip' div. This is floated and is contained within a 'head' div which is relatively positioned. This is the relevant CSS.

    Code:
    #head {
    	color: #000000;
    	position: relative;
    	height: 20px;
    	width: 768px;
    	font: 1.0em Arial, Helvetica, Verdana, sans-serif;
    	background: #003366;
    	padding-bottom: 25px;
    	}
    
    .skip {
    	color: #FFFFFF;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	/*width: 538px;*/
    	/*height: 40px;*/
    	font: 1.0em Arial, Helvetica, Verdana, sans-serif;
    	padding-top: 0px;
    	padding-right: 10px;
    	background: #003366;
    	}
    	
    .skip li {
    	position: relative;
    	float: right;
    	list-style-type: none;
    	padding: 0px 7px; 
    	}
    	
    .skip a:link {
    	color: #FFFFFF;
    	text-decoration: none;
    	border-bottom: 0.5px solid #FFFFFF;
    	font-weight: bold;
    }
    
    .skip a:visited {
    	color: #FFFFFF;
    	text-decoration: none;
    	border-bottom: 0.5px solid #FFFFFF;
    	font-weight: bold;
    }
    
    .skip a:hover {
    	color: #FFFFFF;
    	text-decoration: none;
    	border: none;	
    }
    and this the HTML

    Code:
    <div id="head">
    	 
    	  <ul class="skip">
    			<!--open skip div-->	
    			<li><a href="#main">Skip to contents</a></li>
    			<li><a href="#navmenu">Skip to navigation</a></li>			
    	  </ul>
    			<!--close skip div-->
    			</div>
    Can anyone help?

    Thank you very much.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, IE7 and 6 both do it, and I think they're simply cutting off that border. It's right at the very bottom edge of the menu.

    Are these meant to stay looking like they do, or are they absolutely positioned as a test and will become invisible later?

    I would do the code differently, esp with IE's issues with floated li's.
    Code:
    <div id="head">
      <ul class="skip">
        <li><a href="#main">Skip to contents</a></li>
        <li><a href="#navmenu">Skip to navigation</a></li>			
      </ul>
    </div>
    (same as yours)
    
    CSS:
    #head {
      color: #000;
      position: relative;
      height: 20px;
      width: 768px;
      font: 1em Arial, Helvetica, Verdana, sans-serif;
      background: #036;
    } <--removed bottom padding, not sure what that's doing
    
    .skip {
      position: absolute;
      top: 10px; <-- looked moved-down in FF for me, while too high on IE
      right: 10px;
    }
    	
    .skip li {
      display: inline;
      list-style-type: none;
    }
    	
    .skip a {
      color: #fff;
      padding: 0 7px;
      font: 1em/1.2em Arial, Helvetica, Verdana, sans-serif;
      font-weight: bold;
    }
    
    
    .skip a:hover, .skip a:focus {
      text-decoration: none;
    }
    Since you're absolutely positioning it, using padding to then try to change its position surely will look differently between browsers. When I looked in IE, the menu was waaay up at the top of #head. In FF there was a gap in the top.
    Do you have a universal reset? Makes sure all browsers start at 0 so they put things in the same place.
    * {
    margin: 0;
    padding: 0;
    }

    Or you could just have it for lists, which are particularly different per browser:
    ul {
    margin: 0;
    padding: 0;
    }

    So I left the a's inline, and let text-decoration do the same job as the border (dunno if you specifically wanted the border instead for some reason?), letter .skip a give all the same declarations to all the other types of a (with the text-decoration: none as the exception for :hover and :focus).

    Removed height and width on the ul so that it could grow... I wonder if IE was looking at that 1em font size and shrinking the ul to that exact size (which could hide the border I think) so I added a line-height which is a hair bigger.

    By the way, this isn't true:
    body {
    ...
    font-size: 62.5%; /* This takes font size to a standard dimension so that 1 em = 10 px */
    wish it were. Makes the text too tiny to read on machines with non-standard dpi settings. : (

    I dunno, did this work?

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try set the bottom border on the anchor element with no state, instead of :link or added:
    Code:
    	
    .skip a,
    .skip a:link {
    	color: #FFFFFF;
    	text-decoration: none;
    	border-bottom: 0.5px solid #FFFFFF;
    	font-weight: bold;
    }
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Lawlz, erik has the easier answer : )

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    border-bottom: 0.5px solid #FFFFFF;
    I should have mentioned that a pixel can't be divided, change that 0.5px to 1px.
    (But that's not the cause not showing in IE.)
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both for your help.

    Stomme poes, the padding issue was one that I was trying to sort out, so thanks for pointing out the universal reset:

    * {
    margin: 0;
    padding: 0;
    }

    Would you normally avoid using floated divs in preference of using display:inline?

    Thanks erik, your suggestion worked. I used '.skip a' instead of '.skip a:link'. Does IE have an issue with it and if so, is it generally best to avoid using it?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I dunno if IE has some special issue with a:link, but I personally don't ever bother with it as it's pretty useless. a can give its declarations to all the other a's ( :hover, :focus etc) while a:link is only only untouched uncached links... meaning, if you're setting your "defaults" on a:link, you have to repeat everything for every other state too. It's always less code to set a default for "a" and then only the differences in :hover etc.

    When I first started doing menus, I started floating the li's cause that's what people did. But when IE7 came out, sometimes instead of having the li's sit in a horizontal line like it should, some people got a "staircase effect" where each link was a bit lower than the others. Floating the a's instead solved this problem (also makes the a's blocks, so height and width can be set, also margins, and removes luckily an IE whitespace bug that display: block seems to create). I only float my li's when doing a dropdown menu since the sub ul's are children of the li and not the a. No staircase effect seen then anyway. But, IE7 needs something to be said about the li's... it's like they need to be mentioned. So I set them to display: inline even though that's what they'd do anyway when I'm floating the a's. I'm guessing IE doesn't know to display them inline by default cause they're really not "inline" elements but "flow", whatever that is. Something between a block and inline I guess...
    You can also just say something like color, or font-weight or something. IE7 just needs you to show the li's exist or something : )

    But were this my header, I wouldn't have even absolutley positioned the menu anyway... just set a width (in ems) that's just wide enough for the menu items to stay in line (in all browsers... remember people have various dpi's set so one machine might look inline while on another part of the menu wraps) and float the menu right... and give padding-top on #head to push the menu down a bit, to where you wanted it. I still dunno why IE didn't have your menu placed exactly where it should be; my only guess was that you set the menu to 0, 100% (top right) and then tried to use some padding too and that screwed with IE? Because the outline in FF was nice, while in IE the height of the menu was exactly (and nothing over) 1em... which didn't seem to get the underline/border.

    In any case, good luck with the site.

    MC Hawking:
    "Upon blind faith, they place reliance/
    what we need more of is science..."
    Last edited by Stomme poes; Jun 10, 2008 at 00:12. Reason: stupid smileys screwing with mah code!

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your very useful advice on floating li's and links. In future I won't bother with a:link if defaults can be set for a instead. Anything to reduce code!

    I do see your point about setting a width for the menu instead of positioning it absolutely and I may well experiment using your method. It does need to be right.

    Thanks again for your time.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Funny, I was just looking for info about a bug when I ran across that IBM guy's site (I forget his name, but he works with accessibility etc) and he was explaining this thing about IE and skip links... or any links. When tabbing around the page, hitting enter on any link brought the cursor back to the top of the page, even when it wasn't supposed to (like an in-page link as skip links usually are), and among other things, setting the link in question to position: absolute fixed this... I didn't read it real in-depth, just skimmed because it wasn't about my bug, but I did consider how my own skip links faired. I should try to find that page again...

    Okay, I found A page by the guy, but it's not THE page, because THE page started out with using a table just to wrap the link (and that was overdoing it, as the article later pointed out that other things triggered IE to work correctly)...
    http://jimthatcher.com/news-070607.htm

    So while I usually don't position my skip links absolutely, there may be a benefit to doing so for IE6 users... test test test.

  10. #10
    SitePoint Enthusiast DEVlady's Avatar
    Join Date
    Aug 2005
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Stomme. Your suggestions helped me getting my <li> to have proper borders in IE.


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
  •