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]

Originally Posted by mikmik

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]

Originally Posted by 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.

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.

[GuyLaDouche]

It was not my intention to trash you. Sorry that you took it that way.

That fix that I posted was to be used keeping the menu as is, if you couldn't make the menu a list. So by making it a list and then adding that code, I'm not surprised that it borked out on you.

If you are going to make the menu a list then the code that I gave will likely not work.

If you are going with a list, without seeing what you have now, try adding:

.left_side ul {
width: 100%;
}
.left_side ul li a {
display: block;
}

See what that does for you.

[msadmin]

if you look now you will see an UL and under it the regular list I used, now why is the UL giving a small gap between each LI ?

[GuyLaDouche]

I just checked the URL and I see just your old menu with the list commented out... did I catch you in the middle of something?

[msadmin]

Originally Posted by GuyLaDouche

I just checked the URL and I see just your old menu with the list commented out... did I catch you in the middle of something?

Ya, i commented it out because my client has to view it shortly and the UL wasn't working properly with EI either, it was placing a small space between each LI.

im going to revert back to the UL cause it is the better way but hacking it seems like its going to give me trouble...

It seems desolate right now though, i just dont get it.

Dave.

[Faglork]

BTW, your DTD will throw all browsers into quirks mode, thus causing IE6 to apply the broken box model of IE5 - this makes it close to impossible to have the same layout in IE and FF.

Alex

[msadmin]

Originally Posted by faglork

BTW, your DTD will throw all browsers into quirks mode, thus causing IE6 to apply the broken box model of IE5 - this makes it close to impossible to have the same layout in IE and FF.

Alex

OH!

Do you mean the doctype ?

[msadmin]

Originally Posted by faglork

BTW, your DTD will throw all browsers into quirks mode, thus causing IE6 to apply the broken box model of IE5 - this makes it close to impossible to have the same layout in IE and FF.

Alex

so does that mean that i have to change the doc type ?

[msadmin]

http://validator.w3.org/check?uri=ht...y%29&verbose=1

So now the page validates to Valid XHTML 1.0 Strict.

Fine. But it STILL doesn't view well in FireFox.

I cannot understand !