Skip to main content

css problem 77 Responses

Last post: 2 years, 2 months ago | Thread started: Mar 9, 10, 5:10 a.m.

RespondNew TopicDisable Images

You have dog-eared to response 1, click here to re-open them.
  • seeessess

    http://www.howtocreate.co.uk/fix… ?

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earMar 9, 10, 5:24 a.m. – Permalink
  • flashbender

    most typically this can occur when a float is not cleared.

    Put a <br style="clear:both" /> and see if that fixes it.

    one big issue is that you have the same ID for all of your projects:
    div id="projects1"

    you can easily fix this by making that a class instead of an ID selector.

    Also, instead of padding-top, padding-bottom... you can just use:

    padding:10px 25px 10px 25px.

    the order of that is top right bottom left. this is true of border as well.

    I would also recommend rewriting using actual HTML tags instead of custom classes e.g. use an H1 tag instead of "textheader". This not only makes your pages more accessible, but it also makes them more SEO friendly. For more info on this look up semantic markup.

    a couple links that deal with IE quirks and CSS positioning:
    http://www.positioniseverything.…
    http://www.barelyfitz.com/screen…

    regarding design for old browsers - it depends on your target audience and how much time and effort you wish to spend developing the site... but you can't ignore that IE 6&7 together still account for more than 20% of browsers according to W3C.

    also, your code looks overly complicated for what you are trying to do.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earMar 9, 10, 5:36 a.m. – Permalink
  • flashbender

    in the simpliest layout, all you need is:

    <style type="text/css">
    <!--

    body{
    padding:0;
    margin:0;
    text-align:center;
    }
    .contentBox{
    width:622px;
    text-align:left;
    margin:0 auto;
    }

    .header {
    font-size: 14px;
    padding:10px;
    margin:0 0 10px 0;
    background-color:#CCC;
    border:1px dotted #CCC;
    width:600px;
    }

    .item {
    font-size: 10px;
    padding:10px;
    margin:0 0 10px 0;
    background-color:#F1F1F1;
    border:1px dotted #333;
    width:600px;
    }
    -->
    </style>
    </head>

    <body>
    <div class="contentBox">
    <div class="header style1">Header</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    </div>
    </body>

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earMar 9, 10, 5:42 a.m. – Permalink
  • welded

    Fixed positioning doesn't work in earlier versions of IE. You can either forget about it and add some top margins to your body so the content doesn't end up underneath the header and the page will otherwise work as normal or go for more messy solution... Search for something like 'position fixed ie' and you'll get pages like this one: http://www.howtocreate.co.uk/fix…

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earMar 9, 10, 5:42 a.m. – Permalink
  • ckentish

    Listen to Flashbender - a lot of good advice there...
    ie problems really aren't that scary after a few goes at fixing them - becomes second nature... I know that's not much help for you now though.

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earMar 9, 10, 5:43 a.m. – Permalink
  • six

    superb!

    thanks for your time guys, really helpful...

    next note >add note

    You must be logged in to add a note. Login now or register for an account.

    Cancel
    Dog-earMar 9, 10, 6 a.m. – Permalink

Login or Register to respond to this

Skip to main content