SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    466
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox LI Width Inline list

    Hello,

    I'm doing the usual horizontal list. The client requires the use of background image tabs. I thought it would be easiest to avoid auto-expanding tabs and just make the tabs a fixed width.

    HTML:
    HTML Code:
    <div id="menu">
    <ul>
    <li><a href="http://www.dogsniff.com">Hot Topics</a></li>
    <li><a href="http://www.dogsniff.com/upcoming">What's New</a></li>
    <li><a href="http://www.dogsniff.com/comments">Comments</a></li>
    <li><a href="http://www.dogsniff.com/submit">Submit</a></li>
    </ul>
    </div>
    CSS:
    HTML Code:
    #menu ul {
    height: 30px; 
    display: inline; 
    margin: 0; 
    padding: 0;
    }
    #menu ul li {
    background-image:url(tab001.gif);
    display: inline;  
    height: 30px; 
    text-align: center;
    font-weight: bold; 
    padding: 5px 0 0 0; 
    margin: 0px; 
    list-style-type: none;
    width: 116px;
     }
    This looks great in IE, but is a dud in Firefox (which usually means I'm doing something completely wrong).

    In IE, each LI is 116px wide and 30px tall making the background image display perfectly.

    Firefox is ignoring the height and width tags displaying only the top left portion of the image tab.

    I've got a feeling that I'm going to need some kind of "block" thingy, but I really only know enough about CSS to be dangerous.

    Any ideas?

    Brandon
    Home Recording Forum -
    Make 60% Commission Pushing my new mega system
    Killer Home Recording

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Brandon,

    Just float everything, makes them block level and will display as you are wanting. I'm inclined to suggest that youi don't set heights and width's and let the font-size set those dimensions, here's how I would do it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #menu {
    	float: left;
    	width: 100&#37;;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #menu li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	background: #colorgoeshere url(tab_left.gif) top left no-repeat;
    }
    #menu li a {
    	float: left;
    	height: 1.5em;
    	line-height: 1.5em;
    	text-align: center;
    	font-weight: bold;
    	padding: 0 10px;
    	background: transparent url(tab_right.gif) top right no-repeat;
    }
    </style>
    </head>
    <body>
    <ul id="menu">
      <li><a href="http://www.dogsniff.com">Hot Topics</a></li>
      <li><a href="http://www.dogsniff.com/upcoming">What's New</a></li>
      <li><a href="http://www.dogsniff.com/comments">Comments</a></li>
      <li><a href="http://www.dogsniff.com/submit">Submit</a></li>
    </ul>
    </body>
    </html>
    http://www.alistapart.com/articles/slidingdoors/

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    466
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    I FINALLY found a site in Google that demonstrated the float thing. I didn't realize I could use float with an <li> tag.

    Brandon
    Home Recording Forum -
    Make 60% Commission Pushing my new mega system
    Killer Home Recording


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
  •