Question

Okay so this is sort of a double question so I’ll split it into two.

First part

In modern browsers the main bold labels sit above their corresponding form elements, and align to the left as is expected. However in ie7, they randomly site 10-15px inset. I went through the developer tools and could find nothing to fix it. I’ve made sure all my margins and padding is reset so I don’t really understand =S

Here’s the page demo – link

Maybe some of you ie bug fixing genius’s know what the problem is? =D

Second part

Again with labels, this time the in-line ones resident next to the check boxes and radio buttons. In modern browsers again, the side beside the form elements as expected, but not so in ie7 where they take a new line. I’ve tried floating, changing margins and everything but to no effect in sitting it in-line with the div.checker or div.radio that is created by the uniform Jquery plugin.

Here’s the page demo – link

Sorry for troubling you with my ie7 problems, I know they arent the most fun to solve. Hopefully someone has the patience to help.

Matt

Answer 1

Part 1:

ol,ul{
    list-style-type:circle; list-style-position:inside;
}

If you change that to this:

ol,ul{
    list-style-type:circle;
}

Or just remove the definition entirely, that seems to do it for me.

I think that’s a reasonable thing to do, as I don’t see anything actually using the bullet lists.

Edit for Part 2:

IE doesn’t like this:

input{
    background:#FFFFFF url(../images/input_bg.png) repeat-x;
    border:1px solid #CCCCCC;
    margin-bottom:20px;
    -moz-border-radius:3px;
    padding:7px;
    -webkit-border-radius:2px;
}

If you remove the margin-bottom:20px; from that, your radio button won’t be messed up.

Sorry I’m not really providing IE7 specific solutions, but at least you’ve got the spots that need fixing.