Sat, 2013-11-02 21:56
Hi all,
To start i'll paste my css and html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en-US"> <head> <meta content="en-au" http-equiv="Content-Language"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link href="../../resources/css/classes.css" rel="stylesheet" type="text/css"> <title>Gallery</title> <link rel="shortcut icon" href="../../resources/images/favicon.ico"> </head> <body> <div class="header"> <img alt="House Boats for Hire Logo" class="himagel" src="../../resources/images/h4h_logo.png"> <div class="divright"> <div class="textcentre"> <h2>Houseboats-4-Hire</h2> <h2>2/36 Jetty Rd</h2> <h2>Hervey Bay QLD 4655</h2> <h2>Ph: 07 4128 0000</h2> <h2>Fax:07 4128 0101</h2> <h2>Email: </p> <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%69%6e%66%6f%40%68%34%68%2e%63%6f%6d%2e%61%75%22%3e%69%6e%66%6f%40%68%34%68%2e%63%6f%6d%2e%61%75%3c%2f%61%3e%27%29%3b'))</script><p></h2> </div> </div> </div> <div class="nav , textcentre"> <a href="../../index.html">Home</a> | <a href="../../pages/fleet/index.html">Fleet</a> | <a href="../../pages/locality/index.html">Locations</a> | <a href="../../pages/rates/index.html">Rates</a> | <a href="../../pages/faq/index.html">FAQ</a> | <a href="../../pages/testimonials/index.html">Testimonials</a> | <a href="../../pages/gallery/index.html">Gallery</a> | <a href="../../pages/contact/index.html">Contact</a> | <a href="../../pages/links/index.html">Links</a> </div> <div class="content"> <div class="adbanner"> <img class="ad-prop" alt="Fake Ad" src="../../resources/images/vert-ad-01.png"> <img class="ad-prop" alt="Fake Ad" src="../../resources/images/vert-ad-02.png"> <img class="ad-prop" alt="Fake Ad" src="../../resources/images/vert-ad-02.png"> </div> <h2>Gallery</h2> <p>Click on an Image for a Larger View.</p> <p>Brezza Legera Images</p> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-1/lrg-01.jpg" target="_blank"><img class="table" alt="Houseboat 1" src="../../resources/images/Houseboat-1/sml-01.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-1/lrg-02.jpg" target="_blank"><img class="table" alt="Houseboat 1 Top Deck" src="../../resources/images/Houseboat-1/sml-02.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-1/lrg-03.jpg" target="_blank"><img class="table" alt="Houseboat 1 Back Deck" src="../../resources/images/Houseboat-1/sml-03.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-1/lrg-04.jpg" target="_blank"><img class="table" alt="Houseboat 1 Front Deck" src="../../resources/images/Houseboat-1/sml-04.jpg"></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-1/lrg-05.jpg" target="_blank"><img class="table" alt="Houseboat 1 Kitchen" src="../../resources/images/Houseboat-1/sml-05.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-1/lrg-06.jpg" target="_blank"><img class="table" alt="Houseboat 1 Living Area" src="../../resources/images/Houseboat-1/sml-06.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-1/lrg-07.jpg" target="_blank"><img class="table" alt="Houseboat 1 Bunk Beds" src="../../resources/images/Houseboat-1/sml-07.jpg"></a></div> </div> <p>Aqua di Fiume Images</p> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-2/lrg-01.jpg" target="_blank"><img class="table" alt="Houseboat 2" src="../../resources/images/Houseboat-2/sml-01.jpg"></a></div> </div> <p>Rivera Vivente</p> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-3/lrg-01.jpg" target="_blank"><img class="table" alt="Houseboat 3" src="../../resources/images/Houseboat-3/sml-01.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-3/lrg-02.jpg" target="_blank"><img class="table" alt="Houseboat 3 Top Deck" src="../../resources/images/Houseboat-3/sml-02.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-3/lrg-03.jpg" target="_blank"><img class="table" alt="Houseboat 3 Back Deck" src="../../resources/images/Houseboat-3/sml-03.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-3/lrg-04.jpg" target="_blank"><img class="table" alt="Houseboat 3 Front Deck" src="../../resources/images/Houseboat-3/md-04.jpg"></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-3/lrg-05.jpg" target="_blank"><img class="table" alt="Houseboat 3 Kitchen" src="../../resources/images/Houseboat-3/sml-05.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-3/lrg-06.jpg" target="_blank"><img class="table" alt="Houseboat 3 Living Area" src="../../resources/images/Houseboat-3/sml-06.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-3/lrg-07.jpg" target="_blank"><img class="table" alt="Houseboat 3 Bunk Beds" src="../../resources/images/Houseboat-3/sml-07.jpg"></a></div> </div> <p>Libero Aquila</p> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-4/lrg-01.jpg" target="_blank"><img class="table" alt="Houseboat 3" src="../../resources/images/Houseboat-4/sml-01.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-4/lrg-02.jpg" target="_blank"><img class="table" alt="Houseboat 3 Top Deck" src="../../resources/images/Houseboat-4/sml-02.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-4/lrg-03.jpg" target="_blank"><img class="table" alt="Houseboat 3 Back Deck" src="../../resources/images/Houseboat-4/sml-03.jpg"></a></div> <div class="td"><a href="../../resources/images/Houseboat-4/lrg-04.jpg" target="_blank"><img class="table" alt="Houseboat 3 Front Deck" src="../../resources/images/Houseboat-4/sml-04.jpg"></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-4/lrg-05.jpg" target="_blank"><img class="table" alt="Houseboat 3 Kitchen" src="../../resources/images/Houseboat-4/sml-05.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-4/lrg-06.jpg" target="_blank"><img class="table" alt="Houseboat 3 Living Area" src="../../resources/images/Houseboat-4/sml-06.jpg"></div> <div class="td"><a href="../../resources/images/Houseboat-4/lrg-07.jpg" target="_blank"><img class="table" alt="Houseboat 3 Bunk Beds" src="../../resources/images/Houseboat-4/sml-07.jpg"></a></div> </div> <p>Magnifica Nave</p> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-01.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-01.jpg" alt="Kitchen"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-02.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-02.jpg" alt="Living Area"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-03.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-03.jpg" alt="Living Area 2"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-04.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-04.jpg" alt="Lounge"></a></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-05.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-05.jpg" alt="Stairway"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-06.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-06.jpg" alt="Controls"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-07.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-07.jpg" alt="Back Deck"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-08.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-08.jpg" alt="Back Deck 2"></a></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-09.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-09.jpg" alt="Stairway 2"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-10.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-10.jpg" alt="Bedroom"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-11.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-11.jpg" alt="Lounge 2"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-12.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-12.jpg" alt="Controls 2"></a></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-13.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-13.jpg" alt="Inside Front View"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-14.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-14.jpg" alt="Top of Stairway"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-15.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-15.jpg" alt="Back Deck 3"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-16.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-16.jpg" alt="Living Area 3"></a></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-17.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-17.jpg" alt="Dining Table"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-18.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-18.jpg" alt="Spa"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-19.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-19.jpg" alt="Kitchen/Dining Table"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-20.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-20.jpg" alt="Lounge with Tv"></a></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-21.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-21.jpg" alt="Bunk Beads"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-22.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-22.jpg" alt="Inside Lounge"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-23.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-23.jpg" alt="Back Lounge"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-24.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-24.jpg" alt="Top Deck"></a></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-25.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-25.jpg" alt="Living Area 4"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-26.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-26.jpg" alt="Living Area 5"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-27.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-27.jpg" alt="Bedroom 2"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-28.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-28.jpg" alt="Stairway 3"></a></div> </div> <div class="table"> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-29.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-29.jpg" alt="Outside Perspective 1"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-30.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-30.jpg" alt="Outside Perspective 2"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-31.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-31.jpg" alt="Outside Side View"></a></div> <div class="td"><a href="../../resources/images/Houseboat-5/lrg-32.jpg" target="_blank"><img class="table" src="../../resources/images/Houseboat-5/sml-32.jpg" alt="Oustide Side View 2"></a></div> </div> </div> <div class="footer"> <div id="footer" class="textcentre"> <a href="../../index.html">Home</a> | <a href="../../pages/fleet/index.html">Fleet</a> | <a href="../../pages/locality/index.html">Locations</a> | <a href="../../pages/rates/index.html">Rates</a> | <a href="../../pages/faq/index.html">FAQ</a> | <a href="../../pages/testimonials/index.html">Testimonials</a> | <a href="../../pages/gallery/index.html">Gallery</a> | <a href="../../pages/contact/index.html">Contact</a> | <a href="../../pages/links/index.html">Links</a> </div> <p class="textcentre">© Houseboats-4-Hire</p> </div> </body> </html>
/* For: Houseboats-4-Hire (<a href="http://www.h4h.com.au" rel="nofollow">www.h4h.com.au</a>) Description: Simple, Elegant, Commented! Author: Joel Tyrrell Author URI: <a href="http://www.joelsjunk.comxa.com" rel="nofollow">www.joelsjunk.comxa.com</a> IF ADDING PICTURES AS CONTENT:You must set the <img> id to:img-content Feel Free to Like or Hate :-) /**********************************************************/ /* Text */ h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16pt; font-variant: normal; text-transform: lowercase; color: #3893cc; font-weight: bold; text-decoration: underline; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14pt; color: #69bce2; font-weight: bold; } h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #729C20; font-weight: bold; font-style: italic; } .content h1 { margin: 20px; } .content h2 { margin: 20px; } .content h3 { margin: 20px; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #000000; margin: 20px; } .divright { float: right; width: 300px; } .textcentre { text-align: center; } .content { line-height: 150%; } li { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #000000; } /**********************************************************/ /* Hyperlinks */ a:link { font-family: Tahoma, Geneva, sans-serif; font-size: 12pt; color: #3893CC; } a:active { font-family: Tahoma, Geneva, sans-serif; font-size: 12pt; color: #729C20; } a:visited { font-family: Tahoma, Geneva, sans-serif; font-size: 12pt; color: #000000; } a:hover { font-family: Tahoma, Geneva, sans-serif; font-size: 12pt; color: #69BCE2; text-decoration: underline; } /**********************************************************/ /* Footer Hyperlinks */ #fhlinks a:link { font-family: Tahoma, Geneva, sans-serif; font-size: 10pt; color: #3893CC; } #fhlinks a:active { font-family: Tahoma, Geneva, sans-serif; font-size: 10pt; color: #729C20; } #fhlinks a:visited { font-family: Tahoma, Geneva, sans-serif; font-size: 10pt; color: #000000; } #fhlinks a:hover { font-family: Tahoma, Geneva, sans-serif; font-size: 10pt; color: #69BCE2; text-decoration: underline; } /**********************************************************/ /* Image Properties */ /*IMPORTANT*/ /*All Images in body of site must use the following style:*/ #img-content { margin: 5px 5px 5px 20px; padding: 0x; max-width: 650px; } .himagel { position: absolute; top: 0px; left: 0px; padding: 5px; margin: 5px; height: 140px; width: 300px; } .ad-prop{ margin:20px 20px 20px 5px; } /**********************************************************/ /* Layout */ * { margin: 0; } html, body { height: 110%; background-color: #20221B; padding: 10px; } .header { position: relative; width: 700px; height: 150px; padding: 10px; margin: 0px auto 0px auto; } .nav { box-shadow: 0px 0px 5px 5px #F6F6F6; background-color: #F6F6F6; width: 600px; padding: 10px; margin: 70px auto 0 auto; } .content { position: relative; box-shadow: 0px 0px 5px 5px #F6F6F6; min-height: 1000px; margin: 80px auto 10px auto; width: 900px; background-color: #F6F6F6; padding: 10px; } .footer { box-shadow: 0px 0px 5px 5px #F6F6F6; margin: 50px auto 40px auto; width: 900px; height: 70px; background-color: #F6F6F6; padding: 10px; } /**********************************************************/ /* Side Banner */ .contentimg { float: right; width: 300px; height: 225px; margin: 50px 20px 0px 20px; background-color:#AAAAFF; } .adbanner { clear: right; float: right; width: 185px; height: 900px; } /**********************************************************/ /* Table Style */ div.table{ max-width:610px; height:105px; margin-left:20px; } div.td{ float: left; margin: 0px 5px 5px 5px; } img.table{ width:140px; height:100px; }
So In Chrome it all looks fine. If you look under the Table Style tab(at the bottom) you'll see all the stting wich creates a simple table.but when it is open in IE10 it is only three pictures wide. The content div does expand but not enough for all the pictures, it's as if the content expands to suit the pictures if they were four wide but because it is three wide it overflows. Also is there an easy way to stop IE10 from giving pictures the a:active and all the other a attributes? Feel free to ask for more info, or if you want i could upload it to a site so you have images.
Thanks,
Joel
Sat, 2013-11-02 22:51
#1
Hi Joe, It might be due to
Hi Joe,
It might be due to differences in the way the two browsers are handling your margina - I noticed that increasing the max-width on your rows to 640px solves the problem with your divs are wrapping too early. I would also try to avoid setting the line height unless you absolutely need to.
The best approach for your pictures is probably to create a new class for your image links and then you can mess around with the active/inactive pseudo class styling without having to worry about the other link formatting.
Chris