Unfortunately, I only know enough to get myself in trouble with CSS. I've designed a site, but I'm having display problems in every browser - although the site did display properly when I was composing it in TextWrangler and an earlier version of Firefox. The URL: www.ariel-cd36.org Depending upon which browser is used, the site displays better or worse. Firefox comes the closest to correct display, with the exception that the nav bar is supposed to be running horizontally along the header. IE has almost everything out of whack. Is there anyone out there who knows what's gone wrong with the CSS? I apologize for my ignorance, and thank you for any leads.
Validate your html, then your css. Use Firefox as your reference for how things should be working. Check in IE often for when it screws up. But fix your errors first.
Thank you for the tip. I've fixed the errors on the index page and it's displaying properly except for the nav bar, which is still down the side of the page rather than along the top. CSS checks out fine with validation. When cleaning up errors in my about.html page, I now have display issues there, with content text overlapping the nav bar down the side. Odd. Not sure what the issues are there. I appreciate your help.
check out this link.. some expert stuff but they dumb it down a bit: lol cant post live links yet.. http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/
The navbar is more complicated than it needs to be. You can line it up horizontally by adding this for a start: #navbar div{float:left;width:100px}
Sorry, usually I'd suggest a good working version but I don't have time right now. However, you should use proper indentation in your HTML code because it's really hard to read and pick out where the error is. I quickly glanced at your CSS file and as far as I can see, 2 quick suggestions: 1.) Some of the elements are not clearing the float (example: header, container, etc.). I just quickly looked at the CSS file so I might be wrong. 2.) You are using negative pixels for some of your elements. I've had some experience using negative pixels but I've found that some browsers render it differently (example: IE) so I would avoid that. If I have time, I'll post back a solution.
A little knowledge truly is a dangerous thing, isn't it?! I appreciate your responses and I'll follow your suggestions. Thanks again.
Well, I didn't exactly "fix" your thing because it was really hard to interpret and find the exact problem. Instead, I created a working replica of what you have now. Mind you, it's missing most content; I only created it to give you a working version of the complete layout (since that is probably the hardest for most). Just create a new page and copy&paste the code below. I'm using Firefox on a Mac so I don't know how it will turn out on other browsers but I think it should be okay. <html> <head> <title>Ariel CD-36</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: Arial; font-size: 13px; color: #000; text-align: center; } #container { margin: auto; width: 875px; text-align: left; } #header { background: url('http://www.ariel-cd36.org/images/header.jpg') top left no-repeat; float: left; width: 100%; } #header #navbar { float: left; padding: 100px 0 67px 0; } #header #navbar ul { list-style-type: none; } #header #navbar ul li { float: left; } #header #navbar ul li a { display: block; width: 60px; height: 37px; } #header #navbar ul li a span { display: none; } /* NAVBAR ITEMS - BACKGROUNDS */ #header #navbar ul li a.home { background: url('http://www.ariel-cd36.org/images/home.png') top left no-repeat; } #header #navbar ul li a.about { background: url('http://www.ariel-cd36.org/images/about.png') top left no-repeat; } #header #navbar ul li a.projects { background: url('http://www.ariel-cd36.org/images/projects.png') top left no-repeat; width: 72px; } #header #navbar ul li a.travels { background: url('http://www.ariel-cd36.org/images/travels.png') top left no-repeat; width: 67px; } #header #navbar ul li a.photos { background: url('http://www.ariel-cd36.org/images/photos.png') top left no-repeat; width: 65px; } #header #navbar ul li a.videos { background: url('http://www.ariel-cd36.org/images/videos.png') top left no-repeat; width: 91px; } #header #navbar ul li a:hover { background-position: 0 -37px; } #header #navbar ul li.current a { background-position: 0 -37px; } #content { float: left; clear: both; background: url('http://www.ariel-cd36.org/images/content.jpg') top left repeat-y; width: 100%; } #content #main { width: 575px; float: left; } #content #main #text { padding: 0 65px 0 60px; text-align: justify; } #content #sidebar { background: url('http://www.ariel-cd36.org/images/cd36bkgrd.gif') top left no-repeat; width: 300px; height: 650px; float: right; } #content #sidebar ul { list-style-type: none; padding: 0 0 0 40px; } #content #sidebar ul li { } #content #sidebar ul li.header { font-size: 15px; color: #FFF; font-weight: bold; padding: 15px 0; } #content #sidebar ul li a { color: #FFF; text-decoration: none; } #content #sidebar ul li a:hover { color: #0200FF; } #footer { float: left; clear: both; width: 875px; height: 151px; background: url('http://www.ariel-cd36.org/images/footer.jpg') top left no-repeat; display: block; } </style> </head> <body> <div id="container"> <div id="header"> <div id="navbar"> <ul> <li class="current"><a class="home"><span>Home</span></a></li> <!-- This is the current page, so we apply the 'current' class to the <li> tag like so: <li class="current"> --> <li><a href="" class="about"><span>About</span></a></li> <li><a href="" class="projects"><span>Projects</span></a></li> <li><a href="" class="travels"><span>Travels</span></a></li> <li><a href="" class="photos"><span>Photos</span></a></li> <li><a href="" class="videos"><span>Videos</span></a></li> </ul> </div> </div><!-- end #header --> <div id="content"> <div id="main"> <div id="text"> <p>Another sailing season is about to come to a close after a great summer of sailing. Ariel covered approximately 600nm during a month-long trip on Lake Michigan. We departed St. Joseph early July and headed north, eventually going as far north as Charlevoix and Beaver Island before heading south again. Ariel performed flawlessly. We logged several hours of sailing with the new drifter, and the dodger upped the comfort factor considerably. Ariel returned to St. Joseph much improved: her teak is nice and bright, her gelcoat polished, her systems fresh and functional, and a couple of new projects underway.</p> </div><!-- end #text --> </div><!-- end #main --> <div id="sidebar"> <ul> <!-- ONE SINGLE BLOCK / COPY&PASTE BELOW --> <li class="header">History</li> <li><a href="">Cape Dory Dreaming</a></li> <li><a href="">The Search</a></li> <li><a href="">Ithaca Bound</a></li> <li><a href="">Cayuga Cruising</a></li> <li><a href="">Pulling It Off</a></li> <!-- COPY&PASTE ABOVE --> <!-- ONE SINGLE BLOCK / COPY&PASTE BELOW --> <li class="header">The Boat</li> <li><a href="">Specifications</a></li> <li><a href="">Equipment</a></li> <li><a href="">Observations</a></li> <!-- COPY&PASTE ABOVE --> </ul> </div><!-- end #sidebar --> </div><!-- end #content --> <div id="footer"> </div> </div><!-- end #container --> </body> Code (markup): Yes, I decided to not retain your CSS structure because my version is awesome.