For part of a site I'm working on, I am constructing a price list... Since it is to be interactive, I am using checkbox type inputs and labels to make this; you check which services you want and the webpage gives you the total cost of these services. Easy enough.
My problem is a stylistic one; I am using a span with the float property set to right to distinguish between the price and the service description(the price gets right aligned within a div, the description gets left aligned next to the check box). The entire label is positioned with relative positioning. When I set the hover pseudo class to change the color of the label, the color change doesn't seem to work properly on chrome. Below is a small code sample that replicates the issue...
<html>
<head>
<style type="text/css">
div#leftcolumn
{
width:500px;
}
span.right
{
float:right;
}
input, label
{
position:relative;
left:50px;
}
label:hover
{
color:#FF0000;
}
</style>
</head>
<body>
<div id="leftcolumn">
<input id="option1" type="checkbox" /><label for="option1">This is a label... span class="right">and this is the same label</span></label><br/>
<input id="option2" type="checkbox" /><label for="option2">A new label!<span class="right">Y U NO COLOR RIGHT</span></label>
</div>
</body>
If you try this example on Chrome, I believe you should notice very odd hover behavior... However, this seems to work fine in Firefox and Internet explorer. Is this a bug with chrome? Is this poor coding on my part? My actual page validates.... I would appreciate it if someone who understands this problem would explain what is going on. I know I can make a work-around by moving the relative positioning into a div and placing all my inputs and labels in that div instead of positioning the labels and inputs directly, but I feel as though this SHOULD work....
As always, thank you for your time.
Your problem is not with label position:relative; It seems your problem with float:right
I recommend you to replace span.right with this style
span.right
{
padding-left:100px;
}
another way to solve this issue is to add clear:right; to label:hover style
label:hover
{
color:#FF0000; clear:right;
}