Hello CSS gurus
I'm trying to redesign my site to a pure XHTML with CSS. Well, the new site design is almost ready, however, I have some problems with Firefox browsers. You can see an example page here.

For the left menu, I have created a custom list definition in my CSS file:

#leftcolumn ul {
list-style-type: none;
margin-left: 0px;
margin-bottom: 10px;
margin-top: 0px;}

#leftcolumn li {
background-image: url(images/0.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
padding-left: 12px;
margin-bottom: 3px;}

Well, in IE the left colum with the navigation links is displayed correctly, however, in Firefox it looks weird. It seems that Firefox does not respects the custom padding and margin for lists and list items.

Any CSS gurus whant to help me?

__________________
MCSE, 70-290

I wouldn't describe myself as a guru, but I might be able to set you on your way. First, you need to realize that the browser with the problem is Explorer, not Firefox. The Mozilla browsers are mostly standards compliant, but Microsoft likes to make up their own standards. See http://www.w3.org/TR/REC-CSS2/box.html about the box model to understand why. Truth be told, Explorer's approach to margins and padding actually makes more sense to me than w3c''s (which is not true of a lot of Microsoft stuff, like clicking the Start button to turn the thing off).


If you are developing css, it's a good idea to develop so it looks right first in Firefox (or Mozilla or Opera), and then, if it looks weird in Explorer versions, apply the appropriate hacks.


Take a look at http://css.maxdesign.com.au/listamatic/vertical15.htm - this site has probably the best css list navigation tutorials around, with lots of examples. The one in the link is similar to yours, and looks identical in Explorer 6 and Firefox. You will also find descriptions of hacks to solve the problems between browsers, when and how to apply them, within this site.

The other question to think about, is do you really need to fix it? What proportion of your hits uses Explorer versus other browsers? How many real people will EVER look at the site with both browsers (other than weird geeks and wannabe geeks like us)? As it is right now, the Firefox one isn't really that bad, the spacing of the links being off from what you want would probably never be noticed.

FWIW, YMMV and other appropriate disclaimers

LaryL
not a guru, just a wannabe geek

Problem fixed Thank you for your reply!

With about 90% of users using IE it was not a big deal. Howerver, I'll feel more comfortable knowing that there is no any problems with my pages...

__________________
MCSE, 70-290

No problem. I've just been through the same thing for pretty much the same reasons. Congratulations on getting your main content div at the top of the page. Most of the CSS sites I see don't do that, and yet it's one of the key advantages to using CSS. Took me ages of surfing and fixing to get it to work. But did I ever learn a lot along the way. Our site layout is quite similar - 3 column with header and footer, main content div at the top of the page. I'll have to take a closer look at your style sheeet to see whether we got to the same end in the same way.

LaryL

For now, only a few pages are ported to the new design. If you need to see the design and CSS, you can visit the second page in my sig This will be not the last version of the style, but the main definitions will stay as they are now.

By the way, it will be great, if the next version of IE support those display-type properties. This will save a lot of work for developers trying to move from tables to CSS... I was not able to find a way to create columns with the same height (without specifying the height).

__________________
MCSE, 70-290