Doctype removing div styling Options

[adamkelly]

Hey guys,

If I add a doctype, be it transitional or strict, to an HTML page I have it removes the styling of some DIVs.

The HTML & css is:

CODE

<span class="colour-picker">
    <div class="tick-off" id="Black" title="Black" onclick='$(".pricelist").hide();
                          $(".tick-on").removeClass("tick-on").addClass("tick-off");
                          $("#PC_Black").show();
                          $("#ctl00_imgMain").attr("src","../productimages/280/CAN_SX210IS_Black.jpg"/*tpa=http://www.cameraclick.co.uk/productimages/280/CAN_SX210IS_Black.jpg*/);
                          this.className="tick-on";
                          return(false)'>
    </div>
    <div class="tick-off" id="Purple" title="Purple" onclick='$(".pricelist").hide();
                          $(".tick-on").removeClass("tick-on").addClass("tick-off");
                          $("#PC_Purple").show();
                          $("#ctl00_imgMain").attr("src","../productimages/280/CAN_SX210IS_Purple.jpg"/*tpa=http://www.cameraclick.co.uk/productimages/280/CAN_SX210IS_Purple.jpg*/);
                          this.className="tick-on";
                          return(false)'>
    </div>
    <div class="tick-off" id="Gold" title="Gold" onclick='$(".pricelist").hide();
                          $(".tick-on").removeClass("tick-on").addClass("tick-off");
                          $("#PC_Gold").show();
                          $("#ctl00_imgMain").attr("src","../productimages/280/CAN_SX210IS_Gold.jpg"/*tpa=http://www.cameraclick.co.uk/productimages/280/CAN_SX210IS_Gold.jpg*/);
                          this.className="tick-on";
                          return(false)'>
    </div>
    <div style="float: right; margin-right: 6px;">
        Choose&nbsp;colour:</div>
</span>

CODE

.colour-picker #purple {
    background-color: purple;
    width: 20px;
    height: 19px;
    display: block;
    margin: 6px 2px 8px 2px;
    float: right;
}

.colour-picker #gold {
    background-color: #DAA520;
    width: 20px;
    height: 19px;
    display: block;
    margin: 6px 2px 8px 2px;
    float: right;
}

.colour-picker #black {
    background-color: black;
    width: 20px;
    height: 19px;
    display: block;
    margin: 6px 2px 8px 2px;
    float: right;
}

When a doctype is added it completely ignores '.colour-picker #black' etc but when it's removed it shows it again??

Any ideas from that?

[adamkelly]

forgot to add:

without doctype:

http://grab.by/4Map

with doctype:

http://grab.by/4Mas

[pandy]

The id names use different case in the CSS and the HTML.

http://www.w3.org/TR/CSS2/syndata.html#characters
http://www.w3.org/TR/html401/struct/global.html#adef-id
[CS] means Case Sensitive.

Here's why the doctype makes a difference.
http://hsivonen.iki.fi/doctype/

Nothing to do with your problem, but SPAN can't contain block level elements.
http://www.htmlhelp.com/cgi-bin/validate.c...2Fhtml%3E%0D%0A