Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    unwanted space splitting nav <li><img>s

    Hi,

    Long time listener, first time poster..

    I'm having some trouble with a navigation bar on a site i'm building at the moment. Site is static html layed-out with css.

    I have a pesky problem appearing in my horizontal top navigation bar which uses images as the links (had to use images otherwise the layout falls apart when text size is increased) and styled as an unordered list.

    it works fine in IE7 (havent tested in older version yet) but in Mozilla i get these pesky spaces between the images. I can get rid of some spaces by deleting carriage returns in the code, but this seems a really silly solution as it turns the code into a huge block of un-readable mess! It is also not a viable option as the client will only allow perfect code.

    Can anyone suggest ay solutions? Is there a way to tell the browser to not read a linebreak in the code as a space?

    below is the code that i'm using for the nav bar, and the applicable styles (there are also drop-downs attached to this, but i have removed them form this snippet as they dont affect this problem) - the page that it sits in 970px wide, so any unwanted space pushes the images to display over 2 lines.

    Code:
      <div id="navTop">
        <ul>
          <li><a href="index.asp"><img src="assets/images/nav_home_home.gif" alt="home" width="75" height="40"></a></li>
    	  <li><a href="bladder_control_facts/index.asp"><img src="assets/images/nav_bladder_control_home.gif" alt="bladder control facts" width="165" height="40"></a></li>
    	  <li><a href="managing_bladder_weakness/index.asp"><img src="assets/images/nav_managing.gif" alt="managing bladder control" width="175" height="40"></a></li>
    	  <li><a href="health_wellbeing/index.asp"><img src="assets/images/nav_health.gif" alt="health and wellbeing" width="150" height="40"></a></li>
    	  <li><a href="our_products/index.asp"><img src="assets/images/nav_products.gif" alt="our products" width="110" height="40"></a></li>
    	  <li><a href="contact/index.asp"><img src="assets/images/nav_contact.gif" alt="contact poise" width="123" height="40"></a></li>
    	  <li><a href="http://www.depend.com/au/professional/" target="_blank"><img src="assets/images/nav_professionals.gif" alt="for professionals" width="172" height="40"></a></li>
    	</ul>
    </div>
    and the css:

    Code:
    #navTop {
    	background: #996699;
    	position: relative;
    	margin: 0;
    	width: 970px;
    	height: 40px;
    	word-spacing: -10em;
    }
    #navTop ul {
    	list-style-type: none;
    	display: inline;
    	padding: 0;
    	margin: 0;
    }
    #navTop li {
    	display: inline;
    	padding: none;
    	margin: none;
    	word-spacing: 0;
    }
    #navTop img {
    	border: none;
    	padding: 0;
    	margin: 0;
    }
    I'm losing hairs over this so any advice will be greatly appreciated.

    cheers,

    Kriss

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    #navTop {
    	background: #996699;
    	position: relative;
    	width: 970px;
    	height: 40px;
            margin:auto;
    	word-spacing: -10em;
    }
    #navTop ul {
    	list-style-type: none;
    	padding: 0;
    	margin: 0;
    }
    #navTop li {
    	float:left;
    	padding:0;
    	margin:0;
    }
    #navTop img {
    	border: 0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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