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. :?
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.
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
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...
Couple of form questions
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.
Couple of form questions
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.
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.
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
Couple of form questions
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).
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.
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.