Doctype affecting CSS? [Archive]

Click to See Complete Forum and Search --> : Doctype affecting CSS?

cusimar9

11-23-2006, 07:31 AM

Forgive the repost... but this is a different question really

I'm trying to get a form button and a link button to align next to each other.
For some reason I can get them to align in Firefox but not in IE.

I've finally found something which appears to work, but when I put in the right DOCTYPE it fails to work

This is the (working) code:

<html>
<head>
<title>Testing</title>

<style type="text/css">
p { margin: 10px; }

form button{
cursor: pointer;
margin: 0px 2px 0px 2px; padding: 3px 10px 3px 10px;
text-decoration: none;
text-align: center;
background: #faa;
color: #fff;
border: 1px solid #808080;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
font-weight:bold;
}
a.linkbutton {
margin: 0px 2px -4px 2px; padding: 4px 10px 4px 10px;
height: 24px;
text-decoration: none;
text-align: center;
background: #aaf;
color: #fff;
border: 1px solid #808080;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
font-weight:bold;
}
</style>

</head>

<body>
<form action="">
<table>
<tr>
<td style="width: 300px; background: #ccc;">
<p><button type="submit" id="btn">Test Button</button> <a class="linkbutton" href="javascript:void(0);">Test Link</a></p>

</td>
</tr>
</table>
</form>

</body>
</html>

But when I add the following Doctype, the two buttons no longer align:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This is the page, complete with doctype, which doesn't work in IE:

http://www.richlyn.co.uk/test.html

It does validate: http://validator.w3.org/check?uri=http://www.richlyn.co.uk/test.html

Any help would be greatly appreciated.

drhowarddrfine

11-23-2006, 10:41 AM

Before you do ANY coding, you must establish the rules of the page by adding a proper doctype. But you coded first, establishing the set of rules as "quirks mode", then changed the rules to xhtml strict. Of course, things changed. You changed the rules!

_Aerospace_Eng_

11-23-2006, 01:04 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Testing</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}

#formcontain {
width:280px;
background:#CCC;
padding:10px;
}

input, a.linkbutton {
cursor:pointer;
text-align:center;
background:#faa;
color:#fff;
border:1px solid gray;
font:11px Tahoma, Arial, Helvetica, sans-serif;
font-weight:700;
margin:0 2px;
padding:0 10px;
display:block;
width:100px;
float:left;
height:26px;
}

a.linkbutton {
margin:0;
text-decoration:none;
background:#AAF;
display:block;
width:154px;
float:left;
height:24px;
line-height:24px;
}

.clear {
clear:both;
font-size:1px;
line-height:0px;
height:0;
}
</style>
</head>
<body>
<form action="#">
<div id="formcontain">
<input type="submit" id="btn" value="Test Button">
<a class="linkbutton" href="#">Test Link</a>
<div class="clear"> </div>
</div>
</form>
</body>
</html>

cusimar9

11-24-2006, 02:53 AM

Thanks Aerospace_Eng, that works a treat! :D
Could you please explain the 'Clear' div? The page is messed up without it, but why?

disembodied

11-24-2006, 10:47 AM

you need the clear:both command because you use floats and floats take the element out of the flow of the document, which means anything left in the flow of the document acts like it doesn't exist... so in order to get things to act like it does (for instance, get a footer to drop below the content if the content is floated) you have to clear the floats, so it treats everything like it is in the correct flow of the document.

I didn't look at the CSS for your page specifically, but that is why you need a clear command in general.