IE7 and <legend>-elements are not the best mates.

[Anzeo]

Hi all,

 

 

 

Currently working on renewing my site using only CSS, so no more tables. So far the result is quite good imo (when viewing in FireFox). This time however I'm aiming to make the site compliant with FF AND IE.

 

However, I've stumbled upon a very strange output from IE. I haven't found any info on it yet, so I reckon this is the best place to search professional help (not for me, I'm still fine).

 

When you view this page in IE7 and FF  you should notice IE7 tends to place white borders (however, they are not borders!) to the left and right of the legend element.  I managed to cover up the left one using negative margin, but now I'm stuck on how to cover up the right one. Padding won't do, as the legends will have varying sizes.

 

Here's an excerpt of the CSS code:

legend
{
margin:0 0 0 -15px;
padding: 11px 0 10px 10px;
}

 

Note: I have a sepparate stylesheet for IE.

 

Did anyone encounter the same problem or knows about it and if so, could you tell me how you solved this "bug"?

 

 

 

Thanks in advance,

Anzeo

[Anzeo]

Anyone?

[ToonMariner]

have you tried adding display: block; to the legend declaration? (if it does work you should be able to rid teh negative margin.

[bronzemonkey]

Legends cannot be styled consistently across browsers.

[dbrimlow]

Legends cannot be styled consistently across browsers.

 

Exactly, just like all other form elements. And this isn't only a "modern browsers vs. IE" thing. This problem tends to range across browser AND platform.  I assume its because form elements are controlled using defaults of the browser AND OS skin.

 

There are some things you can style. And I've been able to get legend somewhat under control lately using different stylesheets.

 

Today, more than ever with the beta release of IE8, it behooves everyone who uses css to create their own IE management stylesheets. Thanks to conditional comments, this is so much easier than the old IE/Opera hacks littering your css.

 

Here is a good link to a form styling article and example that does at least help manage styling some of the things that can be styled - A List Apart - Prettier Accessible Forms

 

This has helped save my job (my firm's managers and CEO only use IE and were getting tired of hearing me tell them why I couldn't/wouldn't do things that they saw our HACK IEonly competitors doing - the fact we beat them in SEO cuts me only so much slack).

 

Dave

[Anzeo]

Thanks, I'll try it out asap.