Contact Us Forum Rules Search Archive
WebProWorld Part of WebProNews.com
Page One Link To Us Edit Profile Private Messages Archives FAQ RSS Feeds  
 

Go Back   WebProWorld > Webmaster, IT and Security Discussion > Web Programming Discussion Forum
Subscribe to the Newsletter FREE!


Register FAQ Members List Calendar Arcade Chatbox Mark Forums Read

Web Programming Discussion Forum Working with an API? Developing a plugin? Writing a Mod or script for your favorite blog, Web 2.0 site or Forum? Welcome.

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 04-06-2005, 01:28 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default CSS FireFox Problems

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.
Reply With Quote
  #2 (permalink)  
Old 04-06-2005, 01:47 PM
mikmik's Avatar
WebProWorld 1,000+ Club
 

Join Date: Aug 2003
Location: Edmonton, AB, Canada
Posts: 3,406
mikmik RepRank 1
Default

If you try adding 'display:block' to a.menu_nav, that may do it.
__________________
What I am is what I am, are you what you are, or what.
Eddie Brickel
Reply With Quote
  #3 (permalink)  
Old 04-06-2005, 02:04 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

Quote:
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.
Reply With Quote
  #4 (permalink)  
Old 04-06-2005, 04:05 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

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.
Reply With Quote
  #5 (permalink)  
Old 04-07-2005, 12:51 AM
WebProWorld Member
 

Join Date: Feb 2004
Location: New York
Posts: 75
JSeverson RepRank 0
Default

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...
__________________
Jeff T. Severson
J.T.S. Design, Inc.
Reply With Quote
  #6 (permalink)  
Old 04-07-2005, 01:05 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

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.
Reply With Quote
  #7 (permalink)  
Old 04-07-2005, 02:29 PM
WebProWorld Member
 

Join Date: Jan 2005
Posts: 36
GuyLaDouche RepRank 0
Default

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.
Reply With Quote
  #8 (permalink)  
Old 04-07-2005, 03:33 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

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.
Reply With Quote
  #9 (permalink)  
Old 04-07-2005, 03:47 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

Quote:
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
Reply With Quote
  #10 (permalink)  
Old 04-07-2005, 03:55 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

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.
Reply With Quote
  #11 (permalink)  
Old 04-07-2005, 04:06 PM
WebProWorld Member
 

Join Date: Jan 2005
Posts: 36
GuyLaDouche RepRank 0
Default

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.
Reply With Quote
  #12 (permalink)  
Old 04-07-2005, 04:06 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

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 ?
Reply With Quote
  #13 (permalink)  
Old 04-07-2005, 04:14 PM
WebProWorld Member
 

Join Date: Jan 2005
Posts: 36
GuyLaDouche RepRank 0
Default

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?
Reply With Quote
  #14 (permalink)  
Old 04-07-2005, 04:58 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

Quote:
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.
Reply With Quote
  #15 (permalink)  
Old 04-08-2005, 11:42 AM
Faglork's Avatar
WebProWorld Veteran
 

Join Date: Feb 2005
Location: Forchheim, Germany
Posts: 947
Faglork RepRank 0
Default

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
Reply With Quote
  #16 (permalink)  
Old 04-11-2005, 12:06 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

Quote:
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 ?
Reply With Quote
  #17 (permalink)  
Old 04-11-2005, 12:08 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

Quote:
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 ?
Reply With Quote
  #18 (permalink)  
Old 04-11-2005, 12:31 PM
WebProWorld Member
 

Join Date: Oct 2004
Location: Toronto, Canada.
Posts: 46
msadmin RepRank 0
Default

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 !
Reply With Quote
Reply

  WebProWorld > Webmaster, IT and Security Discussion > Web Programming Discussion Forum
Tags: , ,



Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Search Engine Optimization by vBSEO 3.2.0