CSS FireFox Problems

[msadmin]

http://www.cwswireless.com/temp/

Hi. The site I am building looks GREAT in IE and everything works almost just as well in FireFox except for the menu system to the left.

If you view it in FireFox you will find the menu system to the left is messed right up!

I can't figure this one out and if you can, your help is greatly appreciated.

Thanks for everything in advance guys/girls. : )

Dave.

[mikmik]

If you try adding 'display:block' to a.menu_nav, that may do it.

[msadmin]

If you try adding 'display:block' to a.menu_nav, that may do it.

display:block; did work but pushed everything over to the right. Thanks for that for sure. : )

If I could figure out why it's pushing everything over that would be great...

the CSS code is:

a.menu_nav{font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;text-align:right;color:#5A5A5A;
width:199px;height:27px;background-color:#FAFAFA;
border:solid 1px #8C8A8C;border-width:0px 1px 1px 0px;padding:6px 20px 0px 20px;background:url("../images/nav_bground.gif");
background-repeat:no-repeat;display:block;}

The display:block; also made about a 20px space between each menu item in IE but it didn't push anything over to the right like in FireFox.

In FireFix it seems the width expanded past the 199px i was seeking.

Still not sure here.
Dave.

[msadmin]

I have just added info boxes under the nav box to the left. there also seems to be a problem with them as well. the width should be 199px but in FF it is again pushing the area to the right out about 20px.

here is the css code.

/* Info Boxes to the right */

div.info_box {

width:199px;
height:auto;
border:solid 1px #A6BBE3;
background:url("../images/info_box.gif");
background-repeat:repeat-x;
background-color:#C6D7F7;
border-bottom-color:#586A8B;
padding-top:5px;
padding-left:6px;
padding-bottom:10px;

}

strong.info_box{font-size: 14px;}

p.info_box {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#5A5A5A;

}

/*end Info Boxes*/

What I don't comprehend is why the rest of the document is relatively fine in FF.

Confusingly yours,
Dave.

[JSeverson]

Dave,
I believe I've had this problem before but I just can't seem to find the site that this was occurring with.

It looks like the info boxes are being bumped out by about 6px, the same amount that you have set for the padding-left in the DIV tag.

Try removing that padding-left and see what happens. If you remove it and the boxes no longer bump out, I would say to try applying the padding-left to the P tag instead.

Hope that helps...

[msadmin]

http://www.cwswireless.com/temp/
http://www.cwswireless.com/temp/styles/styles.css

classes in question: a.menu_nav

well basically i tried removing that already but thanks for the suggestion.

take note, i just removed the left menu for a second and found that it is the menu itself that is pushing the boxes below it out in bit farther than it should be...


i'v also now removed all padding from the actual <a> style called menu_nav and if you view it in FireFox you can see the different, now at least you can read the text it isnt as wide as the 199px that I am expecting.

Does FireFox have a problem with <a> styles ? Can I NOT add padding and margins and background images of fixed widths and lengths to their properties correctly in FireFox ?

Thanks for your help everyone,
Dave.

[GuyLaDouche]

First off, you should really be using symantically correct markup.

Making your menu an unordered list would have made this much simpler on you. Also, use

for paragraphs, <h#> tags for headers. You are using
completely for the wrong purposes.

Using the menu you have there without the list, add the following:

.left_side a.menu_nav { display: block; }
.left_side br { display: none; }

But that's an awful fix. I mean I almost threw up in my mouth by posting this. But it's your only bet with the markup you have there. It looks like it's working for me here. Your mileage may vary, but it's worth a shot. FYI, that god forsaken snippet will break your following info_box:

<p class="info_box"><strong class="info_box">Lorem Ipsum[/b]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut turpis. Sed a purus. Mauris dapibus odio in velit. Vivamus vel purus. Praesent interdum mollis augue. Mauris vitae eros ut eros mattis ullamcorper.</p>

It will ignore your
and will be on the same line. However, if you at least change that Lorem Ipsum title to a header of some sort, that will be fixed.

Again, this is a HORRIBLE fix that I put up there, as far as hacks go, and I would suggest revisiting your markup if possible.

[msadmin]

Righto, righto, righto ...

I'm glad that you at least took the time to checkout my code.

Ok for now im going to try and make the menu a list instead, i will get back to you, thanks,

Dave.

[msadmin]

First off, you should really be using symantically correct markup.

Making your menu an unordered list would have made this much simpler on you. Also, use

for paragraphs, <h#> tags for headers. You are using
completely for the wrong purposes.

Using the menu you have there without the list, add the following:

.left_side a.menu_nav { display: block; }
.left_side br { display: none; }

But that's an awful fix. I mean I almost threw up in my mouth by posting this. But it's your only bet with the markup you have there. It looks like it's working for me here. Your mileage may vary, but it's worth a shot. FYI, that god forsaken snippet will break your following info_box:

<p class="info_box"><strong class="info_box">Lorem Ipsum[/b]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ut turpis. Sed a purus. Mauris dapibus odio in velit. Vivamus vel purus. Praesent interdum mollis augue. Mauris vitae eros ut eros mattis ullamcorper.</p>

It will ignore your
and will be on the same line. However, if you at least change that Lorem Ipsum title to a header of some sort, that will be fixed.

Again, this is a HORRIBLE fix that I put up there, as far as hacks go, and I would suggest revisiting your markup if possible.

Well GLD, I added the un-ordered list and well, now there is a gap between each menu item of about 3px. It also didnt do much for FireFox either, I set the width to the UL to my specs of 199px and still nothing, ...

How can you trash me and give my semi-workable options ?

*still figuring this out

[msadmin]

P.S. Everyone, im NOT trying to validate this code just yet, im trying to get the skeleton on the go first, YES that may be foolish it had to be that way this time...the validation process will be applied shortly...once i get this menu system working normally in FireFox.

Dave.