owosso Posted January 17, 2008 Share Posted January 17, 2008 I have an #address div at the bottom of my page, below the content but just above the copyright info. It shows up in all the browsers except I.E. It's no where to be found.Also, there's a strange blue square, or screen showing up to the right of the vertical menu. It only shows up in I.E. Any ideas? I don't think I have blue in any of my coding, do I?http://www.adunate.com/jwrIndex.htmlHere's the 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><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>JWR, Inc., Johnson Creek, WI</title><style type="text/css"><!--#horizontalContainer { background-image: url(jwrImages/backgroundHome.jpg); background-repeat: no-repeat; background-position: center top; width: 760px; height: 630px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; }#verticalContainer { width: 100%; height: 630px; position: absolute; margin-left: -50%; z-index: 1; margin-top: -315px; left: 50%; top: 50%; } --></style><link href="jwrIndex.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--.style1 {font-size: .08}--></style></head><body><div id="verticalContainer"><div id="horizontalContainer"> <div id="navHor"> <p align="center"><a href="jwrindex.html">Home</a><span><a href="contacts.html">Contact</a></span><span><a href="equipment.html">Equipment Sales</a></span><span><a href="news.html">News</a></span><span><a href="employment.html">Employment</a></span></p> </div> <div id="header"> <!--Flash product collage --><div align="right"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="133" title="JWR Inc"> <param name="movie" value="jwrImages/flashjwr.swf" /> <param name="quality" value="high" /> <embed src="jwrImages/flashjwr.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="133"></embed> </object></div></div> <div id="navLeft"> <!--Start vertical navigation --> <ul style="list-style-type: none; padding: 10px; margin: 0;"> <li style="margin-right: 30px"><p align="right"><a href="about.html">About JWR</a></p></li><li style="margin-right: 50px"> <p align="right"><a href="recycling.html">Your Recycling<br /> Solutions</a></p></li><li style="margin-right: 60px"> <p align="right"><a href="waste.html">Waste Solutions</a></p></li><li style="margin-right: 70px"> <p align="right"><a href="product.html">Product Specific Solutions</a></p></li><li style="margin-right: 72px"> <p align="right"><a href="industry.html">Industry Specific Solutions</a></p></li><li style="margin-right: 70px"> <p align="right"><a href="service.html">Service & Installation</a></p></li><li style="margin-right: 65px"> <p align="right"><a href="used.html">Used Equipment</a></p></li><li style="margin-right: 58px"> <p align="right"><a href="parts.html">Parts</a></p></li></ul> </div> <!--Close #navLeft End verticle navigation --> <div id="statementRight"><!--contains #statement --> <h2 align="center">Let us put our experience to work for you to identify a solution that maximizes recycling revenue, minimizes labor and reduces waste costs.</h2> <h1 align="center">Call us today! 888-699-2848</h1> </div> <div id="address"> <p align="center">322 N. Watertown Street, P.O. Box 356, Johnson Creek, WI 53038<span>888-699-2848</span><span>FAX: 920-699-2847</span></p> </div> <!--close #horizontalContainer --> </div> <div align="center"> <h3>Copyright 2008 All rights reserved JWR Inc., Web design by <a href="http://www.adunate.com">adunate.com</a> </h3> </div></div></body></html> Here's the CSS body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; margin: 0px; padding: 0px; background-color: #CCCCCC; font-size: 62.5% /* 16px × 62.5% = 10px */;}p { font-size: 1.2em; color: #000000; line-height: 1.6em; } p span { margin-left: 75px; } a:link, a:visited { font-size: 1.2em; color: #000000; text-decoration: none; } a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: none; } h1 { color:#AC2a2B; font-size: 1.8em; font-weight: bold; } h2 { color:#000000; font-size: 1.6em; font-weight: bold; line-height: 1.2em; } h3 { color:#000000; font-size: 1em; font-weight: normal; text-decoration: none;} #header { width: 760px; z-index: 5; } #navHor { width: 760px; position: absolute; top: 135px; z-index: 5; background-color: #999999; border-bottom-width: 4px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000000; border-bottom-color: #000000; left: 0px; height: auto; border-top-width: 1px; } #navLeft { width: 225px; float: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: 325px; padding-top: 60px;}ul#navLeft { width: 80px; position: absolute; z-index: 3; left: 45px; top: 0px; background-color: #FFFFFF; height: 200px; } ul#navLeft li { text-align: right; text-decoration: none; list-style: none; height: 45px;}ul#navLeft li a { text-decoration: none; display: block; }ul#navLeft li#youarehere nav a { background-color: DDDDc2; text-decoration: none; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #6F6659; } #statementRight { width: 475px; height: 50px; float: right; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; padding-top: 315px; padding-right: 45px; padding-left: 15px;} #address { width: 760px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1em; padding-bottom: 2px; background-color: #999999; position: absolute; top: 572px; margin-top: 5px; left: 0px; border-top-width: 4px; border-top-style: solid; border-top-color: #000000; z-index: 6;} #address span { margin-left: 25px; } Link to comment Share on other sites More sharing options...
emicha Posted January 17, 2008 Share Posted January 17, 2008 Replace position: absolute; in the div#address with the code below: position: absolute;_position: fixed; Link to comment Share on other sites More sharing options...
owosso Posted January 17, 2008 Author Share Posted January 17, 2008 Replace position: absolute; in the div#address with the code below:position: absolute;_position: fixed; Thanks so much. It works great! One exception is that in IE the address bar now sits a too far below the divs above it. If I adjust the height for IE, it sits too high in the other browsers. Any suggestions?I know it's probably in the positioning of all my divs. I'm still unsure of that concept. I've got some as relative, some as absolute...whatever it took to get them in the right place. However, I know it's a bad practice and affects the following divs. Link to comment Share on other sites More sharing options...
Synook Posted January 18, 2008 Share Posted January 18, 2008 One exception is that in IE the address bar now sits a too far below the divs above it. If I adjust the height for IE, it sits too high in the other browsers. Any suggestions?Conditional comments - http://www.quirksmode.org/css/condcom.htmlI've got some as relative, some as absolute...whatever it took to get them in the right place.Try to get rid of the absolute ones. Link to comment Share on other sites More sharing options...
owosso Posted January 28, 2008 Author Share Posted January 28, 2008 Try to get rid of the absolute ones.Thanks for your help and sorry I'm a bit slow in responding. My goal is to get rid of the absolute positioning, but can't seem to keep those divs in place without it. Any suggestions? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.