The Old I.E problem (sigh) WordPress
- SOLVED
New WP site is up and running and as far as I can tell, loading reasonably well in all current browsers - FF, IE8, Opera (ok, maybe a slight bug at the foot of the page) and Chrome. Don't know about Safari, but fingers crossed ;)
However, the site is degrading very badly (unusably) in old versions of IE . . .
[[LINK href="http://www.tagweb.co.uk/french-waterways/"]]Take a look at the WP website here[[/LINK]]
You clever people can probably extract the relevant CSS code but for simplicity the relevant bit runs:
/* START NON-SCROLLING CSS */
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
/* Gives a html / body size of 100% x 100% with no scroll bars on which we can place a header and footer using position absolute in the normal way. The
header and footer will stay fixed because the body cannot scroll. */
body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:auto; /*get rid of scroll bars in IE */
}
/* This gives you a full height content div. */
#main { display:block; /* set up as a block */
height:100%; /* set height to full page */
max-height:100%; overflow:auto; /* add scroll bars as required */
position:relative; /* set up relative positioning so that z-index will work */
z-index:1; padding-top: 205px; /* allocate a suitable z-index */
}
#header { top: -10px; display:block; height:185px; z-index:990; visibility: visible; margin-left: -20px; }
#header {position:absolute;}
/* END NON-SCROLLING CSS */
How should I amend/hack this to make the site a little more old-IE friendly? Thanks
Answers (3)
Lew Ayotte answers:
Hi Nick,
You'll probably want to implement some IE6/IE7 only CSS hacks.
You can call CSS files that are only called in certain version of IE by adding this code to your header.php (under the main css call).
<!--[if IE 6]>
your ie6.css file
<![endif]-->
<!--[if IE 7]>
your ie7.css file
<![endif]-->
So your header.php would look something like:
<link rel="stylesheet" type="text/css" media="all" href="http://www.tagweb.co.uk/french-waterways/waterpress/wp-content/themes/twentyten/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="http://www.tagweb.co.uk/french-waterways/waterpress/wp-content/themes/twentyten/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="http://www.tagweb.co.uk/french-waterways/waterpress/wp-content/themes/twentyten/ie7.css" />
<![endif]-->
But, frankly, I wouldn't worry about IE6...[[LINK href="http://www.w3schools.com/browsers/browsers_explorer.asp"]] it has a very small market share[[/LINK]].
NickStrong comments:
Hi and thanks.
Yes, I was aware that one could direct IE to a specific CSS file, as you indicate. I'm only concerned about IE7 - as you say, IE6 is far too old to worry about. Even IE 7 is now 6 years old, I think. But still has a large legacy user base.
Anyway, what I really need are the actual alterations/additions necessary to my basic static header etc CSS to make the darn thing work in IE7, potentially to include in an ie7.css file :)
Pippin Williamson answers:
First, try changing position: absolute; to position: fixed; for the header. Then let's go from there.
NickStrong comments:
I can't answer my own question, but I think I've solved it myself, with a bit of hackery.
The answer was / appears to be . . .
1) DELETE LINES
height:100%; /* fix height to 100% for IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
2) ADD IN IE SPECIFIC CSS (to correct resultant layout problem)
#header { *right: 180px; *width: 980px; }
If anyone wants to add any further improvements (and bid for the Winner's premium) this would be welcome.
Pippin Williamson comments:
I see that you've fixed some of the issues, but when I look at it in IE 7, the main content section doesn't scroll at all, and the footer scrolls up over the main content.
Change your #header position to "fixed". This should make a huge difference.
NickStrong comments:
Hi Pippin and thanks for the comment.
Hmmm - I've been testing in IE8 "compatibility mode" which did show the main section not scrolling, but the footer scrolling over it . . exactly as you report. But now I've changed the CSS as described above it doesn't.
I wonder if you checked out the site just before I made the change to the online styles.css (having created the change offline), or perhaps the previous is cached and you could try a Ctrl+F5 refresh?
It does seem ok to me now . .
I will certainly also make the "fixed" change.
Pippin Williamson comments:
Ok, I do see the updated one now. Much better. But now the #main section is pushed over to the right in IE 7.
You should add something like this:
#ie7 #main {
position: relative;
left: -20px; /*adjust this accordingly*/
}
Of course, you should also add a conditional statement for IE (or use a special stylesheet) so that you can use #ie7 #main.
Denzel Chia answers:
Hi,
I am not after your price money, just feel that it is unnecessary to fix the header and menu.
Fixing it adds no value to UI or design, just create unnecessary problems.
If you view from an iPad safari, your menu overflows to next line and covers the post title.
You should not fix your header and menu, let them flow naturally so that it pushes down the post title and not hide it when viewing with a iPad, <strong><em>unless you don't care about viewers using iPad? Do you think its market share is low?</em></strong>
if you really need to fix things in IE, please use a IE conditional tag, so as to spare other browsers from the misery.
If you are worrying about user's difficulty in scrolling up to menu, your top of page link is sufficient to tackle this issue.
Thanks.
NickStrong comments:
Completely disagree.
I know it well and my audience is not - currently - using iPads. They are more likely to be using IE 5 or 6! (which I'm also not going to worry about).
For me, the value of having the site's main heading, navigation sections and branding fixed is significant - just like any other piece of software anyone uses - every browser for example. It may not be the 'blogging norm', which I find very user-unfriendly; constantly having to scroll the page back to the top to achieve anything. The site, with a similar structure (fixed header) has been up and running for 5 years or so and I know how much it is appreciated by my target audience (both via feedback and viewing figures) - you might say, warts and all.
Anyway, thanks for the comment. We disagree, but such is life. In the fullness of time I will indeed create a specific handheld css, optimised for those kind of devices. :-)