CSS positioning seems to be becoming a nightmare when it comes to IE6 support. While I am aware that the likes of 37signals have stopped making their products work with it, there remain a lot of people who stick or are stuck with the old retainer. I am one of the latter because of the continued use of Windows 2000 at my place of work, though a Windows Vista roll-out has been mooted for a while now. If nothing else, it keeps me in the loop for any inconsistencies that afflict the display of my websites. Positioning of an element within the browser window rather than within its parent element is one of these and it looks as if specifying a position of relative in a stylesheet is part of this. Apparently, it could be down to its non-triggering of IE’s haslayout property. It might be a hack but I have found that static positioning has helped. I’ll continue to keep my eye out for a better solution if it exists but the static option seems to have no detrimental effect in IE7, IE8, Firefox, Safari, Chrome or Opera.
Tag Archive for Internet Explorer
Running Internet Explorer on Linux
On first sight, this probably sounds daft given how good Firefox is but you cannot ignore those surf the web using the ever pervasive Internet Explorer when doing some web development. Using virtualisation is a solution to the need but it can mean that you need to set up a web server with Perl, PHP, MySQL and the like in a virtual machine, all for a little offline testing and then there’s the potential for a lot of file copying too. Otherwise, you are trying to sneak things online and catch the glitches before anyone else does, never a good plan.
Therefore, having the ability to run IE to test your offline LAMPP set up is a boon and IES4Linux allows you to do what’s really needed. Naturally, WINE is involved so some flakiness may be experienced, even after the ever useful API library’s reaching version 1. Otherwise, all usually runs well once you work you way through the very helpful instructions on the IES4Linux website. I did get a misplaced message about the version of WINE that I was using and Python errors made a worrying appearance but neither compromised the end result: a working IE6 installation on my main Ubuntu box.
IE5 and IE5.5 are also on offer if you’re interested but, after looking at my visitor statistics, I think that I can discount these. IE7 and the work-in-progress IE8 make no appearance on the availability list. The absence of IE7 is not a big problem as it might appear because coding for IE6 sufficiently suffices for IE7, even now; IE8 may not be the same in this regard but we shall see. Even so, a later browser release does mean a more secure version and I reckon that including IE7 should be next on the project’s to do list. Saying that, what we have now is far better than nothing at all.
A case of “peekaboo” behaviour in Internet Explorer
I recently changed the engine of my online photo gallery to a speedier PHP/MySQL based affair from its PHP/Perl/XML powered predecessor. On the server side, all was well but a peculiar display issue turned up in Internet Explorer (6, 7 & 8 were afflicted by this behaviour) where photo caption text on the thumbnail gallery pages was being displayed erratically. As far as I can gather, the trigger for the behaviour was that the thumbnail block was placed within a DIV floated using CSS that touched another DIV that cleared the floating behaviour. I use a table to hold the images and their associated captions in place. Furthermore, each caption was also a hyperlink nested within a set of P tags. The remedy was to set the CSS Display property for the affected XHTML tag to a value of "inline-block". With a cascade of DIV, TABLE, TR, TD, P and A tags, finding the right tag where the CSS property in question has the desired effect took some doing. As it happened, it was the tag set, that for the hyperlink, at the bottom of the stack that needed the fix. Of course, it’s all very fine fixing something for one browser but it’s worthless if it breaks the presentation in other browsers. In that vein, I did some testing in Opera, Firefox, Seamonkey and Safari to check if all was well and it was. There may be older browsers like versions of IE prior to 6 where things don’t appear as intended but I get the impression from my visitor statistics that the newer variants hold sway anyway. All in all, it was a useful lesson learnt and that’s never a bad thing.
LVHA…
On my web design journey, I have learned the wisdom that CSS styles for hyperlinks should be defined like the following:
a:link {…}
a:visited {…}
a:hover {…}
a:active {…}
List out the names of the pseudoselectors and you’ll soon work out where they got LVHA: Link, Visited, Hover and Active. However, I have recently spotted the following being used:
a {…}
a:hover {…}
The trick here is to define your style globally and only define specifics for the relevant pseudoselector, hover in this example. It works well in the likes of Mozilla and Opera but Internet Explorer is another story. Even IE7 needs the LVHA treatment. I spotted this when I observed unexpected changes in the appearance of link text after visiting the link: visited links startes to change colour. While I know that the likes of Jakob Nielsen frown upon non-changing link colour, I choose to ignore this and keep it constant so following the LVHA approach is needed to keep things as I would like them.
Missing borders in Internet Explorer
It’s quite hard to describe this observation in a title so here goes with a longer description in a post. One thing that I spotted with the Prosumer theme used on this blog is that the links on the horizontal navigation bar underneath the mast head were not appearing as they should. The links have been formatted using CSS to appear in boxes with borders that are more apparent when you hover over them. In IE, the top and bottom borders were missing. After a spot of digging, I came up with the line-height property being the cause and I was right: the extremities of the boxes surrounding the text were being cut off because they exceeded the allotted space. As if to emphasise that IE7 isn’t as major a leap forward from IE6 as we would have liked, the problem affected that browser as well.
Aside: Link text colours weren’t being honoured by IE7 like they are by IE6, Firefox and Opera so another tweak to the CSS was needed.