Submit Your Article Forum Rules

Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: CSS FireFox Problems

  1. #1

    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.

  2. #2
    WebProWorld MVP mikmik's Avatar
    Join Date
    Aug 2003
    Posts
    1,557
    If you try adding 'display:block' to a.menu_nav, that may do it.
    Babies don't need a vacation, but I still see them at the beach... it pisses me off! I'll go over to a little baby and say 'What are you doing here? You haven't worked a day in your life!'
    Steven Wright

  3. #3
    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.

  4. #4
    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.

  5. #5
    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.

  6. #6
    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.

  7. #7
    Member
    Join Date
    Jan 2005
    Posts
    36
    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.
    Ooooooh, Guy Like!
    Jessica Alba

  8. #8
    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.

  9. #9
    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

  10. #10
    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.

Page 1 of 2 12 LastLast

Similar Threads

  1. Another CSS spacing problems in IE and Firefox
    By seorocks in forum Graphics & Design Discussion Forum
    Replies: 8
    Last Post: 08-05-2009, 04:14 PM
  2. Problems with css in Firefox
    By simmo in forum Graphics & Design Discussion Forum
    Replies: 10
    Last Post: 02-19-2009, 05:53 PM
  3. FooterStickAlt Problems in Firefox
    By zakfox1986 in forum Graphics & Design Discussion Forum
    Replies: 0
    Last Post: 01-11-2006, 03:34 PM
  4. Firefox extension DB problems
    By AjiNIMC in forum Web Programming Discussion Forum
    Replies: 0
    Last Post: 06-17-2005, 01:02 PM
  5. CSS Problems between IE/Netscape/FireFox etc
    By baritoneuk in forum Graphics & Design Discussion Forum
    Replies: 3
    Last Post: 08-05-2004, 11:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •