SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping floating li's in Opera 9.5

    Hi, I'm building a navigation bar using side-by-side floating li's using relative positioning. The navbar looks fine in IE and Firefox, but for some reason it breaks in Opera, and the entries are overlapped. The relevant CSS follows:

    Code:
    #nav {
    	position: relative;
    	margin: 0px;
    }
    
    #nav ul {
    	padding: 0px;
    	margin: 0px;
    	list-style: none;
    }
    
    #nav li {
    	position: relative;
    	padding-left: 10px;
    	padding-right: 10px;
    	float: left;
    	display: block;
    	line-height: 20px;
    	border-right: 1px solid white;
    }
    Does anybody know why this is happening, and how to fix it? Thanks for the help
    Last edited by tojojo; Aug 12, 2008 at 00:36.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't cause any overlap in Opera 9.51, so my guess is that you have some other rule that affects those list items. Perhaps something that sets horizontal margins or the left or right properties?

    You should be able to see which rules apply if you use Dragonfly (Tools → Advanced → Developer Tools).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    That doesn't cause any overlap in Opera 9.51, so my guess is that you have some other rule that affects those list items. Perhaps something that sets horizontal margins or the left or right properties?

    You should be able to see which rules apply if you use Dragonfly (Tools → Advanced → Developer Tools).
    Ahh, thanks for the tip! Using Dragonfly I determined that the issue was arising from using an <a> tag inside the <li> tag. In order to fix the problem, I added the following code:

    Code:
    #nav li a {
           display: block;
    }
    and that fixed the issue.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just making sure.

    Quote Originally Posted by tojojo
    ...
    In order to fix the problem, I added the following code:
    Code:
    #nav li a {
           display: block;
    }
    and that fixed the issue.
    Check in IE6 also, if there is a problem test float:left on the anchor instead.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Just making sure.



    Check in IE6 also, if there is a problem test float:left on the anchor instead.
    Thankfully, this doesn't affect the rendering in IE6 or Firefox; this was only a problem that I encountered with Opera specifically. Thanks for all the help however; finding out about Dragonfly spared me hours of frustration!


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
  •