Posts Tagged ‘css’

I promised a test case for my latest problem and here it is: Gecko’s stubborn legend.

A few things worth noting:

1. In reality the yellow background will be a gradiant background image within each box, so I can’t just apply the background to the form.

2. Opera starts out displaying the upper form as FireFox does. The addition of position: relative (with no top, left, etc.) to the styles for legend magically changes that.

3. IE7 breaks the * html hack so some further work will be needed to align the legend horizontally without breaking things in any other browser.

4. Gecko doesn’t seem to apply float or display (except display: none;) to legend elements at all.

Continuing from my last post, I discovered that both IE7 and IE6 were behaving badly and that I needed to feed different CSS to these browsers than to Opera, Firefox, etc.

But IE7 has rendered most of the CSS hacks useless. The normal solution is to use Conditional Comments to include an additional stylesheet. But that wasn’t an option as I wasn’t prepared to get into the whole hassle of learning how to change the Live Journal HTML.

I thought I had a solution. Use the IE specific CSS expressions (basically small pieces of JavaScript embedded inside CSS properties) to feed different values to IE.

top: 2px;
top:  expression(26 + "px");

It’s nasty, it’s not valid CSS, it will no doubt break in some browser or other, but it seemed to work when testing locally.

Live Journal wouldn’t have any of it, their CSSproxy said:

/* suspect CSS: potential scripting: expression */

So for now, I’m using the Owen Hack:

div.title { top: 26px; }
head:first-child+body div.title {top: 2px;}

Which may or may not get broken as IE continues to improve Which doesn’t work in IE7 because between whenever I last checked and the current beta they improved its support for the more exotic selectors without fixing the many bugs in its handling of basic things like floats and margins.

Very True Mood:  annoyed

Via a newsgroup post:

A stylesheet used on a MicroSoft web site: http://connect.microsoft.com/Styles/GeneralStyles.css. And just in case they edit it, the first few lines read -

/* fix for the IE 1px-off margin error */
* html .StupidIEMarginHack
{
margin-right: 1px;
}

* html .StupidIEWidthHack
{
width: 100%;
}

Even MicroSoft’s own web developers are fed up with IE‘s CSS shortcomings.

Very True Mood:  cheerful

The browser with the rather unwieldy name of Internet Explorer 7: Beta 2 Preview – released on March 20th is, as the name hints, here and the usual suspects are talking about it.

This release is feature locked as far as site rendering is concerned. So time to start checking your CSS, etc. I’m happy to see that the problems with the book covers in the side bar are fixed, and as conditional comments are also working now I can hide the covers from older IE versions and show them to IE7. (But remember, if you have multiple copies of IE installed they will all use the version number of the ‘main’ copy. So check your conditional comments are working on separate test machines or use browser cam.)

One bug that’s still outstanding is that links with display:block in some case only respond to mouse hovers and clicks on the text and in other cases respond to hovers and clicks anywhere in the block. I think the deciding factor is float related but I need to create some test cases to check. Unless anyone can point me towards someone who’s already done the work?

Very True Mood:  optimistic