Emire and IE7- two small issues
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:
border-top:1px solid #4F5158;
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:
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.
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.
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!
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.
I have viewed the blog in IE7 and in firefox 22.214.171.124
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/
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:
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.]
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).
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…
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.
Maybe someone could look at my “modified” emire theme and question. detailscomm.wordpress.com
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)
How do you make different css rules for different browsers? Don’t you need to be able to edit the html for that?
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.
The topic ‘Emire and IE7- two small issues’ is closed to new replies.