I am just getting into designing websites and I have a problem with understanding how something works in FF but not IE. I am looking to see if anyone here has a working answer for me to get it to work in IE also. I am trying to create a left side menu for a template and have a little divider between the buttons. The buttons have a blue background color and the divider is an image 2px high by 1px wide which repeats on x. The website preview is at http://www.breakpointdesigns.com/nathan It works in Firefox, but not IE. Here is the code I am using. <html> <head> <style type="text/css"> body { text-align: center; background-image : url("images/background.jpg"); background-repeat : repeat; font-size:12px; } #center { width:671px; margin:0px auto; text-align:left; } #width { width:671px; } #header { width:671px; height:96px; background-color:#ffffff; } #top_gradient { width:611px; float:left; height:18px; background-image:url("images/topgradient.gif"); background-repeat:repeat-x; } #divider { width:2px; float:left; height:18px; background-image:url("images/divider.gif"); background-repeat:repeat-x; } #login_button { width:58px; float:right; height:18px; background-image:url("images/topgradient.gif"); background-repeat:repeat-x; line-height:18px; text-align: center; } #banner { width:671px; float:left; height:56px; background-image:url("images/banner.gif"); background-repeat:repeat-x; margin-top:2px; margin-bottom:2px; } a.white:link {color: #ffffff; text-decoration: none; } a.white:visited {color: #ffffff; text-decoration: none; } a.white:hover {color: #ffffff; text-decoration: underline; } a.white:active {color: #ffffff; } #bottom_gradient { width:190px; float:left; height:18px; background-image:url("images/bottomgradient.gif"); background-repeat:repeat-x; } .divider2 { width:2px; float:left; height:18px; background-image:url("images/divider2.gif"); background-repeat:repeat-x; } .bottom_gradient2 { width:70px; float:left; height:18px; background-image:url("images/bottomgradient.gif"); background-repeat:repeat-x; line-height:18px; text-align: center; } #bottom_gradient3 { width:191px; float:left; height:18px; background-image:url("images/bottomgradient.gif"); background-repeat:repeat-x; } #main { width:671px; float:left; height:100%; background-color:#ffffff; } #leftmenu { width:130px; float:left; height:100%; margin-top:10px; margin-bottom:10px; } #navigation { width:130px; float:left; height:18px; background-image:url("images/topgradient.gif"); background-repeat:repeat-x; margin-bottom:1px; } .button { width:130px; float:left; height:18px; background-color:#03237D; } .menudivider { width:130px; float:left; height:2px; background-image:url("images/menudivider.gif"); background-repeat:repeat-x; } </style> </head> <body> <div id="center"> <!-- Centers FireFox --!> <div id="width"> <div id="header"> <div id="top_gradient"> </div> <div id="divider"> </div> <div id="login_button"><a class="white" href="#">Login</a> </div> <div id="banner"> </div> <div id="bottom_gradient"> </div> <div class="divider2"> </div> <div class="bottom_gradient2"><a class="white" href="#">Home</a> </div> <div class="divider2"> </div> <div class="bottom_gradient2"><a class="white" href="#">About</a> </div> <div class="divider2"> </div> <div class="bottom_gradient2"><a class="white" href="#">Portfolio</a> </div> <div class="divider2"> </div> <div class="bottom_gradient2"><a class="white" href="#">Contact</a> </div> <div class="divider2"> </div> <div id="bottom_gradient3"> </div> </div> <div id="main"> <div id="leftmenu"> <div id="navigation"> </div> <div class="button"> </div> <div class="menudivider"> </div> <div class="button"> </div> <div class="menudivider"> </div> <div class="button"> </div> <div class="menudivider"> </div> </div> </div> </div> </div> </body> </html> Code (markup):
You are using way too many <div>'s. Here is what you can be using for the code: Also, here is the HTML you should be using as it's more efficient and SEO available (using header tags and lists). I won't code the CSS for you as I believe you can do it if you have the right knowledge. HTMLdog.com and w3schools.com will help you out a lot. <html> <head> <title>YourSite</title> </head> <body> <div id="wrapper"> <div id="header"> <p class="top"><a href="#">Login</a></p> <h1><a href="#"><span>Breakpoint Designs</span></a></h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="content"> <div id="right"> <h2>Header</h2> <ul> <li>Item</li> <li>Item</li> </ul> </div> </div> </div> </body> </html> Code (markup):
thank you for your suggestions, but I am really trying to just get the site to look like http://www.breakpointdesigns.com/nathan/preview.jpg and want to include everything exactly how it looks in that image even if there is better ways to do it like not including a divider. This is because the harder route is better to learn than the easy route.
Actually, to be honest, I see my way as an easier way as you use less markup and your pages will load faster. In regards to your problem, I don't see any difference between the two (IE and FF) which your problem describes. I recommend, at the top of every CSS document, is to use "* { margin: 0; padding: 0; } then styling your page from there. That will solve the majority of IE and FF differences.
alright thank you for letting me know, i will go look at my webpage on another computer and report back what I see
I uploaded a work around that solved it but I was still curious about the problem, I will upload the old version again so you can look at it
ok I placed the original code that I have the problem with, I would ideally like to use this as the code but need an IE fix, if anyone could help fix it for IE www.breakpointdesigns.com/nathan
Try adding these statements to div.button and div.menu_divider: margin: 0; padding: 0; Code (markup): When you add text to it, make sure you change the padding according to how it should look with text.
Start by using a proper DOCTYPE to bring the page into standards-mode. Hold on, let me see what I can do for you...