I hate CSS - CSS Hates me

Discussion in 'CSS' started by THT, Jun 13, 2005.

  1. #1
    I have this page:

    http://www.shoppingfriends.co.uk/CSSProb/index.htm

    You'll see the issue - Open the page in IE and everything is in place.

    In FF, the horizontal menu bar and everything below that are too high up.
    Ive tried using the Clear: css command but no, it still doesnt work,

    Any ideas?
     
    THT, Jun 13, 2005 IP
  2. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Yes, clearly CSS hates you ;)

    What's with all the floats? ;)

    #standards{
    height:100px;
    padding-top:10px;
    text-align:right;
    color:#6B6B6B;
    background:#fff;
    padding-right:19px;

    }



    #image{
    width:760px;
    height:225px;
    background:#fff;
    postion:relative;



    }



    #nav{
    width:760px;
    height:48px;
    background-color:#608296;
    padding-top: 15px;
    font-size: 15px;
    font-family: "Century Gothic", Arial, Helvetica, Sans-serif;
    letter-spacing: 1px;
    text-align:center;
    postion:relative;
    }

    If you want to get the W3 links further from the right, use

    margin-left: Xpx;

    clear: is only used when you want the element to clear a float.
     
    SEbasic, Jun 13, 2005 IP
  3. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks - I was close!

    And i did manage to do a lot more before this bit!
    And also managed to fix an issue on another site today - all by myself!!:D

    Just one last thing here:
    The 2 horizontal bars - the #nav and the #footer are different sizes between IE and FF.

    Cant work out why!
     
    THT, Jun 13, 2005 IP
  4. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Firefox and ie tend to render sizes differently.
    It happens a lot with floats and can be a pain.

    I haven't played with it, but................


    You can place this in the header of your html documents and create a specific stylesheet especially for ie.
    Any styles you place in there will overide the styles in your original stylesheet.

    <!--[if gte IE 4]>
    <link rel="stylesheet" href="css file location" type="text/css" />
    <![endif]-->

    Hope it helps... Let me know. :)
     
    SEbasic, Jun 13, 2005 IP
  5. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    fixed it - was a padding issue

    Thanks again
     
    THT, Jun 13, 2005 IP