Opera css problem

Discussion in 'CSS' started by twistedspikes, Aug 8, 2007.

0
  1. #1
    On my website (http://www.freedivs.com/) if you look at it in opera the last link on the top menu is placed about 10px down from the other links, which puts it out of place. In FF and IE it works perfectly fine.

    It's a list floated left. If you would like the code posted here then just ask.

    Thanks,
    Nick
     
    twistedspikes, Aug 8, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The first thing I'd do is get rid of the images - you don't need them.

    

* {
    margin: 0;
    padding: 0;
}

#menu {
    background: /* set a default background color for the list - optional */ ;
    color: inherit; /* set this only if you're using a background color */
    height: /* height of menu */ ;
    line-height: /* same as height - TRUST ME on this */ ;
    list-style: none;
}

#menu li {
    display: inline;
    white-space: nowrap;
}

#menu li a {
    background: /* color of background */ ;
    color: /* color of link */ ;
    float: left;
    height: /* same as the #menu selector height */ ;
    text-decoration: none;
}
    Code (markup):
    
<ul id="menu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
</ul>
    Code (markup):
    Any other code you want added to the menu items, like margins and padding, can be added to the #menu li a selector.

    Note that my UL has an ID of #menu, rather than #nav or #navigation and that the list is NOT wrapped by a DIV container. The great thing about this is that you can set a width on the UL and then set its margins to 0 auto; to center it. :)
     
    Dan Schulz, Aug 9, 2007 IP
  3. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #3
    So are you saying to just recode it?
     
    twistedspikes, Aug 9, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yup. That's exactly what I'm saying. Also bear in mind that the universal selector (the first style rule) will remove the margins and padding from EVERY element, so you don't have to reset them to zero later on. This should be the very first rule you have in your stylesheet, unless you have a lot of form controls (then at which I'd look into using a reset.css file for that page instead).
     
    Dan Schulz, Aug 9, 2007 IP