I came back inside, did a backup, and checked my email. After that I did some work on my photo website.
I am using Ryan Fait's Sticky Footer technique on my site. But in IE8, the footer wasn't sticking to the bottom of the page. Saving my page in Firefox, then bringing it into IE8 and editing it until it worked, I found out what the problem was.
In the page code saved from firefox, the
.push div looked like this:<div class=".push"/>
<div class=".push"></div>
<div class=".push"></div>
I posted about using an XSL Stylesheet to send XHTML/HTML/XML to browsers that don't support XHTML natively the other day. Because in my XSL stylsheet I wasn't using the
output processing command, it seems that the XSL stylesheet was processing the page as XML, so an empty element like <div class=".push"></div>
<div class=".push"/>
However, what is strange is that the same page works in IE6 and IE7 okay, even though they receive the same as IE8. I guess something has changed in the XSL processing in IE8, though I thought that IE didn't come with XML processing built in, but instead used whatever version of MSXML you had installed. Possibly the Virtual PC disk image of IE8 I downloaded has a different version of MSXML to the one installed on the IE6 Virtual PC disk image (and a different version to the one I have installed in Vista).
Another strange thing is that with the page I had saved from Firefox, the code for a textarea was saved as a self closing tag like
<textarea/>. Viewing the page in IE8, this meant that all code after the textarea appeared in the textarea, and the page ended there (since the textarea wasn't closed with a separate </textarea> tag). However, this doesn't happen when the actual page is served to IE8 with the XSL Stylesheet.Similarly, when the page is saved from Firefox, all the script tags become self closing
<script type="text/javascript" href="/path/to/file.js"/>. Loading the saved page in IE, none of the scripts are included because the closing </script> tags are missing (as far as IE's concerned). Yet with the page served from the server with the XSL Stylesheet, IE8 will load all the scripts okay.So it's not just a simple case of the XSL Stylesheet converting empty tags to self closing tags in IE8. Why the empty div doesn't work in IE8 when served XML with an XSL Stylesheet, but empty textareas and script tags do work, I don't know.
Anyway, the answer of how to get IE8 to make the sticky footer work properly is to use the
output processing command in your XSL Stylsheet, and make sure you set the method attribute of the output to "html".After that I changed my photo website to use .xhtml as the file extension (after only changing the file extensions from nothing to .xml a few days ago). I thought xhtml actually gave a better description of the page content, and also lets me save a page along with its associated javascript and css files in firefox. With the .xml file extension, you can only save the page.
Being able to save a page along with the associated javascript and css files is very useful in helping to debug problems (normally in IE). It means you can remove all excess code until you're left with the very basics, which is much easier to debug and also much better for posting on forums for advice on what the problem you're having is.
After getting that working, I tested the website in Konqueror. The first problem I had was that when I tried my website in Konqueror, while the homepage would load okay (albeit without javascript loaded), any other page I tried to access, I would get prompted to download an xml file. Obviously Konqueror doesn't accept XHTML or XML. So I changed my page to send xhtml if supported, then xml if supported, then html as a last resort.
After changing this I still had some problems in Konqueror - I had forgotten to add the
DOCTYPE declaration for browsers being sent html, so Konqueror was rendering the page in BackCompat (Quirks) mode. After fixing that, Konqueror rendered the page okay (no rounded borders though).I did a bit of work on the photosite blog, then it was lunch time.
After lunch I went on Animal Crossing, then did some more work on my photosite blog.
It seems that my fix for Konqueror to send text/html to browsers that don't support xhtml or xml didn't work too well. In IE8, now if you refresh the page, you will be greeted with an xml view of the page code rather than the actual page.
It's very strange. When you first request the page, IE8 sends the following headers (xml is in the Accept string):
The server sends these headers back to IE8 (sends xml):GET /blog/ HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-shockwave-flash, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, */*
Accept-Language: en-us
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: www.photosite.com
Cookie: __utma=121171401.1818035883.1253039791.1253789572.1253805469.7; __utmz=121171401.1253039791.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmb=121171401.2.10.1253805469
When you refresh the page IE8 now sends these headers (xml isn't in the Accept string now):HTTP/1.1 200 OK
Date: Thu, 24 Sep 2009 15:21:26 GMT
Server: Apache/2.2.11 (Ubuntu) DAV/2 SVN/1.5.4 mod_ssl/2.2.11 OpenSSL/0.9.8g
X-Powered-By: PHP/5.2.6-3ubuntu4.2
X-Pingback: http://www.photosite.com/blog/xmlrpc.php
Set-Cookie: PHPSESSID=c8ef0107e12cdbedcacc41b52937e300; path=/
Cache-Control: private, must-revalidate, post-check=0, pre-check=0
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml; charset=utf-8
So the server sends back these headers (sends html)GET /blog/ HTTP/1.1
Accept: */*
Accept-Language: en-us
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: www.photosite.com
Pragma: no-cache
Cookie: __utma=121171401.1818035883.1253039791.1253805469.1253805688.8; __utmz=121171401.1253039791.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmb=121171401.1.10.1253805688; __utmc=121171401; PHPSESSID=c8ef0107e12cdbedcacc41b52937e300
So it's as if when you refresh a page in IE, it doesn't let the server know what content type it will accept, and whatever it receives, it will treat the same as what it received when it first requested the page.HTTP/1.1 200 OK
Date: Thu, 24 Sep 2009 15:22:34 GMT
Server: Apache/2.2.11 (Ubuntu) DAV/2 SVN/1.5.4 mod_ssl/2.2.11 OpenSSL/0.9.8g
X-Powered-By: PHP/5.2.6-3ubuntu4.2
X-Pingback: http://www.photosite.com/blog/xmlrpc.php
Cache-Control: private, must-revalidate, post-check=0, pre-check=0
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 3196
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
To fix this, I changed my code so it will serve xml to any browser that doesn't accept xhtml and does accept xml or only accepts '*/*' (which I think is IE8 when refreshing a page).
In the evening I did a Japanese lesson, and then carried on working on my photo website. I spent quite a bit of time trying to get IE6 to apply a min-width to the page. Googling found a few answers, but the ones that didn't use javascript or CSS expressions didn't seem to work for a full page. e.g. cssplay.co.uk IE6 min-width example
- if you make the window small, the boxes that have min-width applied will shrink to the minimum width correctly, but all other content on the page will carry on shrinking past the min-width. When I tried to apply it to the whole page, I couldn't get it to work.
However, I did find an answer on how to make min-width work in IE6, which involves extra markup of 3 divs that contain your whole page. I tried using
html, body, and one div instead, but that didn't work. My page seems to be getting a bout of divitis, with all the extra divs needed for making things work in IE6, and the sticky footer.Also, while doing this, I found that IE6 was now rendering in standards mode. It's obviously due to changing the XSL Stylesheet to omit the xml declaration, but strange how when I tried the same thing the other day, IE6 would still render in quirks mode.
I did another Japanese lesson with Moccle, then did some more work on my photo website. Until now I'd managed to get away with only having a separate CSS stylesheet for IE6, but I found that IE7 doesn't render inline-block list items correctly - it renders them as block level elements. So I had to add a conditional stylesheet for IE7.
I did a backup, then went to bed.
The weather today started off with a clear blue sky, and nice and sunny. During the day cloud started to build up, though it was still mostly sunny. By sunset it was mostly overcast, and though there was a bit of a sunset, there wasn't much to see (especially compared to yesterday).
Food
Breakfast: Blackberry and apple jam toast sandwich; cup o' tea.
Lunch: Ham with mustard and salad sandwich; banana; 3x plums; Rocky; cup o' tea.
Dinner: Slice of pepperoni pizza; chips; salad; ground black pepper. Pudding was Jamaica Ginger cake with golden syrup and custard (again). Coffee; Piece of Tesco's cheapo chocolate.
No comments:
Post a Comment