SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru brent5392's Avatar
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A space makes a difference in IE

    Ok, I built this simple navigational system, tested it in internet explorer and i got some confusing results. Some of the buttons were hugely seperated, others were not. So I went back to my code to find the problem, all of them appeared the same. Took me a few minutes to notice the only difference was a space after each word. If there was a space, it would not have the gap, if there wasnt a space there would be. This was quite strange, and I am still not sure why this happened. Could someone explain?

    Css
    Code:
    #navwrap {
    	padding-top:100px;
    }
    #navwrap a:link,#navwrap a:visited {
    	color: #FFF;
    	text-decoration: none;
    	font-weight:normal;
    }
    #navwrap a {
    	display: block;
    	padding: 7px 2px 7px 2px;
    	border:none;
    	background:#000 url(Nav_Button2.gif) repeat-x;
    	text-align:center;
    }
    #navwrap ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: .9em;
    }
    #navwrap li {
    	margin: 0;
    	text-align:left;
    }
    #navwrap a:hover, #navwrap a:active {
    	color:#050;
    	background:#000 url(Nav_Button2.gif) repeat-x;
    	text-decoration: none;
    	font-weight:bold;
    }
    Html
    HTML Code:
    <div id="navwrap">
        <ul>
          <li><a href="#">Home </a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Login / signup</a></li>
          <li><a href="#">Services </a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Contact Us </a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Doing business </a></li>
        </ul>
     </div>
    Here is a full page example if you cant be bothered to put the above two together. I tested this page and got the same result.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #navwrap {
    	padding-top:100px;
    }
    #navwrap a:link,#navwrap a:visited {
    	color: #FFF;
    	text-decoration: none;
    	font-weight:normal;
    }
    #navwrap a {
    	display: block;
    	padding: 7px 2px 7px 2px;
    	border:none;
    	background:#000 url(Nav_Button2.gif) repeat-x;
    	text-align:center;
    }
    #navwrap ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: .9em;
    }
    #navwrap li {
    	margin: 0;
    	text-align:left;
    }
    #navwrap a:hover, #navwrap a:active {
    	color:#050;
    	background:#000 url(Nav_Button2.gif) repeat-x;
    	text-decoration: none;
    	font-weight:bold;
    }
    </style>
    </head>
    <body>
    <div id="navwrap">
      <ul>
        <li><a href="#">Home </a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Login / signup</a></li>
        <li><a href="#">Services </a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact Us </a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Doing business </a></li>
      </ul>
    </div>
    </body>
    </html>
    PHP | MySQL | (X)HTML | CSS

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a bug in IE that can cause an issue if you do have some space in the code, though I thought it was between the <li></li><li></li>

    However, try adding a height to the #navwrap a

    I'd also move the link styles so they are in this order if possible:
    link, visited, hover active.

    Didn't really test this out, but see if it does anything to the page

    Nadia

  3. #3
    SitePoint Guru brent5392's Avatar
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tipical IE bug...
    PHP | MySQL | (X)HTML | CSS


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
  •