views:

365

answers:

6

Debugging experienceThis is making me want to kill myself.

I have some really simple CSS to style my input objects:

    input, button
    {
        border: 1px solid #c66600;
        background-color: white;
        color: #7d212f;
        font-family: "Eras Light ITC", Tahoma, sans;
    }

But I don't like the ugly border it puts around radio buttons, so I use a selector to kill the border:

input[type=radio] { border: none; }

You can probably guess what browsers this works in and which ONE it does not work in. What's funny is when I press F12 to launch the excellent developer tools in IE8 it actually tells me that the style of the radio buttons has been overridden to 'none' just like I asked it to do, but the border remains on the radio button objects.

I have tried a variety of semantic things, like setting the border width to 0px or the color to something insane like lime green, but it remains the originally assigned color that it got from the first style.

And finally, I have tried only styling 'text' objects, in which case no style is applied to anything. Again, the browser claims to fulfill the CSS selection, but it visually does not happen.

Thoughts?

By the way, this is a DotNetNuke installation with generated code where I can't explicitly set the style of the radio buttons.

Thanks, Dan

A: 

Just in case, have you tried with:

input[type='radio'] { border: none; }

Notice the addition of the apostrophe (or whatever you call the ' in your funny language :P)


I looked at the site, your CSS is correct and there is nothing I can help you with. Good luck!

Kaze no Koe
Tried with the apostrophes as well. Same thing. Live example (under construction) is here: http://dmhermitage.org/portalInspect the radio buttons by the search box to see what i mean.
Dan
A: 

You can remove the border by setting an inline style attribute in the developer toolbar to border: none;... So for some reason the style isn't applied to the radio-button although the style is traced correctly. Seems like some sort of bug.. Have you tried jacking up the specificity of the rule (it should already be higher than input, but just to try it out)?

For instance:

#page input[type=radio] {
   border: none;
}
PatrikAkerstrand
A: 

It's not possible with CSS anymore (as far as I know), but using this Javascript here it will be possible for you; Styling checkboxes and radio buttons with CSS and Javascript.

Kyle Sevenoaks
+1  A: 

problem is...

Being most helpful ever, please notice, that somehow, your page get's rendered in quirks mode, thus in some screwed way nobody should ever use.

solution [edit]

due to: http://dorward.me.uk/www/ie8/

set your html 4 doctype to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;
Adam Kiss
Um...that adds a HTML comment, not a doctype.
DisgruntledGoat
without `--` of course... (edited)
Adam Kiss
and why minus? .
Adam Kiss
Thanks so much, this fixed the issue on my local box (haven't uploaded yet).
Dan
A: 

IE8 appears to be rendering in quirks mode instead of standards mode, which always messes everything up in IE. To switch to standards mode, the easiest way is to replace the doctype on the first line of the document with this:

<!DOCTYPE HTML>

You may also want to look at some of the HTML being output. You have a span with ID dnn_dnnMENU_ctldnnMENU that contains dozens of made-up attributes like BackColor, SysImgPath, MenuItemHeightand so on. These will have no effect in most browsers (maybe IE interprets them specially, I dunno).

DisgruntledGoat
it does not only switch to standards, it also switches to *html 5*
Adam Kiss
@Adam: Not in IE it doesn't. And there's not really any difference in the way the other browsers handle HTML 5 standards, apart from supporting a couple more elements.
DisgruntledGoat
A: 

Nasty. Try specifying the border colour to white?

graphicdivine