PDA

View Full Version : CSS Layout issues



tbanucci
Dec 11th, 2008, 08:37 AM
Hi,

I recently updated a site for my video group, and found that it was having cross-platform layout problems. It was ok in Safari and IE, and the layout was then messed up in Firefox. Now, after I made some changes, it's jacked in Safari too.

Here is the site, but you might have to click on "about" or another page to see the layout problems:

http://www.bapva.com/index2.php

Edit: don't click on Members or Meetings or it will bring you to the HTML based site, whereas this new one is PHP so the forum login will work.

It should have the black links going on one line, and then the picture javascript links on a line below.

My CSS file is:

http://www.bapva.com/master.css

For the life of me, I can't get these to line up properly anymore. I'm wondering if my design is even done correctly. Right now I have a wrapper that was measured out correctly for pictures to fall in line. I'm wondering if this is not a good way to go about the design. I don't want to replace with an image map or flash, since that is bad for certain browsers (and iphone).

My site is validated, I checked that. Any suggestions?

Thanks!

abduraooft
Dec 11th, 2008, 08:49 AM
http://www.bapva.com/about.php Well, you have a number of errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bapva.com%2Fabout.php&charset=%28detect+automatically%29&doctype=Inline&group=0

First of all, your Doctype is in compete. So select a proper doctype (http://www.alistapart.com/stories/doctype/) . I'd recommend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

After changing that, validate your site again and fix the remaining (real) errors .

PS: welcome to CF!

tbanucci
Dec 11th, 2008, 10:07 AM
Thank you! That helped a lot. I had validated previously with a different tool, which did not point out the errors that your link did. I also never knew about the strictness of the Doctype. I've always assumed that was just a generic piece that you had to put in HTML documents (I learned coding just by looking at other people's pages, no books).

So, I've got most of my errors cleaned up, thanks in part to the HTML tidy tool. When I first changed the Doctype, it fixed the layout in Firefox (not Safari though). Now that I have run the code through HTML Tidy, it's still broken on both browsers though.

I've found though, that it has to do mostly with the login form (php). When I am logged in to the forum (the username and password box go away and there is a message displayed), the layout is displayed correctly. When I am logged out, that is when everything looks like junk.

I've tried setting my "main" div to have a min height of 120, but that only helps on the index page, not the other pages.

Any ideas?

abduraooft
Dec 11th, 2008, 10:17 AM
Not sure, but if you are talking about the layout of your navigation list, I'd recommend you to have a look in to http://www.cssmenumaker.com/horizontal_css_menu.php, to see how to make a semantic (http://boagworld.com/technology/semantic_code_what_why_how/) navigation list in CSS, with rollover effects.

tbanucci
Dec 11th, 2008, 10:28 AM
Well, that is for my next site, definitely! Thanks for the suggestion.

I think I figured it out. The item in my CSS that was "growing" was the login box on the top right. I put a CSS value in there for "max height", which has contained it from going down and messing with the links.

Thanks for all the help!