Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Div repeating in ie9 – possible misunderstanding of validation service

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #38444
    samborine
    Member

    Hi,
    I have an extra div appearing in ie9. The address is http://www.pclean.com.au/contact-us.html
    at the bottom of the left navigation in ie9 there is a thin button appearing. It does not happen in firefox 12.0. when i investiagated it with webdeveloper it seemed that the div above ( current) was inserted twice. but it isn’t in the code. I’ve put inb the proper doc type and tried to validate the code, but i don’t understand the errors that are being returned. as far as i can see the validation is wrong, so i’m assuming that it isn’t and i have no idea whats happening.

    If someone could help me with this just once, i’m a quick learner and wouldn’t need help again.

    HTML



    "http://www.w3.org/TR/html4/strict.dtd">




    Contact Us




    Pressure Cleaning Sales and Service-Contact Us<br />











    Interpump

    Contact us

    Peter Linton: 0408 580 000Fax : 07 3395 8458















    CSS


    body{
    background:#fff;
    font-family: "Times New Roman", Times, serif;
    font-size:15px;
    color:#333;
    }

    #wrapper{
    position:relative;
    width:960px;
    margin:0 auto;
    }

    #header{
    position:relative;
    margin:0 0px 0 -30px ;
    width:960px;
    padding:20px 0px 30px 0;
    height:50px
    }

    #box{
    position:relative;
    top: 90px;
    padding:20px 10px 40px 10px;
    width:885px;
    margin: 0px 0px 0 6px;
    border-radius: 30px;
    border:20px solid #ee1c25;
    background-color:#FFFFFF;
    min-height: 800px;
    }
    h1{
    font-size:20px;
    font-weight:bold;
    text-decoration:underline;
    }

    h2{font-size:15px;
    font-weight:bold;
    text-decoration:none;
    }
    h2{font-size:20px;
    font-weight:normal;
    text-decoration:none;
    }



    .nav a:link{
    display:block;
    font-family: georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-size:15px;
    color:#fef200;
    background-color:#ee1c25;
    width:120px;
    border-radius: 30px;
    text-align:center;
    border:1px solid #000;
    padding:4px;
    margin: 10px 0 10px 0 ;
    text-decoration:none;
    min-width:240px;
    }

    .nav a:hover{
    color:#ee1c25;
    background-color:#fef200;
    display:block;
    font-family: georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-size:15px;
    width:120px;
    border-radius: 30px;
    text-align:center;
    border:1px solid #000;
    padding:4px;
    margin: 10px 0 10px 0 ;
    text-decoration:none;
    min-width:240px;}

    .nav a:active{
    color:#ee1c25;
    background-color:#fef200;
    display:block;
    font-family: georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-size:15px;
    width:120px;
    border-radius: 30px;
    text-align:center;
    border:1px solid #000;
    padding:4px;
    margin: 10px 0 10px 0 ;
    text-decoration:none;
    min-width:240px;}

    .nav a:visited:hover{
    color:#ee1c25;
    background-color:#fef200;
    border:1px solid #000;
    }

    .nav a:visited{color:#fef200;
    background-color:#ee1c25;
    border:1px solid #000;}

    .current a:link,.current a:visited, .current a:hover, .current a:active{color:#ee1c25;
    background-color:#fef200;
    border:1px solid #000;}



    .back{
    clear:right;


    }
    #box .back a:link{
    display:block;
    font-family: georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-size:15px;
    color:#fef200;
    background-color:#ee1c25 ;
    max-width:80px;
    border-radius: 30px;
    text-align:center;
    border:1px solid #000;
    padding:4px;
    margin: 10px 0 10px 500px ;
    text-decoration:none;

    }

    #box .back a:visited{
    display:block;
    font-family: georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-size:15px;
    color:#fef200;
    background-color:#ee1c25 ;
    max-width:80px;
    border-radius: 30px;
    text-align:center;
    border:1px solid #000;
    padding:4px;
    margin: 10px 0 10px 500px ;
    text-decoration:none;

    }

    #box .back a:hover{
    display:block;
    font-family: georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-size:15px;
    color:#ee1c25 ;
    background-color:#fef200;
    max-width:80px;
    border-radius: 30px;
    text-align:center;
    border:1px solid #000;
    padding:4px;
    margin: 10px 0 10px 500px ;
    text-decoration:none;

    }
    #box .back a:active{
    display:block;
    font-family: georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-size:15px;
    color:#ee1c25 ;
    background-color:#fef200;
    max-width:80px;
    border-radius: 30px;
    text-align:center;
    border:1px solid #000;
    padding:4px;
    margin: 10px 0 10px 500px ;
    text-decoration:none;
    }
    .left{
    width: 25%;
    padding: 10px;
    float:left;
    }

    #104143
    Paulie_D
    Member

    There is something really odd in there.

    You have an element

    which is not a valid element in html (AFAIK). i don’t know if that us causing issues.

    I don’t know how the ‘current’ divs are being inserted either with JS or hard coded but I would have constructed the nav as an unordered list and then applied a class of ‘current’ to the appropriate link.

    #104144
    Paulie_D
    Member

    Also, your link items have a set width of 120px AND a min-width of 240px but again, I don’t know if that is the issue.

    I’m guessing that there is a confused margin, width &/or padding issue going on here.

    There is an awful lot of repetition in your css and that makes it hard to go through.

    #104149
    samborine
    Member

    Yeah i know. its my first site and im still learning what can and can’t be cut out. thanks for your help. ill get rid of the center ect and see what happens. ill try and shorten the css while im at it

    #104152
    Paulie_D
    Member

    To be honest, you’re better off starting with a good reset/normalise css file and, perhaps a grid system.

    That will eliminate a lot of the positioning and margin settings you seem to have going on.

    There are a lot of options out there. HTML boilerplate will have a lot of what you need and I highly recommend the 960 grid system (from 960.gs) although the others have their own preference for grid systems.

    If you’re not familiar with a grid system or perhaps some of the basics I also recommend checking out a couple of video series from net-tuts.

    1. http://net.tutsplus.com/sessions/web-design-from-scratch/
    2. http://net.tutsplus.com/sessions/photoshop-to-html/

    The first is quite basic but has some useful stuff that we often overlook while the second has a useful section on the 960 grid system.

    #104167
    samborine
    Member

    Awesome thanks for your help. I’ll persevere for today but if i cant get it working then i guess i’ll have to start from scratch.
    Removing the

    and the contradictory widths did nothing unfortunately.

    #104170
    samborine
    Member

    I’ll try re coding as a ul

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.