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! Link to comment https://forums.phpfreaks.com/topic/211082-ffie-difference/ 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.... Link to comment https://forums.phpfreaks.com/topic/211082-ffie-difference/#findComment-1100895 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 Link to comment https://forums.phpfreaks.com/topic/211082-ffie-difference/#findComment-1104109 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.