thapole.net

Ok, I knew that Internet Explorer is highly integrated into the OS, but this issue was new to me…
Smooth 3 column layout, a navigation to the left, some teasers and a searchbox to the right. All three cols have a fixed width. The content area is filled up with a medium complex form. I used fieldset and legend attributes but I don’t want to have a border line all around the fieldset. So I give the fieldset a border:none and let the legend be underlined by a 1px div which has the full with of the parent div container. “All fine” I think and check it in into cvs. Some hours later my co-worker:

- “Hey, this form page you made … kinda messy, eh?”
- “Hu?”
- “The whole teaser area isn’t there where it is supposed to be.”
- “No it isn’t, look at my screen!”
- “Yes it is, look at my screen!”

After some hours of code comparison and several tests we finally figured out the problem. We both work with almost the same notebook, same OS (Windows XP with identical Service Pack and patch status) but different screen resolution (which couldn’t be the problem as we have a fixed layout here) and (here’s the crux!) different windows themes. I’m on “Windows Classic” theme and he has the standard Win XP theme. Funnily the Win XP theme adds a padding to the fieldset element (!!!) so all we had to do was adding a padding:0 to the fieldset css. To be honest, there are much more important things I am willing to waste my time with…
So as a conclusion for you WebDevs out there: Always test your layout on different Windows tehemes aswell
(Just to make another line on the Mozilla vs. IE list – Mozilla just behaved as expected and all was fine before and afterwards…)

Yay, first Coding post!
Needed a neat little submit button design today. Here’s what I ended up with:

As I wanted to have an rollover effect but IE doesn’t support usage of :hover with other elements than the a-tag, I decided to use a simple 3-liner for “on the fly (hover)” style switching:

function changeStyle(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}

Very simple, but quite useful for several circumstances. id is the unique id of the element I want to switch the style of, newClass is the style I want to switch to. Only disadvantage is the non-functional hover effect with disabled JS in Internet Explorer.

Here’s the CSS code:


input.fancysubmit {padding-left:3px; border:0; color:#fff; background-color:#abcdef; cursor:pointer; font-weight:bold; background-image: url(./img/pfeil_button_white.gif); background-repeat:no-repeat; background-position:left center;}
html>body input.fancysubmit {padding-left:12px}


input.fancysubmit:hover {padding-left:3px; border:0; background-color:#abefcd; color:#fff; cursor:pointer; font-weight:bold; background-image: url(./img/pfeil_button_white.gif); background-repeat:no-repeat; background-position:left center;}
html>body input.fancysubmit:hover {padding-left:12px}


/* workaround for wacky IE CSS2 implementation */
input.fancysubmitmouseover {padding-left:3px; border:0; background-color:#abefcd; color:#fff; cursor:pointer; font-weight:bold; background-image: url(./img/pfeil_button_white.gif); background-repeat:no-repeat; background-position:left center;}
html>body input.fancysubmitmouseover {padding-left:12px}


As you can see, I’ve added an background image. It is just a tiny arrow in this case, but there are several other possibilities for using the background. You can download my all-in-one HTML file and the image here:

Fancy button HTML source code

For those of you not that into browser hacks, the html>body makes IE ignoring the following style definitions. A good way to correct display problems concerning different box models of the browsers.