Home of the ColdFusion Community
|
Mailing Lists
|
Home /
Groups /
ColdFusion Talk (CF-Talk)
CSS / Fieldset / IE
Author: Jim Davis
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213242
----- Excess quoted text cut - see Original Post for more -----
Came through here - check the archives at www.houseoffusion.com to get the
message again.
Jim Davis
Author: Dawson, Michael
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213233
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: Russ Michaels
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213228
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
Here is an example of what I am talking about...
www.cfcoder.com/test.html
Author: Dawson, Michael
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213208
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: Tangorre, Michael
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213204
----- Excess quoted text cut - see Original Post for more -----
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
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213201
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>
Here is an example of what I am talking about...
www.cfcoder.com/test.html
Author: Jim Davis
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213197
> 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?
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
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213192
> Subject: RE: CSS / Fieldset / IE
Here is an example of what I am talking about...
www.cfcoder.com/test.html
Author: Dawson, Michael
Short Link: http://www.houseoffusion.com/groups/cf-talk/thread.cfm/threadid:41415#213191
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
|
May 24, 2012
|
Latest Fusion Authority Articles
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
