Weird staircase CSS problem.

[iostream.h]

I have a line of links, all set in their corresponding divs. They line up in Safari, but for some reason <br /> in Firefox and create a "Staircase".

http://itms-extractor.com/about.html

http://itms-extractor.com/main.css


I've tried putting height attributes on the containing divs, but that seemed to make no difference :confused:

[rendezvouscp]

It looks like you've gone a little div crazy. I suggest removing all the divs that style the links (left, right, center), making the image behind them one image instead of two (so it's just a bar), turn the divs around the links into spans, set the new background image to the new spans, float the spans left, and then you should have your links set.

I'd create a demo, but that's only one way to do it. You may want it so that the text is expandable, which in that case you wouldn't want to go with the above solution because the text would get bigger and the images would stay the same. There's a few different solutions, so knowing what method you're looking for would be beneficial. Looks nice by the way!
-Chase

[MontyZ]

Chase is right. I wouldn't wrap <a href> tags around the DIV tags the way you've done. Also, you should try adding the following to the "links" style:

display: inline;
float: left;

I recommend you really get to know the "Box Model" in CSS, because it'll help you figure out when to use a DIV or SPAN, for example:

http://www.w3.org/TR/CSS21/box.html