My links at the top of the page work in IE but not in Safari. I can't seem to figure it out. Here's the site: www.oilatmidnight.com Here's the css code: #nav-top { position: absolute; top: 10px; left: 330px; width: 200px; } #nav-top li { display: inline; } #nav { background: top left url(images/nav_left.gif) no-repeat; position: absolute; top: 66px; left: 270px; width: 580px; text-align: center; z-index: 15; } #nav div { background: top right url(images/nav_right.gif) no-repeat; padding: 0 10px; } #nav ul { background: top left url(images/nav_bg.gif) repeat-x; padding: 10px 0 10px 0px; } #nav li { display: inline; } #nav a { font-weight: normal; } Here's the html code: <div id="nav"><div> <ul> <li><a href="/index.html">HOME</a> | <li><a href="/heather.html">ABOUT HEATHER</a> | <li><a href="/news.html">NEWSLETTER</a> | <li><a href="http://heatherstasson.blogspot.com/">BLOG</a> | <li><a href="http://intercessionrequests.blogspot.com/">PRAYER </a> | <li><a href="/photos.html">PICS </a> | <li><a href="/donate.html">DONATE </a> | <li><a href="/sermons.html">SERMONS</a></li> </ul> </div></div> Thanks for any suggestions.
It's not working also in firefox. you have #uppers id which is z-index'ed (pos. absolute) on top of your menu.
First problem is that you forgot to close your <li> It should be: <li><a href="/index.html">HOME</a> | [B]</li> [/B] Code (markup): for each menu-item.
Ah, but the browser will do that internally as part of error correction... when it sees the next <li> it automatically closes the first </li> They do this with p's too, which is why in the transitional doctypes you don't need to close those elements. Not that they should be left open, or that anyone should ever, ever use a non-strict doctype : ) Since it's pretty common to accidentally absolutely position some invisible thing over links, making them unclickable, this is likely the cause of the problem. IE's z-index bugs may be letting them be clickable in IE. So ceban likely has it.
Which is why it's NOT error correction in transitional or legacy HTML. The site suffers from divvitus and outdated markup, much of what's being done there being unneccessary, redundant or having little place in the markup. For example there is NO reason for that double DIV around the main menu, there is no such thing as a FONT tag in XHTML 1.0 Strict, in STRICT you must ALWAYS put quotes around values, there is no good reason to be adding EM around your heading tag text, using non-breaking spaces to pad over some text is not a good idea either, nor is the use of non-breaking spaces and vertical breaks for the menu dividers. Likewise not matching your doctype is the unclosed IMG tags. The multiple empty elements at the bottom of the page likely should have an axe taken to them as well. There is little reason for that home page to be much more than: <!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" /> <title> Home - Heather Stasson </title> </head><body> <div id="pageWrapper"> <h1> Oil At Midnight Ministries <span></span> </h1> <ul id="mainMenu"> <li class="first"><a href="/index.html">HOME</a></li> <li><a href="/heather.html">ABOUT HEATHER</a></li> <li><a href="/news.html">NEWSLETTER</a></li> <li><a href="http://heatherstasson.blogspot.com/">BLOG</a></li> <li><a href="http://intercessionrequests.blogspot.com/">PRAYER</a></li> <li><a href="/photos.html">PICS</a></li> <li><a href="/donate.html">DONATE</a></li> <li><a href="/sermons.html">SERMONS</a></li> </ul> <div class-"subtext"> Heather Stasson Intercessory Missionary </div> <div id="content"> <hr /> <h2>Welcome!</h2> <p> Oil At Midnight Ministries is inspired after <cite>Matthew 25:1-13</cite>. The passion of the ministries is found in v.6, <blockquote class="inFlow">"But at midnight there was a cry, 'Here is a Bridegroom! Come out to meet Him.'"</blockquote> We see from this chapter what will be required of us in that hour; intimacy. The oil in <cite>Matthew 25:1-13</cite> is speaking of intimacy with our Bridgegroom, Jesus Christ. We are commited to ushering others into a place of intimacy with the Father through the Holy Spirit to manifest the God-Man Christ before His return. We feed the poor, visit orphans, and those who are imprisoned. </p> <hr /> <div id="offSiteLinks"> <div class="borderTop"><div></div></div> <div class="borderSides"> <a href="http://www.moderndayprophets.net"> <img src="images/moderndayprophets.png" alt="Pic 3" /> </a><br /> <a href="http://www.ihop.org"> <img src="images/ihop.png" alt="Pic 3" /> </a><br /> <a href="http://www.unitedforthegospel.org"> <img src="images/uglogo.png" alt="Pic 3" /> </a><br /> <a href="http://www.gfa.org"> <img src="images/gfa.png" alt="Pic 3" /> </a><br /> <a href="http://teenchallengeusa.com/"> <img alt="Pic 3" src="images/tc.png" /> </a> <!-- .borderSides --></div> <div class="borderBottom"><div></div></div> <!-- #offSiteLinks --></div> <!-- #content --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): I have time later I'll toss together the CSS that would make that work.
... and here we go. http://www.cutcodedown.com/for_others/romans5/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/romans5/ is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, would be valid CSS if not for a few browser specific fixes, tested working IE 6, 7 & 8, Opera 9.64 and 10, Firefox 2, 3 and 3.5, and the latest iterations of Safari and Chrome. I did take a couple styling liberties and remastered a few images, but that helps 'bring out' the content more IMHO. Hopefully you'll be able to follow my code and see how it works - the big thing is that as much as possible anything in the HTML should say WHAT the content is, not how it's going to appear. While you may occasionally have to resort to something like 'borderTop' wrappers or sandbag spans, for the most part anything that's appearance goes in the CSS, not the HTML. Hope this helps. Oh, and I had to fight the urge to make the alt text on IHOP read pancakes, not prayer.