For some reason my block items are stacking on top of each other in IE, but look fine in Firefox. Could someone tell me what I'm doing wrong? Here's the URL http://webpuffs.com/static-tests/ Here's the code: #mainnav{ float:right; height:50px; } #mainnav ul{ margin-top:0; } #mainnav ul li{ list-style:none; display:inline-block; } #mainnav ul li a{ display:inline-block; text-decoration:none; background-color: #919380; font-weight:bold; color:white; } #mainnav ul li a:visited{ color:white; } #mainnav ul li a:hover{ background-color:#c27b49; color:white; } a.mainnav{ display:inline-block; width:97px; height:50px; line-height:70px; } Code (markup): Thanks!
Hello. Block items do stack on top of each other, it is inline elements that sit next to each other. Try setting #mainnav li to float:left; width:auto; Your code is a bit messy at the moment. Have a look at the following tutorial, it should help you out http://www.tutorialtastic.co.uk/tutorial/horizontal_css_block_navigation
Uhm, do you have your question backwards? It looks really nice in IE8 but looks like ass in FF/Opera/Chrome... Looking at your code 1) Ease up on the use of DIV. #header, #logo and #mainNav aren't doing ANYTHING you need done and are completely unneccessary. 2) Inherit values, don't slap classes at everything. .mainnav is completely redundant since you have an ID around it. "#mainNav a" would be the same thing. 3) you have headings on the page, mark them up as headings not bold tags with double breaks. 4) 'right' and 'left' are presentational names - at that poing you might as well use the align attribute and skip CSS altogether. 5) fixed metric (aka PX) fonts on the content are an accessiblity /FAIL/. 6) This is a new website, right? That means it should be using a STRICT doctype. Tranny is for supporting outdated/outmoded crap, NOT for building new pages. 7) Hey, this is for a church? Hang on I'll do a free rewrite of the main page. (I like to help churches for free - funny for an agnostic, no?)... Even if it does look like a doomsday cult First step is cleaning up the 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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <title>New stone gate</title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! Horizontal rules and .jumpto menus should be removed by CSS and are present for CSS off users only. --> <div id="pageWrapper"> <h1> <span>StoneGate</span><br /> Sabbatical<br /> Ministries <b></b> </h1> <ul id="mainMenu"> <li><a href="index.html">about us</a></li> <li><a href="index.html">ministry</a></li> <li><a href="index.html">donations</a></li> <li><a href="index.html">news</a></li> </ul> <div class="fauxColumns"> <div id="content"> <h2>Stonegate Sabbatical Ministries: Prayer, Renewal, Revival</h2> <p> We believe that we are living in the last days, and that our churches need a corporately persistent, strong, and vibrant prayer foundation. Isaiah 56: 7 states: "For my House will be called a House of Prayer for all nations." Stonegate exists to counsel, educate, encourage, and empower those newly begun as well as established prayer ministries. The ministry is here to strengthen the body of Christ, and to prepare God's Bride for His return. We are establishing places of sabbatical ministry North, East, South and West for leadership to "be still and know that He is God." The Lord is also calling us to provide dynamic, life changing prayer seminars that help churches rediscover the supernatural power of corporate prayer and biblical unity. </p> <p class="standout"> <b>on this rock I will build my church</b> </p> <!-- #content --></div> <ul id="services"> <li>Corporate Prayer</li> <li>Prayer Seminars</li> <li>Revival and Renewal</li> <li>Encouragement</li> <li>Counseling</li> <li>Sabbatical Retreats</li> <li>Upcoming Sabbaticals</li> </ul> <!-- .fauxColumns --></div> <div class="stone"> <div></div> <span></span> <img src="images/stonegate_rock.jpg" alt="stone gate rock" /> </div> <img src="images/FB.gif" alt="join us on facebook" class="facebook" /> <ul id="footer"> <li class="first"> © 2010 Stonegate Sabbatical Ministries </li><li> <a href="/about/contact_us.php">contact</a> </li><li> <a href="/disclaimer.php">disclaimer</a> </li><li> <a href="/privacy.php">privacy</a> </li> </ul> <!-- #pageWrapper --></div> </body></html> Code (markup): Gimme a few minutes and I'll slap together the CSS for that.
... and here it is rewritten: (the HTML was changed from above) http://www.cutcodedown.com/for_others/blondeJon/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/blondeJon/ is unlocked so you can get at the gooey bits. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the use of a single zoom:1 (zoomfix, not haslayout - an oddity but hey)... Tested working perfect in IE 6, 7 & 8, Opera 10.10 and 10.5 beta, FF2 and 3.6, and the latest iterations of safari and chrome. It also renders well in IE 5.5, though the margin between the 'stone' images is off by a hair (big deal). Hope this helps.
Pmek, Thanks! deathshadow, Thanks a lot. I've actually been helping these guys out for free. Their webmaster jetted on them. If you think my code is bad, you should see their current site. http://bit.ly/9lTe22 I feel that my knowledge of XHTML/CSS is enough to be dangerous. Do you have any recommended tutorials that I can check out? P.S. I like your comment about looking like a doomsday cult. I'm into snake handling myself. JK