Forum Moderators: not2easy
In IE, my 'send it' button have a border which is what i wanted but in firefox, no border appear.
As you realise also, my 'post it' fieldset is being pushed down by IE and firefox is what i wanted.
Anyone got a idea what should do to make it look consistent on this 2 broswer?
Attached is the URL to my form.htm :
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">* {
margin:0px;
padding:0px;
}#form {
font:12px, Georgia, "Times New Roman", Times, serif;
width: 400px;
}
input, textarea {
border: 3px double #DDDDDD;
padding: 2px;
font: 11px Geneva, Arial, Helvetica, sans-serif;
display: block;
margin: 4px 0 4px 0;
}
fieldset { padding: 12px; border: 1px solid #DDDDDD; margin-top: 6px; }
legend { color: #666666; padding: 0 12px; }
label { color: #666666; display: block; }
#name, #comment{width: 250px;}
</style>
</head>
<body>
<form action="#" method="post" id="form">
<div>
<fieldset>
<legend>Post it</legend>
<label class="required">Name:
<input type="text" id="name"/>
</label>
<label class="required">Comment text:
<textarea id="comment" cols="60" rows="12"></textarea>
</label>
</fieldset>
<input type="submit" id="submit" value="Send it!" />
</div>
</form>
</body>
</html>
[edited by: SuzyUK at 6:12 pm (utc) on Jan. 26, 2006]
[edit reason] swapped link for code.. [/edit]
In IE, my 'send it' button have a border which is what i wanted but in firefox, no border appear.
I see a border in following: IE5.n, IE6, FF1.5, Op8.0. Try changing border colour to red or something bright to doublecheck.
Re the textarea scrollbar:
Good news is that adding textarea {overflow: auto;} should correct IE.
Bad news is that Opera8.0 seems to want to keep it regardless. Even overflow: hidden; had no effect.
Re 'post it' fieldset positioning: FF1.5 does it one way and IE/Op do it another...the 'problem' appears to be in the differing handling of <legend>...take that out and all appear the same. Unsure why...nothing tried so far seems to change things.
Welcome to WebmasterWorld, flaskvacuum!
The methods you guys taught me works.
Another problem i see is, the textarea in IE seem to be shorter compare to firefox will tend to be longer. THus when previewing in both IE and ff, ff seem to be stretch longer. Bte ff is the setting i wanted.
Any idea how to get pass IE rendering of my textarea to look the same as ff? Think IE also render my fieldset differenly then in ff.
The only problem left is in FF, the textarea did not wrap the words and a horizontal scrollbar appear while IE do wrap them automatically.
Anyone have any idea how to let my textarea in FF wrap my texts?
