Box model hack
It should not be necessary to use CSS filters (css style sheets with definitions for different browsers) or CSS hacks – IN A PERFECT WORLD.
Unfortunately the world is not perfect, and in order to get your stylesheet to work under IE5.0 or IE5.5 you will need to know about the box model hack. Luckily for everybody these browsers are fast disappearing from view.
The problem really is that early versions of Internet explorer defined a ‘box’ in a different way from modern browsers.
IE5 says that the width element of a box is the total width including padding, borders and margins. IE6 and Firefox reckon that a box width is a measurement of the inner part of the box prior to padding and margins being added.
It is possible to add some CSS commands telling browsers to measure a box to the outside rather than the inside, but this is not the preferred solution. The most common solution is to create some CSS which can only be recognised by IE6.0 and Mozilla and to add a width element for these browsers which is different from the default width element.
The CSS declaration below illustrates the point:
#topbar{
width:494px !important;
width:560px;
width/**/:/**/494px;
height:31px;
height/**/:/**/26px;
position:relative;
}
The first ‘width’ given can be read by Firefox and Opera – the priority !important tells the browser to use this width rather than any other – declared in subsequent stylesheets.
The second ‘width’ measurement is for IE5.0 and IE5.5
The final ‘width’ measurement is for IE6.0 – IE5.0 and IE5.5 cannot recognise this as a valid command due to the comments /**/ in the middle of the declaration.
To find out more about the box model hack see http://www.tantek.com/CSS/Examples/boxmodelhack.html or type ‘box model hack’ into Google for a very wide range of discussions on this issue.
Two other hacks that are worth motioning are the ‘holy hack’ which corrects problems in IE5.0 and IE5.5 by adding a height of 1% to an element.
Another annoying problem with IE5.0 and IE5.5 is that they have problems rendering italics in a box. The lean of the letters cause the box to be expanded. The solution is to set overflow:visible for italics styled fonts! I have no idea why this works.
Producing tweaks for various browsers is by far the most time consuming part of stylesheet work. Firefox is somewhat more reliable that Internet Explorer when it comes to interpreting style sheets but there is really not much to choose.
There are a couple of very annoying problems that I came across when working with the AHS home page given below in no particular order:
- the margin and padding for img varies for different browsers
- IE adds padding on for <form>
- There is some default padding in or around images which creates very slightly different layouts from the former table layout. To see this compare http://www.lsbu.ac.uk/ahs/index_v2.shtml with http://www.lsbu.ac.uk/ahs/index_old.shtml
Setting margins and borders to 0 does not seem to sort this out
- You need to recode image maps to work properly under CSS2/XHTML strict.
- XHTML strict does not support target=”_blank” you would need JavaScript to recreate this functionality.
- Slight differences exist between IE6.0 and Firefox when it comes to padding. These are annoying but can be overcome by using very careful measurement for the different elements. To see this look at http://www.lsbu.ac.uk/ahs/index_v2.shtml in Firefox and compare the headings with Internet Explorer.
The final corrected version of the AHS homepage can be viewed at
http://www.lsbu.ac.uk/ahs/index_v2.shtml
From this I only made one or two very minor tweaks before going live with
http://www.lsbu.ac.uk/ahs/index.shtml
It is worth noting that the new source code fits on 87 lines as opposed to the former code on index_old.shtml which was 276 lines.
|
