CSS: IE vs Firefox Screenshots!

  • Ok ok … here we go.
    I’ve already posted about this before but haven’t gotten an “answer” per se … take a look at this screenshot.
    I want to know how to get rid of the word “Links”(in Verdana). I’ve taken a look at the source and this is what I see:

    <div id="menu">
    <span class="sidetitle">Links</span>
    <li id="links">Links

    • A List Apart

      • Where the hell is li id=”links” coming from? It’s not in my CSS!? And, just out of curiosity, why doesn’t the Archives or Categories PHP get “automatically assigned” a list ID + a UL like that? I mean, look at my template:

      <div id="menu">
      <span class="sidetitle">Links</span>
      <?php get_links_list(); ?> <---------------------
      <span class="sidetitle">Recent Entries</span>

    • Recent Entries PHP Here

    <span class="sidetitle">Browse by Category</span>
    <?php list_cats(0, 'All', 'name'); ?>< ----------------------
    <span class="sidetitle">The Archives</span>
    <?php get_archives('monthly'); ?> <----------------------
    <span class="sidetitle">Other</span>


    They’re all styled the same so why does what I mentioned happen to “Links” only?
    Also in the screenshot is the big gap sitting below “Browse by Category”. Should there be a <li id="categories"> there as well? And what about Archives? I don’t get it …
    I’m also wondering if you can take a look at this screenshot and help me out with the CSS (The applicable stuff is provided in the screenie) — namely:
    Why the big gap at the right side i n IE?
    Why the no top margin on the header in Firefox?
    Any idea how I can fix this? Ideally I want a 10px margin around the header and menu DIV’s that’ll work in both browsers.
    Thanks a bunch …
    -Gregor

Viewing 4 replies - 1 through 4 (of 4 total)

  • I can see why your annoyed, I cannot see any justification for including ids or classes in a template function. If you want control over your own CSS you should probably use one of the other calls to get your blogroll. They are listed on the Wiki.

    Why this happens: you’re using get_links_list() to display your links… this function displays all links, in all categories. Since you only have one category of links, it only displays that one title. You can uncomment that code you commented, and use wp_get_links(1) in your index.php which will just display the list of links instead of the links with the category header.

    The IE margin issue goes as follows: It is a well established anomoly that certain varieties of IE calculate the width differently from every other browser. Specifically they include the margin in the width calculation. As indeed they include the padding. Consequently the whole layout is screwed. This is not the place for a semantic discussion about the core specification and whether on some interpretation of the CSS recommendation that such an impletation is correct. All we need to know is it happens. You may need to apply Tantek’s Voice Box Hack. Personally I prefer a nested inner div hack free solution.
    But then I can’t put a comment in the CSS about Tanteks “ugly beautiful hack”.
    Yeah right. There goes the 508.

    As to the Firefox jog. It has been my own early observeable experience when coding that in this particular respect Firefox seems to contain a bug. I hacked it by adding borders to the offending divs and wierdly it closed the gap. Heck knows why. I have yet to find any other reports of this phenomena.HTH

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS: IE vs Firefox Screenshots!’ is closed to new replies.