Google Chrome interprets CSS very wrong...?

Question

So my I'm almost finished with my website, it looks fine with Firefox and even with IE 8! But Chrome just messes it up.

Here is how it looks on FF:

And here on Chrome:

See how Crome resizes the first image, although it is exactly the same code as the picture below?

Here is the HTML-Code:

<table id="todo" class="subview_table web_coding_table">
<tr>
    <td>
        <img src="image/preview_small/todo.jpg" alt="ToDo-App" />
    </td>
    <td>
        <h2>ToDo Webapplikation</h2>
        <p>Einfache Terminplaner-App zum Erstellen,
Bearbeiten und Löschen von Terminen</p>
    </td>
    <td>
    <div class="white_triangle">&nbsp;</div>
    </td>
 </tr>
</table>



<div id="todo_content" class="invisible_content web_coding_content">
 <p>Die ToDo-Webapplikation entstand als Semesterarbeit zusammen mit meiner     Teamkollegin ---. Die Herausforderung hierbei war die komplexe, klassenbasierte Programmierung mittels JavaScript. Die App speichert Termine cookiebasiert ab und kann daher auch lokal vom Rechner aus verwendet werden.</p>
 <a href="http://www.hs-augsburg.de/~cr/todo_app/" target="_blank" title:"ToDo-App"><img src="image/preview_big/todo.jpg" alt="ToDo Screenshot"/></a>
 <a class="big_link" href="http://www.hs-augsburg.de/~cr/todo_app/" target="_blank" title:"ToDo-App">Zur Live-Demo</a>

<table id="resi" class="subview_table web_coding_table">
<tr>
    <td>
        <img src="image/preview_small/resi.jpg" alt="Resi bringt Bier" />
    </td>
    <td>
        <h2>Resi Bringt Bier</h2>
        <p>Getränke-Nachtlieferservice in München mit Shopsystem.</p>
    </td>
    <td>
    <div class="white_triangle">&nbsp;</div>
    </td>
 </tr>
</table>

<div id="resi_content" class="invisible_content web_coding_content">
 <p>HINWEIS!: Der Kunde dieses Projekts arbeitet selbst noch an der Website und den Inhalten weiter, daher entspricht das Erscheinungsbild möglicherweise nicht meiner eigentlichen Arbeit.</p><br />
 <p>Resi Bringt Bier ist eine Website für einen Nachtlieferanten in München. Sie wurde mit Wordpress umgesetzt und verwendet diverse Plugins sowie eine eigens kreierte Theme. Hinzu kommt die Verwendung eines eigenen JavaScript-Codes, sowie diverse Codeveränderungen in PHP.<p>
 <a href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier"><img src="image/preview_big/resi.jpg" alt="Resi"/></a>
 <a class="big_link" href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier">Zur Website</a>
</div>

Note thate the DIV's with the class "Invisible_content" aren't visible.

Here the CSS:

table h2 {
font-size:1.5em;
color:#FFFFFF;
font-style: normal;
}

table p {
color:#FFFFFF;
}

.subview_table {
height:120px;
position:relative;
margin:20px 0px 0px 0px;
background-color:#961518;
}

.subview_table h2 {
margin-top:0px;
}

.subview_table img {
padding:10px;
margin:0px;
}

.subview_table td {
min-width:70px;
}

.white_triangle {
position:absolute;
top:60px;
right:20px;
height:0;
width:0;
border-color: #FFFFFF transparent transparent transparent;
border-style: solid;
border-width: 15px;
}

.invisible_content {
display:none;
padding: 20px;
background-color:#d8d5c6;
}

Thanks in advance for any help!

Answer 1

OP's Title: Google Chrome interprets CSS very wrong...?

Wrong assumption. If your code is not following proper standards, the browser is forced to simply make guesses about your intentions. In other words, you have invalid and malformed code which is the true root cause, not Chrome.

• Note that you have <a href="http://www.resibringtbier.de" target="_blank" title:"Resi Bringt Bier">, where title:"Resi Bringt Bier" is invalid HTML. Should be title="Resi Bringt Bier". You've repeated this same mistake about five or six times.

• You may have also forgotten the closing tag, </div> on your <div id="todo_content". (depends on which version of the OP you're looking at.)

• Regarding your image size complaint: I'm seeing absolutely nothing in your HTML or CSS that tells the browser what size the image should be rendered, nor can we see the actual native size.

• You have a div inside a td cell, which is not a very good practice.

• Carefully examine and evaluate your CSS techniques... it's lacking many sizing specifications. tables can be somewhat unpredictable when you just leave them to figure themselves out. Specify the width of each td in HTML and/or CSS.

http://jsfiddle.net/t2cFb/2/

---

Run the HTML through the W3C online validator and fix all errors.

http://validator.w3.org/