9 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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 Wink 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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 20 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference