SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gap shows in IE Navigation Link - Can't Find the problem - IE only ...

    http://stoneycreekwebdesign.com/home.php

    There is a 6px or so gap to the right side edge of the main horizontal navigation links when that link is :hover or :focus. Only in IE. The applicable CSS is listed below. Can anyone help me solve this dilemma?

    Thanks, as usual.

    Code:
    /* Horizontal navigation */
    #nav {
    	color:#FFFFFF;
    	background-color :#006D67;
    	margin:0px auto 0px auto;
    	padding:0px 0 0px 0;
    	border-bottom:1px solid #FFFFFF;
    	border-top:1px solid #FFFFFF;
    	text-align:center;
    }
    #nav ul {
    	padding:4px 0 4px 0;
    }
    #nav ul li {
    	display:inline;
    	margin:0 0 0 -5px;
    	padding:4px 0px 4px 0px;
    	border-left:1px solid #FFFFFF;
    	border-right:1px solid #FFFFFF;
    }
    * html #nav ul li {
    	margin:0 0px 0 0px;
    	padding:0px 0px 0px 0px;
    }
    #nav ul li a {
    	position:relative;
    	color:#FFFFFF;
    	text-decoration:none;
    	text-transform: none;
    	font-weight:bold;
    	font-size:0.85em;
    	letter-spacing:.9px;
    	padding:5px 12px 4px 15px;
    }
    
    #nav ul li a:hover {
    	color:#FFFFFF;
    	background-color:#2BA6CA;
    }
    
    #nav ul li a:focus {
    	color:#CCCCCC;
    }
    
    #nav .nav_on {
    	color:#FFFFFF;
    	cursor:default;
    	background-color :#FF0000;
    }
    
    #nav ul li a:hover.nav_on {
    	color:#FFFFFF;
    	background-color :#FF0000;
    }
    Last edited by dwzemens; Oct 11, 2006 at 02:53.
    Web Design, Marketing, Etc .............
    ....

  2. #2
    SitePoint Enthusiast S.Vasiliy's Avatar
    Join Date
    May 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this gap appears because you set display:inline to your li. and you have space between your last li and closing ul. you can fix it in ie if you'll write in your html "<li><a href="contact.php">Contact Page</a></li></ul>" - </li></ul> this must be in one line without any space

  3. #3
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by S.Vasiliy
    this gap appears because you set display:inline to your li. and you have space between your last li and closing ul. you can fix it in ie if you'll write in your html "<li><a href="contact.php">Contact Page</a></li></ul>" - </li></ul> this must be in one line without any space
    Ummm...thanks, but it doesn't matter if the </ul> is on the same line of code
    as the </li>, if there is a space between the two, or if it is on the next line.

    Anyone else?
    Web Design, Marketing, Etc .............
    ....

  4. #4
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Out of interest dwz, have you tried specifying a right-border to each <li> to display the white line? If you used a border I am pretty sure the gap will be removed.
    Regards,
    Jamie Harrop

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwzemens
    Ummm...thanks, but it doesn't matter if the </ul> is on the same line of code
    as the </li>, if there is a space between the two, or if it is on the next line.
    Are you sure? I tried out Vasiliy's suggestion on a local copy of your page it removed the space.

  6. #6
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Are you sure? I tried out Vasiliy's suggestion on a local copy of your page it removed the space.
    Ditto^
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  7. #7
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am feeling pretty stupid ... details to follow ... thanks guys.

    I am really confused. I cannot even use line breaks in my text editor or this issue occurs -- I must use one long line of text for the UL and LI. I have NEVER had to do this before, what am I missing?

    Dave
    Last edited by dwzemens; Oct 11, 2006 at 09:05.
    Web Design, Marketing, Etc .............
    ....

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to put all of your code inline.

    I'll take a hard look at your HTML and CSS and try to figure out what the REAL problem is, rather than just throwing hack upon hack upon hack on your page.

  9. #9
    SitePoint Addict Jamieharrop's Avatar
    Join Date
    Mar 2005
    Location
    West Yorkshire, UK
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    I'll take a hard look at your HTML and CSS and try to figure out what the REAL problem is, rather than just throwing hack upon hack upon hack on your page.
    I may be missing something Dan, but removing white space in code isn't a hack... or is it? The white space bug in IE is a well known bug, and the only way to fix the bug is to remove all white space within the code that is causing the bug. At least that is what I have always known. Maybe you know different?
    Regards,
    Jamie Harrop

  10. #10
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Dan. It's pretty weird.

    Dave
    Web Design, Marketing, Etc .............
    ....

  11. #11
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a solution to the white space bug as offerred by Paul O'Brien in an earlier post.

    http://www.sitepoint.com/forums/sear...archid=2513281

    It fixes my problem spot on.
    Web Design, Marketing, Etc .............
    ....

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I start by formatting and validating my HTML page using the bare minimum of markup possible. I'm the type of user who lets the HTML define the structure, rather than aid the presentation.

    From there, I go to the stylesheet, and start by using the universal selector to remove the margins and padding from (virtually) every element in the HTML file. I also declare what fonts I'm going to use for the main copy in the body selector, as well as the fonts for the header elements (in a a group of header rules). I pick a metric for the body selector and then use EM for the rest of my layout. Including borders. The only time I swtich to another metric (usually pixels) is when I need precise control over the dimensions of an element's appearance (like a box that contains an image, with a description of the image underneath it). And then I always adjust the line-height as well.

    As with the HTML code, I also format and validate my CSS - I don't even let a single warning get through. If an error or warning is found, I fix it immediately. Whether it's as simple as applying a background color to an element that has already had a color defined, or even adding color: inherit; to a style rule that has a background color defined (just to shut the validator up), I do it.

    Just like with the defense of the Chicago Bears this year, I'm very stingy with my code. Nothing gets through.

    Also, during each stage of development (header, menu, content region, sidebar--if necessary--footer, and then finally the contents of the content region), I check in all the browsers and browser versions I can get my hands on (currently IE5-7, Netscape 6-8, FireFox 1.0.3, K-Meleon 1.0, Opera 9 "in-house" and Konqueror/Safari through my volunteeers who have Macs and Linux boxes).

    It takes some getting used to, but in the end it's a better, faster way to develop Web sites, and will usually resutl in far less time spent on debugging and code fixing.

  13. #13
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the words of advice, Dan.
    Web Design, Marketing, Etc .............
    ....


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
  •