dfowler Posted August 18, 2010 Share Posted August 18, 2010 Hey guys, I'm not a front end developer at all. However, I am trying to improve me ability with CSS. I am creating a simple nav menu that is showing up perfectly in IE, but not in FF. Here is the code for the page (nav is obvious I feel): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Welcome!</title> <link rel="stylesheet" href="css/style3.css" type="text/css" media="screen" charset="utf-8" /> </head> <body> <div id="main"> <div id="logo"> <img src="images/logo.png" style="float: left;" /> </div> <div class="clearer"></div> <div id="nav"> <div id="nav_links"> <a href="/">Home</a> | <a href="about.php">About</a> | <a href="contact.php">Contact</a> </div> </div> <div id="content"> <div id="title">Welcome!</div> <p> Content will go here... </p> </div> </div> </body> </html> Here is the style sheet: body { background: #AEAEAE url('/images/background.png'); color: #AEAEAE; font-family: Verdana, Tahoma, Helvetica, Arial; } p { margin: 1px 0px 1px 0px; } a { color: #00001f; text-decoration: none; } a:hover { color: #555555; text-decoration: underline; } #main { margin-left: auto; margin-right: auto; width: 600px; background-color: #ffffff; border: 10px solid #00001f; color: #000000; } #logo { margin: 0px 0px 0px 0px; width: 590px; background-color: #ffffff; } #nav { margin: 5px 0px 5px 0px; height: 50px; background: #ffffff url('/images/navbar.png') no-repeat right top; } #nav_links { margin: 15px 0px 0px 100px; } #content { margin-top: 5px; margin-left: auto; margin-right: auto; width: 590px; height: 300px; background-color: #ffffff; color: #000000; font-size: 14px; overflow: auto; } #title { margin: 1px 0px 1px 0px; color: #00001F; font-weight: bolder; font-size: 18px; } #pageTitle { float: left; } div.clearer { clear: both; } What I am really trying to do is get the "nav_links" to be centered vertically within the "nav" div. I tried margin-top and margin-bottom at both auto, what I have above, and nothing in FF works. It always look great in IE, however in FF is acts as if it is adding the margin to the main "nav" div and not the "nav_links" div. Thanks for any help! Quote Link to comment Share on other sites More sharing options...
dfowler Posted August 18, 2010 Author Share Posted August 18, 2010 I managed it correct this by switching the internal margin to padding. Still not sure why it was happening though. Thanks.... Quote Link to comment Share on other sites More sharing options...
papillonstudios Posted August 26, 2010 Share Posted August 26, 2010 please mark topic as solved. if the issue is corrected. thank you 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.