| Rounded fieldset in Firefox (12) | Tuesday, Jan 24, 2006 6:47 pm |
Internet Explorer and Firefox interpret <fieldset> differently. IE makes rounded corners; Firefox makes square ones. I just randomly found out how to make Firefox display rounded corners: Put -moz-border-radius: 7pt; in the style sheet (with the leading dash). I didn't implement this on my site, but I verified that it works. (via coldforged)
Very helpful. It worked in a site I did.
Now...is there a way to make the legend appear through the fieldset border as it does in IE?
I emailed Michele and she said, "I took a closer look at my code and realised it was because I put the content of my legend in paragraph tags - for text formatting reasons." So never mind, my thing still works.
Does not do it in my test page. I have a fieldset as a direct child of the body tag, i.e. it is not wrapped by div or p or anything. Within the fieldset I defined a form and a table.
even with the -moz thing in the fieldset CSS thing does nothing to change the appearance. Planned to use it on my website http://www.FocusOnPanama.com/ but no luck yet
This should work perfectly:
<fieldset style="-moz-border-radius: 7pt;">content
</fieldset>
It should render correctly below:
Yup in FF it works great! but then again... squares in IE7 (didnt test below)
And soo the story starts at the beginning... How do I get rounded fieltset in IE and FF :D
Thanks for the post!
IE has rounded corners by default.
What a rubbish response. Did you even read the question? Everyone knows what how to get rouded corners in IE, and how to get them in FF - the big question is hot to get them working for both browsers simulteniusly..
I don't know how I could possibly answer the question better. I showed how to do it in FF, and IE does it by default. Therefore, it works in both browsers simultaneously. The end. Maybe I'm misunderstanding you.
But it seems not working in Google Chrome...
I'm using IE7 and it doesn't have fieldset rounded corners by default. -moz works on Prism 1.0 and FF 3.0 but not on Chrome.
Does anyone have a solution for IE7 or Chrome?
IE7 has fieldset rounded corners, but not if you specify a background color or a background border width. This works:
fieldset {
border-style: groove;
border-collapse: separate; }
But this gives square corners:
fieldset {
background-color: #6495ED;
border-style: groove;
border-collapse: separate;
border-width: 0.2em; }
Since I want a rounded corners, a background color and a border width I'm still looking for a solution for IE7. Any bright ideas anyone?
The solution for Chrome is:
-khtml-border-radius: 7pt;
I'm still looking for an IE7 solution.