Forum Moderators: not2easy
Here is what I have so far...
<html>
<head>
<body><!-- .CSS PAGE SETTINGS -->
<style type="text/css">
div.row {
padding-top: 4px;
}
html > body > div.row {
padding-top: 4px;
}
div.row span.column2 {
border: 0px solid #ff0000;
width: 85px;
text-align: left;
margin-top: 4px;
}
html > body > div.row > span.column1 {
border: 0px solid #ff0000;
width: 85px;
text-align: left;
margin-top: 4px;
}
div.row span.column2 {
border: 0px solid #ff0000;
width: 150px;
text-align: left;
}
html > body > div.row > span.column2 {
border: 0px solid #ff0000;
width: 150px;
text-align: left;
}
</style>
<!-- END .CSS PAGE SETTINGS -->
<center>
<br>
<br>
<br>
<br>
<div id="login" style="width: 300px; background-color: #f1f3f4;">
<FORM METHOD="POST" ACTION="checklogin.php">
<div class="row">
<span class="column1"><span class="text"><strong>User: </strong></span></span>
<span class="column2"><input type="text" name="uname" size="15"></span>
<span class="column1"><span class="text"><strong>Password: </strong></span></span>
<span class="column2"><input type="password" name="passwd" size="15"></span>
</div>
<br>
<br>
</FORM>
</div>
</body>
</html>
Anybody see anything?
tlflow
Add this line to the very top of your code, before <html>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
It'll probably look rubbish in IE now too, but they should at least look the same. Then you can tidy it up for both browsers.
Thanks!
what that should've done is make it look the same in IE as it does in FF - although that's not the way you want.
Without that Doctype IE will be in 'quirks rendering' mode and might (in this case was) doing things that no other browser, including IE in standards compliant mode supports : read more on Doctypes [webmasterworld.com]
In your case you have widths on your <span>'s - a <span> is an inline element [w3.org] - CSS does not support width on an inline element [w3.org] - but IE used to (that's what quirks mode is a backwards compatible mode) - so in this case IE in quirks and IE5.x is the only browser that will render your form as you want.
One way we try to help people who are new to CSS is to tell them to develop in FF/Opera first then go back and fix if necessary for IE - not the other way around because it's much harder to understand.
Answer to your question would be to use floats which you can put widths on, and you might like to take a look at a post in the library - Tableless CSS Forms [webmasterworld.com] to get a start on some ways it can be done.
Also your code is duplicated there is no need for rules to be specified twice using different selector methods. You might have seen hacks in the past which used child selectors [w3.org] to overwrite some rules for IE, but IE7 now reads the child selector rule so their usage is becoming limited. Basically
div.row {padding-top: 4px;}is exactly the same as
html > body > div.row {padding-top: 4px;} so there should be no need to specify it twice.. and as far as I see your column rules are the same although they'll need changed anyway.
hth and see how you get on with the floats and do ask more if you like
Suzy
the <style> element is in the wrong place it should be a child of the <head> element
perhaps now I should mention the validators too:
HTML Validator [validator.w3.org] and CSS Validator [jigsaw.w3.org]
they can be used to check for malformed code, especially the HTML one as a check for wrongly nested elements which can cause unexpected CSS results at times too
[edited by: SuzyUK at 4:41 pm (utc) on April 17, 2007]
