HTML5's !doctype is messing up my styles

StackOverflow https://stackoverflow.com/questions/18162991

  •  24-06-2022
  •  | 
  •  

Question

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.

How it should look

Without this line (I guess the browser is working in HTML4 mode then) it looks correct:

Hot it actually looks

Take a look at the file by yourself: http://ablage.stabentheiner.de/2013-08-10_gallery.html

New file version: http://ablage.stabentheiner.de/2013-08-10_gallery2.html same file with different doctype: http://ablage.stabentheiner.de/2013-08-10_gallery2_html4.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerie</title>
<base target="Hauptframe">
<style>
body {
    background-color: #CCFFCC;
    background-image:url(../background.gif);
}
table {
    border:none;
    border-spacing:0;
}
img {
    border:none;
}
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;
}
.nowrapline3 {
    font-size: 10px;
}
.error {
    font-weight: bold;
    color: #F00;
}
.caption_cell {
    background-color: #FFF;
    width: 148px;
    height: 80px;
}
</style>
</head>

<body>


<div class="imagefloat">
    <table>
        <tr>
            <td><a href=""><img src="http://placehold.it/148x148" width="148" height="148" alt=""></a></td>
        </tr>
        <tr class="caption_cell">
            <td>

            <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>
        <tr>
            <td><a href=""><img src="http://placehold.it/148x148" width="148" height="148" alt=""></a></td>
        </tr>
        <tr class="caption_cell">
            <td>

            <p class="nowrap">Title</p><p class="nowrap nowrapline2">Subtitle</p>
        </td>
        </tr>
    </table>
</div>

</body>
Was it helpful?

Solution

The solution is simple enough. Images by default are handled as inline objects. For inline rendering, a minimum vertical clearance between rows is generally required and this is added by the browser for better readability. To remove this additional clearance try applying 'display: block' to these images.

OTHER TIPS

Okay, your problem here's simple: you aren't using valid HTML5. The first thing you should always check is that your code validates as well-formed HTML, which yours doesn't. After that, check your CSS too; but just be aware that if the problem is that your site displays more nicely in HTML4 mode than HTML5 mode, then that's not a bug, that means that you've done something wrong writing your code.

Your first step here is to fix all of the glitches which the W3C validator has pointed out; if that doesn't fix the problem, then take another look at your CSS.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top