Almost done with my website and it looks great on Firefox and IE 8, but Chrome is causing issues.
Here's how it appears on FF:
And here's Chrome:
Notice how Chrome resizes the first image even though the code is the same as the one below?
Check out 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 Web Application</h2>
<p>Simple task planner app for creating,
editing, and deleting tasks. </p>
</td>
<td>
<div class="white_triangle"> </div>
</td>
</tr>
</table>
<div id="todo_content" class="invisible_content web_coding_content">
<p>The ToDo web application was created as a semester project with my team colleague ---. The challenge here was complex, class-based programming using JavaScript. The app stores tasks based on cookies and can be used locally from the computer.</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">Live Demo</a>
<table id="resi" class="subview_table web_coding_table">
<tr>
<td>
<img src="image/preview_small/resi.jpg" alt="Resi brings beer" />
</td>
<td>
<h2>Resi Brings Beer</h2>
<p>Beverage night delivery service in Munich with shop system.</p>
</td>
<td>
<div class="white_triangle"> </div>
</td>
</tr>
</table>
<div id="resi_content" class="invisible_content web_coding_content">
<p>NOTE: The client of this project is still working on the website and its contents, so the appearance may not completely represent my original work.</p><br />
<p>Resi Brings Beer is a website for a night deliverer in Munich. It was implemented with Wordpress and uses various plugins as well as a custom theme. Additionally, there is the use of custom JavaScript code and various PHP code modifications.<p>
<a href="http://www.resibringtbier.de" target="_blank" title:"Resi Brings Beer"><img src="image/preview_big/resi.jpg" alt="Resi"/></a>
<a class="big_link" href="http://www.resibringtbier.de" target="_blank" title:"Resi Brings Beer">Visit Website</a>
</div>
Note that DIVs with the class "Invisible_content" are not visible.
Here's 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 for any assistance!