Home of the ColdFusion Community
August 21, 2008
For ColdFusion hosting try HostMySite.com. |
Home /
Groups /
ColdFusion Talk (CF-Talk)
CSS / Fieldset / IE
Did you try "background-color: transparent;"?Dawson, Michael 07/28/05 02:07 P > -----Original Message-----Jim Davis 07/28/05 02:48 P > Subject: RE: CSS / Fieldset / IETangorre, Michael 07/28/05 02:13 P Yes it's annoying, I couldn't find any way round it either, so I just endedRuss Michaels 07/28/05 04:30 P This is about as close as I could get without the final tweaking to getDawson, Michael 07/28/05 02:52 P > From: Jim Davis [mailto:HOFLists@depressedpress.com]Tangorre, Michael 07/28/05 02:55 P My latest attempt gets it much closer in both browsers. I added anDawson, Michael 07/28/05 02:57 P I posted two solutions to this, but I didn't see them come through. CanDawson, Michael 07/28/05 04:44 P > -----Original Message-----Jim Davis 07/28/05 06:35 P
Author: Dawson, Michael
Did you try "background-color: transparent;"? Or set the margin/padding to 0px; Does anyone know of a way to remove the extra "area" above a fieldset/legend that shows up in IE when the fieldset has a different background color than the page background color? It looks perfect in FF but in IE the background color of the fieldset bleeds above the border of the fieldset... any CSS hacks or tricks? Thanks! Mike
Author: Jim Davis
> -----Original Message----- That "feels" like something that's probably not in the CSS spec (and thus left to agent developer's to decide)... if so then both implementations can be "right". But if you want to force it you might try setting a background graphic on the fieldset that's pinned to the top, tiles horizontally, matches the page's background color and is only as tall as the space you want to mask. Jim Davis
Author: Tangorre, Michael
> Subject: RE: CSS / Fieldset / IE Here is an example of what I am talking about... www.cfcoder.com/test.html
Author: Russ Michaels
Yes it's annoying, I couldn't find any way round it either, so I just ended up using borders instead of fieldsets. Satachi Internet Development Web Development and Consulting Russ Michaels > Subject: RE: CSS / Fieldset / IE Here is an example of what I am talking about... www.cfcoder.com/test.html
Author: Dawson, Michael
This is about as close as I could get without the final tweaking to get the dimensions the same on both browsers. The margins need to be modified for IE to not overlap the form field with the legend. I found a few posts that say, basically, that this can't be done. M!ke <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form style="margin: 10;"> <fieldset style="background-color: #cccccc; margin: 10px; position: absolute; z-index: 3;"> <legend style="background-color: white; margin-top: -10px; position: absolute; z-index: 2;">New Inventory Item</legend> <label for="deviceName" title="Device Name">Device Name:</label> <input type="text" name="deviceName" maxlength="50" /><br /> <label for="make" title="Device Make">Make:</label> <input type="text" name="make" maxlength="50" /><br /> <label for="model">Model:</label> <input type="text" name="model" maxlength="50" /><br /> </fieldset> </form> </body> </html> > Subject: RE: CSS / Fieldset / IE Here is an example of what I am talking about... www.cfcoder.com/test.html
Author: Tangorre, Michael
> From: Jim Davis [mailto:HOFLists@depressedpress.com] Seems like it is a known issue with no "nice" x-browser solution. "IE is coloring the bounding box of the whole fieldset including the legend; FF is coloring the bounding box of the fieldset without the legend. It doesn't have to do with the contents of the fieldset text, it has to do with where the background bounding box is when a fieldset has a legend. You could make a case for either way being correct." snipped from a website.
Author: Dawson, Michael
My latest attempt gets it much closer in both browsers. I added an empty div tag to space the legend from the form fields. M!ke <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form> <fieldset style="background-color: #cccccc; margin: 10px; position: absolute; z-index: 3;"> <legend style="background-color: white; margin-top: -8px; position: absolute; z-index: 2;">New Inventory Item</legend> <div style="height: 10px;"></div> <label for="deviceName" title="Device Name">Device Name:</label> <input type="text" name="deviceName" maxlength="50" /><br /> <label for="make" title="Device Make">Make:</label> <input type="text" name="make" maxlength="50" /><br /> <label for="model">Model:</label> <input type="text" name="model" maxlength="50" /><br /> </fieldset> </form> </body> </html>
Author: Dawson, Michael
I posted two solutions to this, but I didn't see them come through. Can anyone confirm that they went through? The final solution I had was with a <div> that controlled the spacing between the <legend> and the following content. If it didn't go through, I can probably duplicate it again, but I didn't keep a copy of the message I sent. M!ke Yes it's annoying, I couldn't find any way round it either, so I just ended up using borders instead of fieldsets. Satachi Internet Development Web Development and Consulting Russ Michaels
Author: Jim Davis
> -----Original Message----- Came through here - check the archives at www.houseoffusion.com to get the message again. Jim Davis
|
Mailing Lists
|
Latest Fusion Authority Articles
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
