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 5 of 5

Thread: IE bugs with UL

  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Internet Explorer IE bugs with UL

    Hi there.

    This is the site in question

    Having trouble with the way IE6 and 7 render my UL nav.

    http://browsershots.org/png/original...cab522302f.png

    It appears to put each new item on a new line but still in the correct horizontal position.

    This then forces my Welcome message downwards and in IE6 extends the Div.
    Code
    Code:
    <div id="container"><!-- Base of Design -->	
    	<div id="header"><!-- Logo and Navigation -->
    		<h1>ExigeDesign</h1>		
    		<ul>
    			<li><a class="selected" href="index.html">Home</a></li>
    			<li class="slash">/</li>
    			<li><a href="portfolio.html">Porfolio</a></li>
    			<li class="slash">/</li>
    			<li><a href="contact.html">Contact</a></li>
    		</ul>	
    	</div><!--End header here-->
    CSS

    Code:
    #header ul {
    margin: 0 0 0 470px;
    text-align: right;
    }
    
    #header ul a,
    #header ul .slash {
    float: left;
    margin-top: 20px;
    margin-right: 0px;
    padding-right: 3px;
    font-family: Georgia;
    font-size: 18px;
    font-weight: normal;
    text-decoration: none;
    font-style: italic;
    letter-spacing: 0.7px;
    color: #ebebeb;
    }
    
    #header ul a:hover {
    color: #ed008c;
    }
    
    #header ul a.selected:hover {
    text-decoration: underline;
    }
    
    #header ul a.selected {
    color: #ed008c;
    }
    Any Help would be greatly appreciated for this budding coder and im sure its just a matter of adding a little CSS to the UL
    Last edited by codie1991; 01-09-2009 at 09:42 AM.

  • #2
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    try putting your list inside a div and set a height for this div. Also add display:inline in your list items css.

    <div style="height:20px;">
    <ul>
    <li style="display:inline;">....</li>
    <li style="display:inline;">....</li>
    <li style="display:inline;">....</li>
    </ul>
    </div>

    I think that this will work for you

  • Users who have thanked ktsixit for this post:

    codie1991 (01-09-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Just add
    Code:
    #header ul li{
    display:inline;
    }
    into your CSS.

    PS: welcome to CF!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    codie1991 (01-09-2009)

  • #4
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you both, will try that and see if it works. Need to wait for BrowserShots.org now to find out.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by codie1991 View Post
    Thank you both, will try that and see if it works. Need to wait for BrowserShots.org now to find out.
    Make use of IE Tester
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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