HTML5's !doctype is messing up my styles
I'm currently working on some simple gallery, that should show thumbnails
of a fixed size of 148px.
When I specify <!doctype html> at the very beginning of the file it messes
up my style so that it looks like on this picture.
Without this line (I guess the browser is working in HTML4 mode then) it
looks correct:
Take a look at the file by yourself:
http://ablage.stabentheiner.de/2013-08-10_gallery.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style fprolloverstyle>
A:hover {color: #FF0000; font-weight: bold}
.imagefloat {
border: medium solid #FFF;
float: left;
margin-top: 0px;
margin-right: 16px;
margin-bottom: 20px;
margin-left: 0px;
}
.nowrap {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.nowrapline2 {
font-size: 12px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
.nowrapline3 {
font-size: 10px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
.error {
font-weight: bold;
color: #F00;
}
</style>
</head>
<body bgcolor="#CCFFCC" background="../background.gif">
<div class="imagefloat">
<table border="0" cellspacing="0">
<tr>
<td><a href=""><img src="http://placehold.it/148x148" width="148"
height="148" border="0"></a></td>
</tr>
<tr height="80px">
<td bgcolor="#FFFFFF" width="148px">
<p class="nowrap">Title</p><p class="nowrap
nowrapline2">Subtitle</p><p class="nowrap
nowrapline3">Copyright</p>
</td>
</tr>
</table>
</div>
<div class="imagefloat">
<table border="0" cellspacing="0">
<tr>
<td><a href=""><img src="http://placehold.it/148x148" width="148"
height="148" border="0"></a></td>
</tr>
<tr height="80px">
<td bgcolor="#FFFFFF" width="148px">
<p class="nowrap">Title</p><p class="nowrap
nowrapline2">Subtitle</p>
</td>
</tr>
</table>
</div>
</body>
No comments:
Post a Comment