www.webdeveloper.com
Results 1 to 12 of 12

Thread: [RESOLVED] Firefox ignoring css instruction

  1. #1
    Join Date
    Aug 2006
    Posts
    52

    resolved [RESOLVED] Firefox ignoring css instruction

    Hello Friends,

    As a novice css guy I'm using Infinite Menus to build a dhtml menu.

    On IE it works fine but Firefox its ignoring a text padding instruction on the submenu items.

    sample: http://www.divulgi.com/menu

    I'm sure thats a easy thing to fix for expert css guys.

    CSS code that is being ignored by firefox:

    #imenus0 ul a { /* Sub Menu Items */

    color:#ffffff;
    text-align:left;
    font-size:11px;
    font-weight:normal;
    text-decoration:none;
    border-style:none;
    border-color:#000000;
    border-width:1px;
    padding:4px 0px 4px 16px;

    }

    Thanks

    Regards
    David

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Your CSS:
    (all the above CSS selector/declarations was removed by me)
    #imenus0 ul a { /* Sub Menu Items */
    (etc etc etc...
    padding:4px 0px 4px 16px;}


    Your HTML:

    <ul id="imenus0">
    <li style="width:146px;"><a href="#" style="PADDING-RIGHT: 0px; PADDING-LEFT: 13px; BACKGROUND-IMAGE: url(imagens/menu1.gif); PADDING-BOTTOM: 8px; PADDING-TOP: 5px; TEXT-ALIGN: center">quem somos</a></li>
    <li style="width:140px;"><a href="#" style="PADDING-RIGHT: 0px; PADDING-LEFT: 13px; BACKGROUND-IMAGE: url(imagens/menu2.gif); PADDING-BOTTOM: 8px; PADDING-TOP: 5px; TEXT-ALIGN: center">alojamento</a>

    (etc etc etc..)

    It appears that Firefox isn't 'ignoring' your CSS, it is actually obeying your CSS by way of priority, -the CSS that appears in the HTML is 'closer' spatially to the affected element (ul/li) than the more distance 'external' CSS. This is priority. If you want the CSS values to be obeyed, removed the BOLD lines here in the HTML and the CSS values should work as intended
    Last edited by WebJoel; 08-11-2006 at 07:42 AM.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Hm... For me it looks like Firefox follows the CSS code, and IE does not
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    #imenus0 ul a {
    	background-color:#cccccc;
    	text-align:left;
    	font-size:11px;
    	font-weight:normal;
    	text-decoration:none;
    	padding:4px 0px 4px 16px;
    	}
    </style>
    </head>
    <body>
    <div id="imenus0">
    <ul>
    <li><a href="#" id="foo">bla</a></li>
    </ul>
    </div>
    </body>
    </html>
    By the way... What was the use to give a color and a width to the border, as long as your border-style is none?

  4. #4
    Join Date
    Aug 2006
    Posts
    52
    Well for me the padding in your sample is displayed correctly in both Firefox and IE.

    But I add it to the menu code and again firefox ignoring the padding.

    You can look at it.

    I will put here all the css and html code:

    CSS:
    #imouter0 { /* Main Menu Container */

    background-color:#4f4f4f;
    border-style:none;
    border-color:#ffffff;
    border-width:0px;
    padding:0px;
    margin:0px;

    }

    BODY #imouter0 { /* Main Menu Container [Add extra css not offered in the visual tool here.] */


    }

    #imenus0 a { /* Main Menu Items */

    color:#ffffff;
    text-align:left;
    font-family:Verdana;
    font-size:11px;
    font-weight:bold;
    font-style:normal;
    text-decoration:none;
    border-style:none;
    border-color:#ffffff;
    border-width:1px;
    padding:0px 0px 0px 6px;

    }

    BODY #imenus0 a { /* Main Menu Items [Add extra css not offered in the visual tool here.] */


    }

    #imenus0 li a.ihover { /* Main Menu Items [hover] */

    background-color:#666666;
    color:#ffffff;
    text-decoration:none;

    }

    #imenus0 li a.iactive { /* Main Menu Items [active] */

    background-color:#efefef;

    }

    #imenus0 .imbuttons { /* Main Menu Graphic Button Content */


    }

    #imenus0 ul { /* Sub Menu Container */

    background-color:#2f2f2f;
    border-style:none;
    border-color:#ffffff;
    border-width:1px;
    padding:5px 0px;
    margin:4px 4px 0px 0px;

    }

    BODY #imenus0 ul { /* Sub Menu Container [Add extra css not offered in the visual tool here.] */


    }

    #imenus0 ul a {
    background-color:#cccccc;
    text-align:left;
    font-size:11px;
    font-weight:normal;
    text-decoration:none;
    padding:4px 0px 4px 16px;
    }

    BODY #imenus0 ul a { /* Sub Menu Items [Add extra css not offered in the visual tool here.] */


    }

    #imenus0 ul li a.ihover { /* Sub Menu Items [hover] */

    background-image:url(imagens/submenu.gif);
    color:#ffffff;
    text-decoration:none;

    }

    #imenus0 ul li a.iactive { /* Sub Menu Items [active] */

    background-color:#ffffff;
    text-decoration:none;

    }

  5. #5
    Join Date
    Aug 2006
    Posts
    52
    Quote Originally Posted by WebJoel
    Your CSS:
    (all the above CSS selector/declarations was removed by me)
    #imenus0 ul a { /* Sub Menu Items */
    (etc etc etc...
    padding:4px 0px 4px 16px;}


    Your HTML:

    <ul id="imenus0">
    <li style="width:146px;"><a href="#" style="PADDING-RIGHT: 0px; PADDING-LEFT: 13px; BACKGROUND-IMAGE: url(imagens/menu1.gif); PADDING-BOTTOM: 8px; PADDING-TOP: 5px; TEXT-ALIGN: center">quem somos</a></li>
    <li style="width:140px;"><a href="#" style="PADDING-RIGHT: 0px; PADDING-LEFT: 13px; BACKGROUND-IMAGE: url(imagens/menu2.gif); PADDING-BOTTOM: 8px; PADDING-TOP: 5px; TEXT-ALIGN: center">alojamento</a>

    (etc etc etc..)

    It appears that Firefox isn't 'ignoring' your CSS, it is actually obeying your CSS by way of priority, -the CSS that appears in the HTML is 'closer' spatially to the affected element (ul/li) than the more distance 'external' CSS. This is priority. If you want the CSS values to be obeyed, removed the BOLD lines here in the HTML and the CSS values should work as intended

    I guess I understood, the problem is that the main menu items must have diferent padding than the submenu items.

    But ok, I will try to avoid that.

    Thanks a LOT
    David

  6. #6
    Join Date
    Aug 2006
    Posts
    52
    Quote Originally Posted by WebJoel
    Your CSS:
    (all the above CSS selector/declarations was removed by me)
    #imenus0 ul a { /* Sub Menu Items */
    (etc etc etc...
    padding:4px 0px 4px 16px;}


    Your HTML:

    <ul id="imenus0">
    <li style="width:146px;"><a href="#" style="PADDING-RIGHT: 0px; PADDING-LEFT: 13px; BACKGROUND-IMAGE: url(imagens/menu1.gif); PADDING-BOTTOM: 8px; PADDING-TOP: 5px; TEXT-ALIGN: center">quem somos</a></li>
    <li style="width:140px;"><a href="#" style="PADDING-RIGHT: 0px; PADDING-LEFT: 13px; BACKGROUND-IMAGE: url(imagens/menu2.gif); PADDING-BOTTOM: 8px; PADDING-TOP: 5px; TEXT-ALIGN: center">alojamento</a>

    (etc etc etc..)

    It appears that Firefox isn't 'ignoring' your CSS, it is actually obeying your CSS by way of priority, -the CSS that appears in the HTML is 'closer' spatially to the affected element (ul/li) than the more distance 'external' CSS. This is priority. If you want the CSS values to be obeyed, removed the BOLD lines here in the HTML and the CSS values should work as intended

    Well I don't know if I did what you was thinking but I have fixed my problem, and you pointed me on the right track.

    Thanks

    Regards
    David

  7. #7
    Join Date
    Aug 2006
    Posts
    52
    Just another question...

    When the menu is loaded first time, the links are displayed for at least one second without the css style? Why is that

    Regards

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by drtduarte
    Just another question...

    When the menu is loaded first time, the links are displayed for at least one second without the css style? Why is that

    Regards
    Yes, I think in my earlier post I posted the "menu" li but it was the SUB-menu li that you were wanting (the "li" that was inside of the "ul/li" is the drop-down, right?, but the concept was the same)

    And your question now, -I supposed that because the link to the external CSS was loaded "first" in the page-read and is employed a fraction of second before the HTML's 'internal' CSS changed it, you'd see a 'flash' between 'correct' to 'non-correct' (assuming that the external CSS is what you wanted and the internal HTML's CSS was not...)

    I'm curious, -how do you like 'open cube' so far? I like it, but am still a mostly 'open source, free for use'. Don't you have to buy a licence or something with open cube?
    Last edited by WebJoel; 08-11-2006 at 05:51 PM.

  9. #9
    Join Date
    Aug 2006
    Posts
    52
    Quote Originally Posted by WebJoel
    I'm curious, -how do you like 'open cube' so far? I like it, but am still a mostly 'open source, free for use'. Don't you have to buy a licence or something with open cube?

    Yes you are right... Do you know any way to do the same without this Open Cube system?

    Regards

  10. #10
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by drtduarte
    ... Do you know any way to do the same without this Open Cube system?
    Not as kewl as, no. But I like open-source stuff. -Keeps me from having to ask for disbursements. Lots of places to search, like:
    http://www.opensourcescripts.com/

    For the most part, I shy away from navigation that relies upon any javscript. Navigation is a bit sacred, and if someone has javscript turned off (or,in the case of WEBtv users, NO javscript ability whatsoever), the navigation is completely lost to them.
    Now, a neat javascript image gallery or slideshow? -I'm onboard with that. If javscript is turned-off, it merely works as if 'just a hyperlink' and the content can be revealed 'on-click', sans-SPFX.
    But that open cube thing is very neat... much coveted!
    Last edited by WebJoel; 08-17-2006 at 06:41 PM.

  11. #11
    Join Date
    Aug 2006
    Posts
    52
    Hey thanks for the tip...

    I've tried the menu on every browsers just for test and on firefox the submenu takes a huge time to load....

    I guess I will choose a css based menu, do you have any preference on this?

    I know Tigra Menu for long time, maybe I'll choose this one.

    Take Care
    David

  12. #12
    Join Date
    Aug 2006
    Posts
    52
    Or Gurt Menu, this last is amazing....

    Thanks a lot for the tip, again

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles