Mon, 2005-09-12 02:49
If you take a look at www.tyssendesign.com.au/contact/ in IE and rollover the submit button, you'll notice there's a slight shift in the content on the page. What causes that? Also in IE & Opera, I can't get the legend that says I am interested in to align left. :?
Here's the CSS for the form:
form { margin: 10px 0 20px; }
fieldset { border: none; }
label { clear: left; margin-bottom: 5px; }
label span { float: left; width: 120px; margin-right: 10px; }
input {
padding: 2px 0; margin-bottom: 5px;
width: 200px;
font-size: 85%;
color: #660000;
vertical-align: middle;
border: 1px solid #660000;
}
input:focus, textarea:focus { background: #eedcd7; }
label.check { display: block; margin-left: 130px; line-height: 100%; }
label.check input {
margin: 0 10px 0 0;
padding: 0;
width: auto;
border: none;
}
fieldset#interested { margin-bottom: 10px; }
fieldset#interested legend {
font-size: 100%; color: #000; text-align: left;
}
textarea {
width: 200px;
padding: 2px 0; margin-bottom: 5px;
border: 1px solid #660000;
font-family: "Lucida Grande", "Trebuchet MS", verdana, arial, helvetica, sans-serif;
font-size: 90%;
color: #660000;
}
select, option { font-size: 90%; color: #660000; }
select { padding: 1px; }
button {
clear: left;
float: left;
margin: 5px 0 0 130px; padding: 1px;
font-size: 78%;
font-weight: bold;
color: #660000; background: #e1c2b9;
border: 1px solid #660000;
}
button:hover { color: #FFF; background: #C28472; }And another thing that I've just noticed today which I think is really weird is that changing the font-size on the body tag appears to make no difference in Opera & IE. In fact, I can take it out altogether and still nothing happens.
So where are these browsers picking up their font size from? I just don't get it. :?
Mon, 2005-09-12 12:29
#1
Couple of form questions
I will guess that the jog when you hover over the button is a hasLayout issue with the fieldset (or possibly the form) element.
Use the quick test (zoom:1) on the elements to see if and which. And then work out a compliant solution (* html element {height:1px} or element {width:100%}) that works for your page.
There are a number of issues with legend across different browsers and they are particularly difficult to style. Its probably best to learn to use them in a relatively unstyled way - only controlling font styles. If you really can't live with the default appearance, I would either drop them and use a header or use both and ensure one is set to display:none in each browser with browser specific styles.
Mon, 2005-09-12 12:52
#2
Couple of form questions
I'll check that out tomorrow (nearly bed time here). Any ideas on the font-size issue? It's really perplexing me. :-k
Mon, 2005-09-12 14:43
#3
Couple of form questions
Its not hasLayout. I had the same problem on a form and thought I had fixed it with hasLayout, but I just hadn't tested properly :?
Its to do with the the hover behaviour. I am investigating further...
Mon, 2005-09-12 22:29
#4
Couple of form questions
Chris..S wrote:
And then work out a compliant solution (* html element {height:1px} or element {width:100%}) that works for your page.
fieldset { width: 100%; } fixed it - thanks!
Just gotta nail down what's happening with the font-size issue now.
Mon, 2005-09-12 22:53
#5
Couple of form questions
Tyssen wrote:
Just gotta nail down what's happening with the font-size issue now.
Sorted out this issue now too. IE & Opera were both picking up this:
<script type="text/javascript">
<!--
browserName=navigator.appName;
browserVer=parseInt(navigator.appVersion);
if ((browserName=="Netscape" && browserVer<=4) || (browserName=="Microsoft Internet Explorer" && browserVer<=4))
document.write("<link rel=\"StyleSheet\" type=\"text/css\" media=\"screen\" href=\"/css/v4.css\" />");
//-->
</script>which links to a stylesheet I'd created for version 4 browsers. Guess that's not working properly so I'll have to take a look at that.
Tue, 2005-09-13 00:08
#6
Couple of form questions
Tyssen wrote:
Chris..S wrote:And then work out a compliant solution (* html element {height:1px} or element {width:100%}) that works for your page.
fieldset { width: 100%; } fixed it - thanks!
Just gotta nail down what's happening with the font-size issue now.
Damm 
I was right first time, well sorta...
Its not hasLayout, as zoom & height don't fix it. width:100% seems to be granted special powers on the fieldset element to kill its margins - and its the fieldset's margins which are the root of this evil :!:
Get rid of the fieldset's margin and you won't need the width:100%. Since the width:100% is killing the margins anyhow, it doesn't make sense to keep them and the margins.
More information can be found in this post of Gary's ... http://www.csscreator.com/css-forum/ftopic11985.html
Tue, 2005-09-13 00:13
#7
Couple of form questions
Chris..S wrote:
and its the fieldset's margins which are the root of this evil :!:
Get rid of the fieldset's margin and you won't need the width:100%.
But I don't actually have a margin on the parent fieldset. There's a bottom margin on a fieldset within a fieldset, but not on the one that contains the button (and the button's not adjacent to the margined fieldset either).
Tue, 2005-09-13 00:20
#8
Couple of form questions
Did you try removing that margin?
I didn't experiment with width:100% when I first mentioned the hasLayout solution as using it messed up the layout. After you posted I went back and checked. There should have been nothing that prevented my fieldset taking width:100%. The only other style on the fieldset were {border:none, margin:1em 0; padding:0;}, yet applying width:100% shifted my three fieldsets together and up and to the left (I haven't figured the left movement out yet).
So, I took the width:100% off, set margin:0 and there was no jog on hover. Also the layout didn't close up anywhere near as much. So something really wierd is going on with that width:100% - at least in my case.
Tue, 2005-09-13 00:28
#9
Couple of form questions
Yeah, you're right - removing that margin and width:100% and it works in IE. But then I get the checkboxes butting up against the textarea in FF so I think I'm happy to leave it as such for the time being.