SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE List Item, LOL!

    I didnt even check this until I was on my moms PC!

    Anyways, Ive never had a bug with a LIST, so Im a little unsure about this one.
    Would it be a height 1% ie bug fix for the list?

    http://www.jream.com/ (View in IE, left is spaced out a lot)

    I put the lists in a DIV because it was easier, and i forgot why but it worked easier that way with splitting the headings by using a DIV since I cant use two ID's at once.

    Its quite simple the list.css file >>
    Code:
    /* Nav Menu */
    #nav {
    	list-style: none;
    	margin: 0;
    	width: auto;
    }
    
    #nav li {padding: 0; margin: 0;}
    #nav a{
    	text-decoration: none;
    	display: block;
    	padding: 3px;
    	border-bottom: 1px solid #272727;
    	background-color: #333;
    	color: #eee;
    }
    
    #nav a:hover{
    	color: #000;
    	background-color: #95B26D;
    }
    HTML Code:
    <div id="nav">
    <ul>
    <li>
    <a href="../../../../../index.php" title="JREAM | Home">&raquo; Home</a>
    </li>
    <li>
    <a href="/portfolio/index.php" title="JREAM Portfolio">&raquo; Portfolio</a>
    </li>
    <li>
    <a href="/contact/index.php" title="Contact JRAEM">&raquo; Contact</a>
    </li>
    </ul>
    
    <h2>Extras</h2>
    <ul>
    <li>
    <a href="/php-help/index.php" title="PHP Help">&raquo; PHP Help</a>
    </li>
    <li>
    <a href="/seo-tips/index.php" title="SEO Tips">&raquo; SEO Tips</a>
    </li>
    <li>
    <a href="/css-tips/index.php" title="CSS Tips">&raquo; CSS Tips</a>
    </li>
    <li>
    <a href="/color-harmonies/index.php" title="Color Harmonies">&raquo; Color Harmonies</a>
    </li>
    </ul>
    </div>

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    #nav ul, #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    Try that.

  3. #3
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm that doesnt do the trick, i havent had this problem before, could this be an IE hack?

  4. #4
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi lostseed

    Just drove myself mad trying to fix it! How are you doing?

    Can I suggest that you get the XHTML validating first. Then validate the CSS? I'm kinda hoping there might be something obvious turns up from that (faint hope I know)

    I can't see what's wrong with it but its got to be something to do with either widths or the box model (hopefully AutisticCuckoo or someone will jump in and tell you what's really wrong).

    Great looking site btw.
    fisherboy
    Web Site Design

  5. #5
    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)
    Adding a height the the #nav a removed the spacing in IE for me.

    I tried both 20px and then 1% and with either, the spacing was removed in IE.

    Nadia

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Italy
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu

    could the problem be here?

    ul {
    list-style-type: none;
    line-height: 20px;
    display: block;
    }


  7. #7
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay the height: 1% worked in the #nav a{}

    I did try what poisson suggested, oddly the lineheight is also acting as padding, but no worry i put it back and it works fine with the 1% hack.

    Also I do xhtml validate all the time, Im a little anal about it with my firefox HTML Validator plugin

    Weird one, I guess I dont run into these too often for smaller items.

    Thanks guys


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
  •