#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2006
    Posts
    84
    Rep Power
    14

    IE gets it right for once - but Firefox no good :(


    I'm having a lot of trouble getting a couple of final things to work on this CSS template design I'm doing for one of our stores.

    http://www.thescriptstation.com/catalog/index.php?tplDir=CSS-fluid-1
    (the ?tplDir=CSS-fluid-1 is necessary to see the developing template instead of the live one)

    It's all looking pretty much how I want it, with a couple of exceptions, and I'd love some help with what I'm doing wrong here.

    Issue 1
    Links in the top green bar and bottom green bar on the page - earlier I had them looking fine in FF (using margins, positions, and padding), but looked in IE and it was a big mess. So I backed up and worked on it in IE, and now its looking OK there, but in FF, I'm losing the links after the first one - it seems like they are displaying underneath one another, which is below the size of the containing style.

    Issue 2
    In the same areas, For the life of me I can't find a way to vertically align those links inside those areas. They just go to the top no matter what I've tried.

    If anyone could look over the styles and see what I've done I'd be forever grateful:
    http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/stylesheet.css
    http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/main_layout.css

    Many Thanks
  2. #2
  3. Banned

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,326
    Rep Power
    0
    Too much mark-up I think. Use an unordered list for your navigation links. To make it horizontal give each <li> a width and either float them left or set them to display:block

    For Issue 2 you can set the line-height to be equal to the height of the container - that should centre the text (only use for text on 1 line).

IMN logo majestic logo threadwatch logo seochat tools logo