aarondm
12-19-2006, 08:11 AM
I cant seem to make the bottom align on the left div with the rest on mac based browsers, fine on PC though. Perhaps its because the div's are floated and margins sometimes dont function correctly, however I cant seem to get rid of the 4 or so pixels at the bottom left.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Heavy Crane Hire - Specialist hirer of Crawler Cranes</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Heavy crane hire, specialist hirer of crawler cranes." />
<meta name="author" content="Aaron Marshall, Positiv Impact, www.positivimpact.co.uk" />
<meta name="copyright" content="© 2006 Heavy Crane Hire" />
<meta http-equiv="pragma" content="nocache" />
<link rel="stylesheet" type="text/css" href="hch.css" />
</head>
<body>
<div id="container">
<div id="top"><h4><span class="bigh4">Specialist</span> Hirer of <span class="bigh4">Crawler Cranes</span></h4></div>
<div id="innercontainer">
<div id="left"><img src="mainlogo.gif" width="135" height="30" alt="Heavy Crane Hire" />
<p>HEAVY CRANE HIRE</p>
<div id="navigation">
<a href="index.html" title="home">Home</a>
<a href="cranehire.html" title="crane hire services">Crane Hire</a>
<a href="contact.html" title="contact">Contact</a>
</div>
</div>
<div id="mainwindow"><div id="indexmain"><p><span class="highlight">Heavy Crane Hire</span> is a specialist crane hire company operating a modern fleet of Crawler Cranes. We supply cranes for crane hire to all facets of the construction industry, both in the UK and overseas.<br/><br/>
<span class="highlight">Heavy Crane Hire</span> will offer both long and short term hire periods for all your crane hire needs. Whilst Heavy Crane Hire is focused towards Crawler Crane Hire, long term Mobile Crane Hire is also offered.<br/><br/>
Incorporating the most up to date Crawler Crane technology, let our industry experienced team advise you on the most suitable size crane for your individual requirements.</p></div>
<img src="cranehire.jpg" width="120" height="138" alt="Heavy Crane Hire Crawler Crane" /></div></div>
<div id ="bottomcontainer">
<div id="bottomleft"></div>
<div id="midleft"><img src="welc.gif" width="187" height="185" alt="Welcome to Heavy Crane Hire" />
</div>
<div id="midright"></div>
<div id="bottomright">
<p>14 Cavendish Avenue<br/>Sheffield S17 3NJ<br/>UK<br/><br/><span class="contacthighlight">Tel</span> +44(0)114 2350103<br/>
<span class="contacthighlight">Fax</span> +44(0)114 2362815<br/><br/><span class="contacthighlight">Email</span><br/><a href="mailto:info@heavycranehire.co.uk ?subject=website enquiry" title="send Heavy Crane Hire an email">info@heavycranehire.co.uk</a></p></div>
</div></div>
<div id="footer">
<p class="copyright"><span class="bigc">©</span> Heavy Crane Hire 2006</p><p class="website">site developed by <a href="http://www.positivimpact.co.uk"
title="Positiv Impact webdesign & identity solutions">positiv impact</a></p></div>
</body>
</html>
And CSS
body { width: 100%; color: #333333; background: white; margin: 0; padding: 0; font-size: 8pt; font-family: arial, sans-serif; }
#container { width: 760px; height: 410px; background: white; color: #333333;
margin: 0 auto; padding: 0;}
#top { width: 760px; height: 20px; background: white; color: #666666; margin: 5px 0 0 0; padding: 0; }
#top h4 { color: #666666; background: white; text-align: right; margin: 0; padding: 0; letter-spacing: 0.3em; font-size: 12pt;}
.bigh4 {color: black; background: white; font-size: 12pt; }
#innercontainer { width: 760px; height: 190px; margin: 0; padding: 0; background: black; color: #fff7a5; }
#left {width: 165px; height: 190px; margin: 0 5px 0 0; float: left; background: red; color: black; padding: 0; }
#left img { width: 135px; height: 30px; margin: 0 15px 0 15px; padding: 0; float: left; }
#left p { font-family: arial, sans-serif; font-size: 10pt; color: black; background: white; font-weight: bold; text-align: center; width: 100%; margin: 0; padding: 0; }
#navigation {margin: 0; padding: 0; }
#navigation a { display: block; width: 143px; color: white; text-align: center;
background: #666666; text-decoration: none; margin: 5px 0 0 0; padding: 14px 11px; font-weight: bold; font-size: 9pt;}
#navigation a:hover { width: 143px; color: #333333; background: #cccccc; text-decoration: none; font-weight: bold; margin: 5px 0 0 0; padding: 14px 11px; text-align: right;}
#mainwindow { width: 590px; height: 190px; margin: 0; background: white url(mainbg.jpg) no-repeat center; color: #fff7a5; float: left; }
#mainwindow img { width: 120px; height: 138px; margin: 22px 18px 0 0; float: right; padding: 0; border: 3px solid white; }
#indexmain { width: 420px; height: 190px; margin: 0; padding: 0; float: left; color: white; background: transparent; }
#indexmain p { width: 98%; color: white; background: transparent; font-size: 9pt; margin: 14px 0 0 20px;; text-align: justify; }
p { margin: 0; padding: 0; }
img {margin: 0; padding: 0; }
#mainwindow2 { width: 590px; height: 190px; margin: 0; color: #fff7a5; background: white url(mainbg.jpg) no-repeat center; float: left; }
#mainwindow2 img { width: 120px; height: 138px; margin: 22px 18px 0 0; padding: 0; float: right; border: 3px solid white; }
#indexmain2 { width: 420px; height: 190px; margin: 0; float: left; padding: 0; color: white; background-color: transparent; }
#indexmain2 p { color: white; background-color: transparent; font-size: 9pt; width: 98%; margin: 28px 0 0 20px; text-align: justify; }
#mainwindow3 { width: 590px; height: 190px; margin: 0; padding: 0; color: #fff7a5; background: white url(mainbg.jpg) no-repeat center; float: left; }
#mainwindow3 p { width: 88%; color: white; background-color: transparent; margin: 0 auto 0 auto; padding: 8px 0 0 0; text-align: center; font-size: 9pt; }
.highlight { color: white; font-weight: bold; background-color: transparent; }
table { width: 445px; background-color: transparent; color: white; margin: 7px 0 0 65px; padding: 0; }
.formheader {width: 65px; text-align: right; color: white; background-color: transparent; font-weight: bold; margin: 0; padding: 0; font-size: 9pt; }
.formbox { background: #cccccc; color: #333333; border: none; margin: 0; width: 150px; height: 13px; font-size: 8pt; cursor: default; }
.enquiry { background: #cccccc; border: none; color: black; margin: 5px 0 0 0; width: 150px; height: 40px; font-size: 8pt; cursor: default; }
.formbox2 { width: 50px; text-align: center; background: #cccccc; border: 1px solid white; color: #333333; margin: 0 10px 0 0; font-size: 7pt; font-weight: bold; }
option { color: #333333; background: #cccccc; margin: 0; padding: 0; }
select { margin: 0; padding: 0; width: 153px; }
form { margin: 0; padding: 0; }
#bottomcontainer { width: 760px; height: 185px; margin: 5px 0 5px 0; padding: 0; color: #666666; background: white; }
#bottomleft { width: 165px; height: 185px; background: #cccccc url(lowercrane.jpg) no-repeat center; float: left; margin: 0 5px 0 0; }
#midleft { width: 187px; height: 185px; background: white; float: left; margin: 0 5px 0 0; }
#midright { width: 187px; height: 185px; background: white url(bott.jpg) no-repeat center; float: left; margin: 0 5px 0 0; }
#bottomright { width: 206px; height: 185px; background: black; color: white; float: left; margin: 0; padding: 0; }
#bottomright p { font-size: 9pt; color: white; background: black; font-weight: normal; text-align: center; margin: 0 auto 0 auto; padding: 22px 0 0 0; }
#bottomright a, bottomright a:visited { color: #fff7a5; background: black; text-decoration: none; padding: 0; margin: 0; font-weight: bold;}
#bottomright a:hover { color: white; background: black; text-decoration: underline; margin: 0; font-weight: bold; }
.contacthighlight { color: #666666; background: black; font-size: 9pt; font-weight: bold; }
#footer {width: 760px; height: 15px; color: #cccccc; background: white; margin: 0 auto; padding: 0; border-top: 1px solid #cccccc; }
#footer p { color: #666666; background: white; margin: 0; padding: 0; font-size: 7pt; font-weight: bold; }
#footer .copyright { float: left;}
#footer .bigc { color: #666666; background: white; font-size: 8pt; font-weight: bold; }
#footer .website { float: right; }
#footer a, #footer a:visited { color: #666666; font-weight: bold; background: white; text-decoration: none; font-size: 8pt; }
#footer a:hover { color: black; background: white; text-decoration: none; font-weight: bold; font-size: 8pt; }
?????
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Heavy Crane Hire - Specialist hirer of Crawler Cranes</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Heavy crane hire, specialist hirer of crawler cranes." />
<meta name="author" content="Aaron Marshall, Positiv Impact, www.positivimpact.co.uk" />
<meta name="copyright" content="© 2006 Heavy Crane Hire" />
<meta http-equiv="pragma" content="nocache" />
<link rel="stylesheet" type="text/css" href="hch.css" />
</head>
<body>
<div id="container">
<div id="top"><h4><span class="bigh4">Specialist</span> Hirer of <span class="bigh4">Crawler Cranes</span></h4></div>
<div id="innercontainer">
<div id="left"><img src="mainlogo.gif" width="135" height="30" alt="Heavy Crane Hire" />
<p>HEAVY CRANE HIRE</p>
<div id="navigation">
<a href="index.html" title="home">Home</a>
<a href="cranehire.html" title="crane hire services">Crane Hire</a>
<a href="contact.html" title="contact">Contact</a>
</div>
</div>
<div id="mainwindow"><div id="indexmain"><p><span class="highlight">Heavy Crane Hire</span> is a specialist crane hire company operating a modern fleet of Crawler Cranes. We supply cranes for crane hire to all facets of the construction industry, both in the UK and overseas.<br/><br/>
<span class="highlight">Heavy Crane Hire</span> will offer both long and short term hire periods for all your crane hire needs. Whilst Heavy Crane Hire is focused towards Crawler Crane Hire, long term Mobile Crane Hire is also offered.<br/><br/>
Incorporating the most up to date Crawler Crane technology, let our industry experienced team advise you on the most suitable size crane for your individual requirements.</p></div>
<img src="cranehire.jpg" width="120" height="138" alt="Heavy Crane Hire Crawler Crane" /></div></div>
<div id ="bottomcontainer">
<div id="bottomleft"></div>
<div id="midleft"><img src="welc.gif" width="187" height="185" alt="Welcome to Heavy Crane Hire" />
</div>
<div id="midright"></div>
<div id="bottomright">
<p>14 Cavendish Avenue<br/>Sheffield S17 3NJ<br/>UK<br/><br/><span class="contacthighlight">Tel</span> +44(0)114 2350103<br/>
<span class="contacthighlight">Fax</span> +44(0)114 2362815<br/><br/><span class="contacthighlight">Email</span><br/><a href="mailto:info@heavycranehire.co.uk ?subject=website enquiry" title="send Heavy Crane Hire an email">info@heavycranehire.co.uk</a></p></div>
</div></div>
<div id="footer">
<p class="copyright"><span class="bigc">©</span> Heavy Crane Hire 2006</p><p class="website">site developed by <a href="http://www.positivimpact.co.uk"
title="Positiv Impact webdesign & identity solutions">positiv impact</a></p></div>
</body>
</html>
And CSS
body { width: 100%; color: #333333; background: white; margin: 0; padding: 0; font-size: 8pt; font-family: arial, sans-serif; }
#container { width: 760px; height: 410px; background: white; color: #333333;
margin: 0 auto; padding: 0;}
#top { width: 760px; height: 20px; background: white; color: #666666; margin: 5px 0 0 0; padding: 0; }
#top h4 { color: #666666; background: white; text-align: right; margin: 0; padding: 0; letter-spacing: 0.3em; font-size: 12pt;}
.bigh4 {color: black; background: white; font-size: 12pt; }
#innercontainer { width: 760px; height: 190px; margin: 0; padding: 0; background: black; color: #fff7a5; }
#left {width: 165px; height: 190px; margin: 0 5px 0 0; float: left; background: red; color: black; padding: 0; }
#left img { width: 135px; height: 30px; margin: 0 15px 0 15px; padding: 0; float: left; }
#left p { font-family: arial, sans-serif; font-size: 10pt; color: black; background: white; font-weight: bold; text-align: center; width: 100%; margin: 0; padding: 0; }
#navigation {margin: 0; padding: 0; }
#navigation a { display: block; width: 143px; color: white; text-align: center;
background: #666666; text-decoration: none; margin: 5px 0 0 0; padding: 14px 11px; font-weight: bold; font-size: 9pt;}
#navigation a:hover { width: 143px; color: #333333; background: #cccccc; text-decoration: none; font-weight: bold; margin: 5px 0 0 0; padding: 14px 11px; text-align: right;}
#mainwindow { width: 590px; height: 190px; margin: 0; background: white url(mainbg.jpg) no-repeat center; color: #fff7a5; float: left; }
#mainwindow img { width: 120px; height: 138px; margin: 22px 18px 0 0; float: right; padding: 0; border: 3px solid white; }
#indexmain { width: 420px; height: 190px; margin: 0; padding: 0; float: left; color: white; background: transparent; }
#indexmain p { width: 98%; color: white; background: transparent; font-size: 9pt; margin: 14px 0 0 20px;; text-align: justify; }
p { margin: 0; padding: 0; }
img {margin: 0; padding: 0; }
#mainwindow2 { width: 590px; height: 190px; margin: 0; color: #fff7a5; background: white url(mainbg.jpg) no-repeat center; float: left; }
#mainwindow2 img { width: 120px; height: 138px; margin: 22px 18px 0 0; padding: 0; float: right; border: 3px solid white; }
#indexmain2 { width: 420px; height: 190px; margin: 0; float: left; padding: 0; color: white; background-color: transparent; }
#indexmain2 p { color: white; background-color: transparent; font-size: 9pt; width: 98%; margin: 28px 0 0 20px; text-align: justify; }
#mainwindow3 { width: 590px; height: 190px; margin: 0; padding: 0; color: #fff7a5; background: white url(mainbg.jpg) no-repeat center; float: left; }
#mainwindow3 p { width: 88%; color: white; background-color: transparent; margin: 0 auto 0 auto; padding: 8px 0 0 0; text-align: center; font-size: 9pt; }
.highlight { color: white; font-weight: bold; background-color: transparent; }
table { width: 445px; background-color: transparent; color: white; margin: 7px 0 0 65px; padding: 0; }
.formheader {width: 65px; text-align: right; color: white; background-color: transparent; font-weight: bold; margin: 0; padding: 0; font-size: 9pt; }
.formbox { background: #cccccc; color: #333333; border: none; margin: 0; width: 150px; height: 13px; font-size: 8pt; cursor: default; }
.enquiry { background: #cccccc; border: none; color: black; margin: 5px 0 0 0; width: 150px; height: 40px; font-size: 8pt; cursor: default; }
.formbox2 { width: 50px; text-align: center; background: #cccccc; border: 1px solid white; color: #333333; margin: 0 10px 0 0; font-size: 7pt; font-weight: bold; }
option { color: #333333; background: #cccccc; margin: 0; padding: 0; }
select { margin: 0; padding: 0; width: 153px; }
form { margin: 0; padding: 0; }
#bottomcontainer { width: 760px; height: 185px; margin: 5px 0 5px 0; padding: 0; color: #666666; background: white; }
#bottomleft { width: 165px; height: 185px; background: #cccccc url(lowercrane.jpg) no-repeat center; float: left; margin: 0 5px 0 0; }
#midleft { width: 187px; height: 185px; background: white; float: left; margin: 0 5px 0 0; }
#midright { width: 187px; height: 185px; background: white url(bott.jpg) no-repeat center; float: left; margin: 0 5px 0 0; }
#bottomright { width: 206px; height: 185px; background: black; color: white; float: left; margin: 0; padding: 0; }
#bottomright p { font-size: 9pt; color: white; background: black; font-weight: normal; text-align: center; margin: 0 auto 0 auto; padding: 22px 0 0 0; }
#bottomright a, bottomright a:visited { color: #fff7a5; background: black; text-decoration: none; padding: 0; margin: 0; font-weight: bold;}
#bottomright a:hover { color: white; background: black; text-decoration: underline; margin: 0; font-weight: bold; }
.contacthighlight { color: #666666; background: black; font-size: 9pt; font-weight: bold; }
#footer {width: 760px; height: 15px; color: #cccccc; background: white; margin: 0 auto; padding: 0; border-top: 1px solid #cccccc; }
#footer p { color: #666666; background: white; margin: 0; padding: 0; font-size: 7pt; font-weight: bold; }
#footer .copyright { float: left;}
#footer .bigc { color: #666666; background: white; font-size: 8pt; font-weight: bold; }
#footer .website { float: right; }
#footer a, #footer a:visited { color: #666666; font-weight: bold; background: white; text-decoration: none; font-size: 8pt; }
#footer a:hover { color: black; background: white; text-decoration: none; font-weight: bold; font-size: 8pt; }
?????