Hi all. I've just started learning how to use CSS and am trying to piece together a site for a friend of my sister's. I have tested it in four browsers. It looks fine in Firefox and Netscape but in IE and Opera the container that holds the content is out of alignment. I think this has something to do with the top margin, but I'm not sure how to fix it so that IE will look ok and the other browsers will ignore it. When viewed in IE and Opera, the navigation bar is about 1/2 an inch higher than the container. The other thing I have a question about is, when I view the site in IE and make the browser window smaller, the content container seems to realign below the navigation bar. This doesn't happen in any other browser. Also, would someone please take a look at my code and tell me if everything else looks ok? I've attached screen shots so you can take a look. Thank you in advance for your time. I really appreciate it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>The Polacek Center for Plastic Surgery</title> <style type="text/css"> /* CSS for page */ body { background-color: #99b7d3; font: .8em/1.3em verdana,arial, helvetica, sans-serif; } li img { vertical-align: bottom; } #navcontainer { background-color: #99B7D3; display:block; heigt: 513px; } #flashcontent { width: 750px; height: 513px; margin: 60px; margin-left: 180px; margin-top: 50px; background-image:url(graphics/collage.jpg); } .style3 {font-size: 0.8cm} /* CSS for navigation system */ #nav, #nav ul { /* all lists */ padding: 0; margin-left: 50px; margin-top: 0px; list-style: none; float : left; width : 130px; } #nav li { /* all list items */ position : relative; float : left; line-height : 58px; margin-bottom : -1px; width: 95px } #nav li ul { /* second-level lists */ position : absolute; left: -999em; margin-left : 130px; margin-top : -55px; } #nav li a { width: 120px; w\idth : 120px; display : block; color : white; font-weight : bold; font-size: .8em; text-decoration : none; background-color : #7697b9; border : none; padding : 0 0.5em; } #nav li a:hover { color : white; background-color : #98b5ce; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").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> <div id="navcontainer"> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">meet dr. polacek</a></li> <li><a href="#">face</a> <ul> <li><a href="#">face lift</a></li> <li><a href="#">eye lift</a></li> <li><a href="#">brow lift</a></li> <li><a href="#">neck lift</a></li> <li><a href="#">laser resurfacing</a></li> <li><a href="#">otoplasty</a></li> </ul> </li> <li><a href="#">body contouring</a> <ul> <li><a href="#">abdominoplasty</a></li> <li><a href="#">thigh lift</a></li> <li><a href="#">arm lift</a></li> <li><a href="#">liposuction</a></li> </ul> </li> <li><a href="#">breasts</a> <ul> <li><a href="#">breast implants</a></li> <li><a href="#">breast reductions</a></li> <li><a href="#">breast lift</a></li> <li><a href="#">gynecomastia</a></li> </ul> </li> <li><a href="#">non-surgical</a> <ul> <li><a href="#">botox</a></li> <li><a href="#">thermage</a></li> <li><a href="#">restylane/perlane</a></li> <li><a href="#">juvaderm</a></li> <li><a href="#">collagen</a></li> <li><a href="#">phototherapy</a></li> </ul> </li> <li><a href="#">skin care</a> <ul> <li><a href="#">micropeels</a></li> <li><a href="#">microdermabrasion</a></li> <li><a href="#">skin care products</a></li> </ul> </li> <li><a href="#">before and afters</a></li> <li><a href="#">contact us</a></li> </ul> </div> <div id="flashcontent"> </div> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("polacek.swf", "polacek", "750", "513", "6", "#FFFFFF"); so.write("flashcontent"); // ]]> </script> </body> </html> Code (markup):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>The Polacek Center for Plastic Surgery</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #99b7d3; font: .8em/1.3em verdana, arial, helvetica, sans-serif; } li img { vertical-align: bottom; } #wrap { width: 950px; } #navcontainer { float: left; background-color: #99B7D3; height: 513px; padding-left: 50px; } #flashcontent { float: left; width: 750px; height: 513px; line-height: 250px; text-align: center; margin: 10px; background: #99b7d3 url(graphics/collage.jpg) center; } .style3 { font-size: 0.8cm; } #nav, #nav ul { /* all lists */ padding: 50px 0 0; list-style: none; float: left; width: 130px; } #nav li { /* all list items */ position: relative; float: left; line-height: 58px; margin-bottom: -1px; width: 95px; } #nav li ul { /* second-level lists */ position : absolute; display: none; margin: -55px 0 0 130px; } #nav li a { width: 120px; w\idth: 120px; display: block; color: #FFF; font-weight: bold; font-size: .8em; text-decoration: none; background-color: #7697b9; border: none; padding: 0 0.5em; } #nav li a:hover { color: white; background-color: #98b5ce; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { display: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ display: block; } </style> <script type="text/javascript"> <!-- sfHover = function() { var sfEls = document.getElementById("nav").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> <div id="wrap"> <div id="navcontainer"> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">meet dr. polacek</a></li> <li><a href="#">face</a> <ul> <li><a href="#">face lift</a></li> <li><a href="#">eye lift</a></li> <li><a href="#">brow lift</a></li> <li><a href="#">neck lift</a></li> <li><a href="#">laser resurfacing</a></li> <li><a href="#">otoplasty</a></li> </ul> </li> <li><a href="#">body contouring</a> <ul> <li><a href="#">abdominoplasty</a></li> <li><a href="#">thigh lift</a></li> <li><a href="#">arm lift</a></li> <li><a href="#">liposuction</a></li> </ul> </li> <li><a href="#">breasts</a> <ul> <li><a href="#">breast implants</a></li> <li><a href="#">breast reductions</a></li> <li><a href="#">breast lift</a></li> <li><a href="#">gynecomastia</a></li> </ul> </li> <li><a href="#">non-surgical</a> <ul> <li><a href="#">botox</a></li> <li><a href="#">thermage</a></li> <li><a href="#">restylane/perlane</a></li> <li><a href="#">juvaderm</a></li> <li><a href="#">collagen</a></li> <li><a href="#">phototherapy</a></li> </ul> </li> <li><a href="#">skin care</a> <ul> <li><a href="#">micropeels</a></li> <li><a href="#">microdermabrasion</a></li> <li><a href="#">skin care products</a></li> </ul> </li> <li><a href="#">before and afters</a></li> <li><a href="#">contact us</a></li> </ul> </div> <div id="flashcontent"> Hello, you either have JavaScript turned off or an old version of Macromedia's Flash Player. </div> </div> <script type="text/javascript"><!-- var so = new SWFObject("polacek.swf", "polacek", "750", "513", "6", "#FFFFFF"); so.write("flashcontent"); --></script> </body> </html> Code (markup):
Thank you so much! I have made the changes and it looks great! I see now that it was the padding that I needed to change, not the margins. Is that right? And I'm not sure, but was it the "wrap" that made ie not bump my container down? You've really helped a lot. I'll have to study the code more closely to truly understand the changes. Thanks again!