SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float problem in Safari

    i've been able to get this working in IE/Firefox and just tested it at icapture to discover that it's not working (see attached). i've tried a variety of the suggestions on forum posts and they don't seem to be working.

    i don't want to bog down icapture with too many re-checks.can anyone see where i'm going wrong?

    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Clarington Toyota</title>
    <style type="text/css" media="all">@import "styles.css";</style> <link rel="stylesheet" type="text/css" media="print" href="print.css" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    	var sfEls = document.getElementById("navlist").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    </head>
    <body>
    
    <!-- Begin CONTAINER -->
    
    <div id="container">
    	
    	<!-- Begin BANNER -->
    	
    	<div id="banner">
    	
    		<table width="780" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td rowspan="3"><img src="images/logo.gif" alt="Clarington Toyota" /></td>
    
    		
    					
    		<td id="car">
    		
    				
    				<img src="http://production.threewisemen.ca/cms/content/12K-1P/binary/article/attachment/12L-V/304x168" alt="CLARINGTON TOYOTA" />
    						
    					
    		</td>
    	</tr>
    	<tr>
    		<td id="carname">
    		
    			CLARINGTON TOYOTA		
    		</td>
    	</tr>
    
    	<tr>
    		<td id="subnav"></td>
    	</tr>
    </table>
    	
    	</div>
    	
    	<!-- End BANNER -->
    	
    	<div id="content">
    		
    	<!-- Begin NAV -->
    	
    		<div id="navcontainer">
    
    	<img src="images/nav_top.gif" alt="" />
    	<div id="navlist">
    		<ul>
    			<li><a href="recommended.php">Parts &amp; Service</a>
    				<ul>
    					<li><a href="recommended.php">Available Services</a></li>
    					<li><a href="deals.php">Special Deals</a></li>
    
    					<li><a href="book.php">Book Service</a></li>
    				</ul>
    			</li>
    			<li><a href="newsales.php">New Car Sales</a></li>
    			<li><a href="preowned.php">Pre-Owned Car Sales</a></li>
    			<li><a href="newoffers.php">Current Offers</a>
    				<ul>
    
    					<li><a href="newoffers.php">New Car Offers</a></li>
    					<li><a href="serviceoffers.php">Service Offers</a></li>
    				</ul>
    			</li>
    			<li><a href="events.php">Community Events</a></li>
    			<li><a href="map.php">Map to Our Location</a></li>
    			<li><a href="hours.php">Hours of Operation</a></li>
    
    			<li><a href="contact.php">Contact Us</a></li>
    			<li><a href="index.php">Home</a></li>
    		</ul>
    	</div>
    	<div id="address">
    		10 Spicer Sq.<br />
    		Bowmanville, ON L1C 5M2<br />
    
    		t: (905) 697-9555<br />
    		f: (905) 697-2411<br /><br />
    		<span class="tollfree">tollfree: 1-866-697-9555</span><br /><br />
    		<a href="http://www.toyota.ca" target="_blank">www.toyota.ca</a>
    	</div>
    </div>
    		
    	
    	<!-- End NAV -->
    
    	<!-- Begin CONTENT -->
    		<div id="main">		<div class="clearer"></div>
    			<div id="pageheader">Clarington Toyota</div>
    			<div id="copy">
    							
    				<table width="100%" cellpadding="0" cellspacing="0" border="0">
    					<tr>
    						<td>
    
    							<p>Our site is a convenient place to get all the information you're looking for about us, and our extensive selection of vehicles. Please click your way through the site for everything you'll need to find a vehicle, financing, schedule a service appointment, order parts, or just contact us.<br /><br />Clarington Toyota is conveniently located at Waverley Road &amp; 401 (on the North West corner) in Bowmanville.<br /><br />We offer:</p><ul><li>A full Drive In Service Reception</li><li>Factory Trained Technicians</li><li>State of the art 4 wheel laser alignment machine</li><li>Electronic wheel balance</li><li>Full stocked Parts Department</li><li>Comfortable customer waiting area, complete with Plasma TV and Fireplace</li><li>Large inventory of new Toyota vehicles</li><li>Good stock of quality used vehilces</li><li>No pressure sales approach</li><li>Toyota Touch vehicle detailing</li></ul>						</td>
    
    						<td align="center">
    				
    								
    								<img src="http://production.threewisemen.ca/cms/content/12K-1P/binary/article/attachment/12K-3W/225x225" alt="Home" border="0" />
    							
    														
    						</td>
    					</tr>
    				</table>
    			</div>
    		</div>
    	
    	<!-- End CONTENT -->	
    
    		<div class="clearer"></div>
    
    	</div>
    <!-- Begin FOOTER -->
    
    	<div id="copyright">
    	Copyright  2005 Clarington Toyota    <a href="privacy.php">Privacy Policy</a>
    	<br />
    	<span id="cms">Site design by <a href="http://www.cmswebsolutions.com" target="_blank">CMS Web Solutions</a></span>
    </div>
    
    <!-- End FOOTER -->	
    </div>
    
    <!-- End CONTAINER -->
    
    </body>
    </html>
    CSS

    Code:
    body {
       background: #fff; 
       margin: 0px;
       padding: 0;
       font: 11px Verdana, Helvetica, Arial, Univers, sans-serif;
    	color: #37312c;
       text-align: center;
    }
    
    #container {
       margin: 0px auto;
       width: 780px;
    	background: #666;
    }
    
    html>#container {
    	width: 780px;
    }
    
    img {
    	margin: 0;
    	padding: 0;
    }
    
    h1 {
    	font: 14px Verdana, Helvetica, Arial, Univers, sans-serif;
    	font-weight: bold;
    	color: #000;	
    }
    
    h2 {
    	font: 13px Verdana, Helvetica, Arial, Univers, sans-serif;
    	font-weight: bold;
    	color: #000;
    }
    
    h3 {
    	font: 12px Verdana, Helvetica, Arial, Univers, sans-serif;
    	font-weight: bold;
    	color: #000;
    }
    
    h4 {
    	font: 11px Verdana, Helvetica, Arial, Univers, sans-serif;
    	font-weight: bold;
    	color: #000;
    }
    
    #banner table {
    	vertical-align: top;
    }
    
    #banner table td {
    	vertical-align: top;
    }
    
    #car img {
    	width: 304px;
    	w\idth: 304px;
    	height: 168px;
    	margin: 0;
    	padding: 0;
    	vertical-align: top;
    }
    
    #carname {
    	width: 304px;
    	w\idth: 304px;
    	height: 16px;
    	margin: 0;
    	padding: 0;
    	color: #fff;
    	font-size: 12px;
    	text-transform: uppercase;
    	text-align: center;
    	background: url('images/blue_bar.gif') no-repeat;
    }
    
    #subnav {
    	width: 304px;
    	w\idth: 274px;
    	height: 20px;
    	margin: 0;
    	padding: 0 30px 0 0;
    	color: #fff;
    	font-size: 12px;
    	letter-spacing: -.07em;	
    	text-align: right;
    	background: url('images/subnav_bg.gif') no-repeat;
    }
    
    #subnav a, #subnav a:visited {
    	color: #fff;
    	text-decoration: none;
    }
    
    #subnav a:hover {
    	color: #0d2b88;
    	text-decoration: underline;
    }
    
    #content {
    	margin: 0;
    	padding: 0 0 20px 0;
    	text-align: left;
    	background: url('images/body_bg.gif') repeat-y;
    	float: left;
    	border-bottom: 1px solid #666;	
    }
    
    #navcontainer {
    	width: 201px;
    	w\idth: 201px;
    	margin: 0;
    	padding: 0;
    	background: url('images/nav_bg.gif') repeat-y;
    	float: left;
    }
    
    #navcontainer ul {
    	border: 0;
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	text-align: left;
    }
    
    #navcontainer ul li
    {
    	display: block;
    	float: left;
    	text-align: center;
    	padding: 0;
    	margin: 0;
    }
    
    #navcontainer ul li a {
    	width: 160px;
    	padding: 0;
    	margin: 0 0 0 30px;
    	color: #fc1921;
    	text-decoration: none;
    	display: block;
    	text-align: left;
    	font: 12px Verdana, Helvetica, Arial, Univers, sans-serif;
    	letter-spacing: -.07em;	
    	line-height: 20px;
    	border-bottom: 1px solid #0d2b88;
    }
    
    #navcontainer ul li a:hover {
    	color: #0d2b88;
    }
    
    
    #navlist, #navlist ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	float : left;
    	width : 160px;
    	w\idth: 160px;
    }
    
    #navlist li ul { /* second-level lists */
    	position : absolute;
    	left: -999em;
    	margin-left : 130px;
    	margin-top : -21px;
    }
    	
    #navlist li ul ul { /* third-and-above-level lists */
    	left: -999em;
    }
    	
    #navlist li a {
    	width: 160px;
    	w\idth : 160px;
    	display : block;
    	padding : 0;
    	background: #e5e5e5;
    }
    	
    #navlist li a:hover {
    	color : #0d2b88;
    	background-color: #e5e5e5;
    }
    
    #navlist li:hover ul ul, #navlist li:hover ul ul ul, #navlist li.sfhover ul ul, #navlist li.sfhover ul ul ul {
    	left: -999em;
    }
    
    #navlist li:hover ul, #navlist li li:hover ul, #navlist li li li:hover ul, #navlist li.sfhover ul, #navlist li li.sfhover ul, #navlist li li li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    }
    
    #address {
    	width: 201px;
    	w\idth: 171px;
    	margin: 0;
    	padding: 20px 0 0 30px;
    	background: url('images/nav_bg.gif') repeat-y;
    	text-align: left;
    	float: left;	
    }
    
    #address a, #address a:visited {
    	color: #666;
    	text-decoration: none;
    }
    
    #address a:hover {
    	color: #0d2b88;
    	text-decoration: underline;
    }
    
    .tollfree {
    	font-size: 13px;
    	color: #fc1921;
    	margin: 0;
    	padding: 10px 0 10px 0;
    }
    
    #main {
    	width: 579px;
    	w\idth: 549px;
    	margin: 0px auto;
    	padding: 0;
    	float: right;
    }
    
    #pageheader {
    	width: 579px;
    	w\idth: 549px;
    	height: 55px;
    	margin: 0;
    	padding: 20px 0 0 30px;
    	color: #fc1921;
    	font: 20px Verdana, Helvetica, Arial, Univers, sans-serif;
    	letter-spacing: -.08em;
    	text-align: left;
    	background: url('images/head_bg.gif') no-repeat;
    	float: right;
    }
    
    .blackheader {
    	color: #000;
    	font-style: italic;
    }
    
    #subhead {
    	width: 579px;
    	w\idth: 549px;
    	height: 22px;
    	margin: -15px 0 0 0;
    	padding: 0 0 5px 30px;
    	text-align: left;
    	vertical-align: top;
    	background: url('images/subhead_bg.gif') no-repeat;
    	float: right;	
    }
    
    * html #subhead {
    	margin: 0;
    	ma\rgin: -15px 0 0 0;	
    	padding: 5px 0 5px 30px;
    	padd\ing: 0 0 5px 30px;
    }
    
    #subhead img {
    	padding-top: 5px;
    }
    
    #subhead a, #subhead a:visited {
    	color: #000;
    	font: 13px Verdana, Helvetica, Arial, Univers, sans-serif;
    	letter-spacing: -.07em;	
    	text-decoration: none;
    	line-height: 22px;
    	vertical-align: top;
    }
    
    #subhead a:hover {
    	color: #0d2b88;
    	text-decoration: none;
    }
    
    #copy {
    	width: 579px;
    	w\idth: 499px;	
    	margin: 0;
    	padding: 0 50px 20px 30px;
    	float: right;	
    }
    
    * html #copy {
    	width: 579px;
    	w\idth: 499px;		
    	padding: 20px 50px 20px 30px;
    	padd\ing: 0 50px 20px 30px;	
    }
    
    #copy a, #copy a:visited {
    	color: #000;
    }
    
    #copy a:hover {
    	color: #000000;
    	text-decoration: underline;
    }
    
    #copy td {
       margin: 0;
    	padding: 0 20px 0 0;
    	font: 11px Verdana, Helvetica, Arial, Univers, sans-serif;
    	vertical-align: top;
    }
    
    .clearer {
    	height:1px;
    	overflow:hidden;
    	margin-top:-1px;
    	clear:both;
    }
    
    #bookform {
    	width: 100%;
    	w\idth: 100%;
    }
    
    div.bookrow {
      clear: both;
      padding-top: 5px;
    }
    
    div.bookrow span.booklabel {
      float: left;
      width: 150px;
      w\idth: 150px;
      text-align: right;
    }
    
    div.bookrow span.bookformw {
      float: right;
      width: 300px;
      w\idth: 300px;  
      text-align: left;
    } 
    
    #form {
    	width: 85%;
    	w\idth: 85%;
    	background: #e5e5e5;
    }
    
    .front, .front a, .front a:visited {
    	height: 20px;
    	padding: 5px 5px 0 5px;
    	color: #fc1921;
    	font-size: 14px;
    	background: #e5e5e5;
    	text-decoration: none;
    }
    
    .back, .back a, .back a:visited {
    	height: 20px;
    	padding: 5px 5px 0 5px;
    	color: #e5e5e5;
    	font-size: 14px;
    	background: #999;
    	text-decoration: none;	
    }
    
    .front a:hover, .back a:hover {
    	color: #fc1921;
    }
    
    div.row {
      clear: both;
      padding-top: 5px;
      padding-left: 10px;
      background: #e5e5e5;
    }
    
    div.row span.label {
      float: left;
      width: 150px;
      w\idth: 150px;
      text-align: right;
    }
    
    div.row span.formw {
      float: right;
      width: 200px;
      w\idth: 200px;  
      text-align: left;
    } 
    
    .submit {
    	margin: 5px 0 0 0;
    	color: #000;
    	font-size: 10px;
    	background: #fff;
    	width: 100px;
    	text-align: center;
    }
    
    #copyright {
    	text-align: center;
    	color: #000;
    	font-size: 10px;
    	margin: 0;
    	padding: 15px 0 0 0;
    	text-decoration: none;
    	background: #fff;
    }
    
    #copyright a, #copyright a:visited {
    	color: #000;
    }
    
    #copyright a:hover {
    	color: #0d2b88;
    }
    
    #cms {
    	color: #aaa;
    	font-size: 10px;
    	padding: 5px 0 0 0;
    	text-decoration: none;
    }
    
    #cms a:link, #cms a:visited {
    	color: #aaa;
    	font-size: 10px;
    	text-decoration: none;
    }
    
    #cms a:hover {
    	color: #37312c;
    	text-decoration: underline;
    	font-size: 10px;	
    }
    Attached Images Attached Images

  2. #2
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Hmmm...

    Where exactly are you trying to put the pageheader? If it is above the contact information it is because you have it in the wrong order. All I can think of by just looking at it is you need a table in the div or you need an invisable (usually white) border in the css for both the menu and the pageheader.
    HTMLGuy

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi htmlguy,

    the pageheader should be on the right under the main banner. i'm attaching a snap of what it should look like.
    Attached Images Attached Images

  4. #4
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Border...Div or Table

    The only thing I can think of is have a border in the div (border: 1px white;). You could also put a table inside of the div which is why I think all of your other stuff is working. Also you could float the container centered and the banner, menu, and contents floated left so they come closer without overlapping.
    Hope this helps,
    HTMLGuy

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, htmlguy - no luck. doesn't seem to budge. i'll keep plodding and post any success when it happens.

  6. #6
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face If that doesn't work

    I'm sorry. I just can't find anything wrong with your page...the only thing I can think of is how you put it in order. You may need to keep the pageheader out of the content div and put the address under the pageheader. Just keep on trying (maybe even float the pageheader left) everything and never give up!
    HTMLGuy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •