mazman13 Posted October 18, 2008 Share Posted October 18, 2008 I've got a few problems with the site design... www.michaelzavala.com/new/home.php 1) The black nav bar is at the very top of the page on Dreamweaver--- I'm afraid it will do the same on some older browsers. 2) On Firefox, the nav buttons are more to the right than they are on IE. Why? 3) Can someone check the Nav links and make sure everything looks ok?? Thanks again! body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; font-size: 14px; color: #000000; } /* Start Header styles */ #container { width: 760px; margin: 0 auto; } #header_logo { position: absolute; z-index: 10; width: 275px; height: 320px; } #greay_header { display: block; width: 650px; height: 75px; float: right; background-color: #dcdcdc; margin-top: 50px; clear: right; } #black_navbar { display: block; width: 650px; height: 25px; float: right; background-color: #000000; clear: right; } /* Start Nav links */ ul#navlinks { margin-top: 4px; margin-left: 150px; margin-right: 0px; } ul#navlinks li { display: inline; letter-spacing: 2; } a.nav_link:link { color:#FFFFFF; border: solid #FFFFFF 1px; padding-left: 10px; padding-right: 10px; text-decoration: none; font-size: 12px; } a:hover { border: solid #FFFFFF 1px; padding-left: 10px; padding-right: 10px; text-decoration: none; background: #FFFFFF; color: #000000 !important; font-size: 12px; } a:visited { color:#FFFFFF; border: solid #FFFFFF 1px; padding-left: 10px; padding-right: 10px; text-decoration: none; font-size: 12px; } <!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" /> <link rel="stylesheet" type="text/css" href="styles/main.css" /> <title>Untitled Document</title> </head> <body> <div id="container"> <img src="images/header_logo.png" alt="Michael Zavala Logo" id="header_logo"/> <div id="greay_header"></div> <div id="black_navbar"> <ul id="navlinks"> <li><a href="home.php" class="nav_link">Home</a></li> <li><a href="home.php?page=bio" class="nav_link">Bio</a></li> <li><a href="home.php?page=media" class="nav_link">Media</a></li> <li><a href="home.php?page=media" class="nav_link">Features</a></li> <li><a href="home.php?page=media" class="nav_link">Store</a></li> <li><a href="home.php?page=media" class="nav_link">Contact</a></li> </ul> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
mazman13 Posted October 19, 2008 Author Share Posted October 19, 2008 I figured out the nav bar problem. I've also changed the design-- you can see it here: www.michaelzavala.com/new/home.php Still having problems with the nav BUTTONs in FIREFOX tho. Not sure why the arn't aligned right. Also the footer at the bottom is not at the bottom like it is in IE. Can someone let me know what I'm doing wrong is CSS? Thanks! Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 20, 2008 Share Posted October 20, 2008 Your code is not validating and your html is not properly coded. It starts out right using proper semantic markup - div containing block level tags. Then devolves into using divs and spans as text containers. In at least one case you surround a div with a span tag! DIVS do not replace headers, paragraphs and lists for containing text. You have blocks of text that should be in paragraphs but you style them using two br tags only. A break tag is meant to create a line break within a logical block level tag, it is not meant to be a "carriage" return. SPAN is meant to be used within a pre-existing block level tag - generally to temporarily reset a style for a short span of text in the middle of an existing pre-styled block. Invalid code may not render well in modern browsers, but may render just fine in IE (IE almost always prefers bad code actually). This is why most of us make sure our code works first in Firefox or Safari or Opera or any other modern browser before writing the separate CSS fix file for IE. It is far easier to hack a few CSS fixes for IE than the other way around. But, for sure, when html is invalid AND improperly coded, it will not be cross-browser compatible at all. I strongly recommend that you first validate your code and then use proper semantic markup to style and position elements as you want. Just validating the code doesn't mean it will fix your improperly coded html. Quote Link to comment Share on other sites More sharing options...
mazman13 Posted October 24, 2008 Author Share Posted October 24, 2008 Thanks! I'll go into everything and recode it this weekend. Thanks again Quote Link to comment Share on other sites More sharing options...
BoltZ Posted October 25, 2008 Share Posted October 25, 2008 Try validating your page. That sometimes fixes the errors Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.