Firefox CSS issue (IE works fine)

  • I’m seeing odd CSS behavior in my sidebar but only in Firefox (1.5.0.9). I’m using a dynamic sidebar with the standard objects: Pages, Links, Categories, Archives and Meta as well as a BF2 Stats widget. The Pages & Links text are at the top of the sidebar and display with the correct CSS but the rest of the section links below that (Categories, Archives, BF2 Stats and Meta Links) appear to be displaying without CSS. When I view the page in IE 6 all of the section links show up with the correct CSS applied.

    When I view source in FF I see potential problems. (1) All section titles have a div tag with class = title but the section titles that appear correctly are also surrounded by an LI tag with class = pagenav while the other section titles do not have that extra LI tag around them in FF. This is the same source as in IE 6 however so I don’t think it could be the problem.

    (2) In FF the Pages link has a div tag with class=\”title\ but the div tag for the “broken” section title links just show as class=”title”. That doesn’t seem like it is the problem either, I get the feeling that the CSS is just mucked up somehow.

    I’m currently on WP 2.0.2 and I’m using the Fighting the Darkness theme which was written for WP 1.5 but I modified it to use widgets and dynamic sidebar. The site is https://www.doppelbock.net/

    My CSS validates (the only errors are some duplicate colors) and is located here: https://www.doppelbock.net/blog/wp-content/themes/Fighting_the_Darkness/style.css and I get the feeling there must be some nested tags that are causing my issue. I originally thought the sidebar was just flat-out broken until I checked it with IE where it looked fine.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter doppelbock

    (@doppelbock)

    I also just applied the changes listed below to the functions.php file in the theme directory but it didn’t help:

    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>'

    In my humble opinion I thought your Side Bar looked better in Fire Fox. I’m using IE7 which seems to be distorting the backgound of the sidebar, also the text looks larger too.

    You may like to read this article which shows the differences in IE and FireFox.

    https://meyerweb.com/eric/css/edge/

    Thread Starter doppelbock

    (@doppelbock)

    In FF the first links are in Tahoma and the rest in Times (at least that’s what it looks like) when they should all be Tahoma. I got the same behavior in Windows and Linux with FF.

    That css/edge site that you linked to has some great stuff but I couldn’t find anything about FF v. IE.

    I’ll go off and brush upon my CSS but the other issue I have with that template is that the sections jam into each other vertically with no spacing, I still need to figure out how to space them out a bit.

    Just taken another closer look at your source code and CSS. There seems to be an abundance of classes mentioned in the source code, but are not listed in the CSS. I’m not surprised the Side Bar is showing up in different font styles. As far as I could make out, none of the classes have been defined in your CSS.

    Apologies…I have just seen this DIV id in CSS…
    #menu ul li {
    /* font: 14px ‘Tahoma’, sans-serif; */
    font:14px ‘Tahoma’, sans-serif;
    letter-spacing: 0;
    margin-top: 10px;
    padding-bottom: 2px;
    /*border-bottom: dotted 1px #ccc;*/
    font-style:normal;
    font-weight:bold; }

    But I am wondering if all the other classes defined within your source code are in some way conflicting in FireFox and other browsers for that matter.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Firefox CSS issue (IE works fine)’ is closed to new replies.