Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Emire and IE7- two small issues

  1. gunsofbrixton
    Member

    Hello,

    Blog in question is here: http://gunsofbrixton.wordpress.com

    CSS was edited/previewed in Opera 9.X, looked great. In Firefox it loses font colour in sidebar widgets as well as increases character spacing in posts, but that is ok. IE6 had its uglifications, but function was not impaired. There are a wide variety of small aesthetic differences between the browsers that I would eventually like to deal with, but for now I am concerned with correcting, if possible, the following two issues as seen in IE:

    1) In both IE6 and IE7, around the rss and sitemeter icons in the sidebar is a glowing blue border. Any way to eliminate that?

    2) I installed IE7 tonight and now see an obtrusive problem:

    The footer/theme credits ("Theme: Emire by Phu" etc), which fixedly spans the length of the screen in Opera and FF, is hanging out on the right half of the screen in IE7. Especially as you scroll down can you see how this interferes with reading posts. Hopefully this is the correct part of the code to show potential helpers:

    #footer {
    position:fixed;
    bottom:0;
    width:100%;
    background:#434343;
    border-top:1px solid #4F5158;
    border-bottom:none;
    color:#888;
    clear:both;
    -moz-border-radius:0;
    padding:0;
    }

    with position:fixed and width:100%, I really don't know what else to do here to position the footer correctly in IE.

    fwiw, unaltered stylesheet is same as above except:

    padding:3px 0;
    -moz-border-radius:3px;

    which seemed at the time I changed those values to 0 to only affect the height of the footer.

    Answers, ideas, anything else helpful about Emire very much appreciated! Not a whole lot about this one turns up in a forum search, if I am searching correctly, that is.
    Thank you~

  2. ishmeet
    Member

    First things first, the footer appears fine in IE6. I checked it and it's stretching along the entire width of the page as required.

    And the second thing is that the blue border is IE's way of showing links and it seems like the IE way is overlapping the custom CSS which if I'm not wrong is supposed to show a white border right?

    You could try to edit the colour for links in your stylesheet if you're familiar with CSS or else you're going to have to wait for a volunteer who knows CSS.

  3. gunsofbrixton
    Member

    ishmmet:

    You are correct: the footer is fine in IE6. It is bizarre in IE7.

    Re: link colors, in Opera the border is transparent (ideal), in FF it is indeed white. I will see what more I can do with the stylesheet as far as that goes, thanks for pointing me in the right direction!

  4. ishmeet
    Member

    I don't have IE7 so I won't be able to tell you anything about that but there's just one thing, all the browsers have their own ways of handling HTML and it's impossible to get everything to work perfectly in all the browsers. You should just make sure it's presentable in all the browsers and almost perfect in the browser used by the majority of your readers.

  5. timethief
    Member

    I have viewed the blog in IE7 and in firefox 2.0.0.11

    The difference I see is that this "Theme: Emire by Phu. Blog at WordPress.com" is centered in the page in firefox but is off to the far right in IE7. In IE7 it's so far to the right that no all of the phrase appears.

    As you are working with css testing the way your edits appear in different browsers is important so here's a useful link to a free toll for determining the same http://browsershots.org/

  6. gunsofbrixton
    Member

    I have monkeyed around with everything possible in the stylesheet, and haven't found anything that centres the footer in IE7. However, I did find this in the comments on the designer's page:

    03.13.06:
    Kevin: Also .. the footer doesn’t display right in IE 7
    [Edit by Phu: IE7 is still in beta and undergoing heavy revision. In fact, the recent builds (including the unreleased MIX06 build) already contain numerous fixes for issues encountered in the public Beta 2 release. It isn’t sensible to be addressing ‘issues’ for beta releases when the releases aren’t themselves stable.]

    03.14.06:
    Kevin: The footer is pushed off to the right as opposed to taking up the full bottom … and in IE6 the footer displays about 5 lines up and also to the right.

    Jason: IE6 shows the footer just as it does in Mozilla/Firefox, except it doesn’t anchor it to the bottom of the page (you have to scroll all the way down to see it).

    04.09.06:
    lr: Regarding the IE footer issues: This is easily fixed by adding “height: 100%” to the body and wrapper styles. (Must be added to both.) The footer won’t “stick” in the viewport for IE this way and you’ll have to scroll all the way down to see it, but it’s a small price to pay to appease IE without jumping through hoops. The footer will stick in the viewport and scroll with you in Firefox.

    gunsofbrixton says: this solution did not work for me. research continues...

  7. thesacredpath
    Member

    OT sort of: I've noticed quite a few "hacks" that have been documented in the CSS in various themes to fix "problems" specific to IE. You of course only see these notations in well documented style sheets.

  8. detailscomm
    Member

    Maybe someone could look at my "modified" emire theme and question. detailscomm.wordpress.com

  9. gunsofbrixton
    Member

    for lack of a better solution to the footer problem, I just went ahead and deleted "position:fixed;" from the stylesheet entirely. The footer can now only be seen if someone scrolls all the way to the bottom*; I figger I'm not going to feel as if I've barred any credit due the designer, since even s/he hasn't offered a better solution.

    *curious consequence: the wordpress smile is now hiding in the centre of the page, between the footer and browser border, rather than before as I'd seen it in the upper right of the sidebar. Being thus eclipsed seems not to have had any impact on stats, but I daresay the absence of its immediate appearance has unhappified the blog a few pixles worth ;o)

  10. practicallyedible
    Member

    How do you make different css rules for different browsers? Don't you need to be able to edit the html for that?

  11. devblog
    Member

    Don't you need to be able to edit the html for that

    No, you don't.

    How do you make different css rules for different browsers?

    Using CSS hacks. However, I don't recommend using hacks at all; yes, sometimes they are necessary, but the less you use, the better. After all, it IS possible to style a page without using hacks at all (or that much) and still make it look good on a lot of browsers.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags