Outer Court

Tech - HTML4 - Bugs

No major browser has implemented CSS1/2 in its whole. Certain things, like a hover for links work just on one of the two major Win browsers. Microsofts IE4 has a rather good CSS implementation, but some things still won't work, like an initial letter. Here I'll list some bugs, problems or incosistencies among browsers, plus the workarounds if I know of one. If there's no workaround given then I need your feedback.

NN4 bugs

Width

Bug
If you set an elements width, for example a header with a certain background-color, NN4 will only make it as wide as the content goes.
Workaround

Set the elements border to 1px.

Relative paths

Bug
If you link to an external stylesheet in a folder above or below the actual HTML file, MSIE4 and NN4 handle relative URI's differently.

MSIE4 will look for the file relative to the position of the stylesheet, while NN4 will look for it relative to the HTML file the stylesheet is linked from. One obvious way to escape the bug is to put the stylesheet in the same folder with the content. But this would mean you cannot use folders anymore to structure your files.

Workaround

Put the stylesheet not in the same folder as the content, but in the same level. For example, you have some files in folder "newfiles" and some in folder "oldfiles", but you want the included HTML files to share the styles. You'd put a folder "style" in the same level with a stylesheet and refer to it from the HTML files inside "newfiles" and "oldfiles" as "../style/screen.css". Inside the stylesheet, for example to refer to a background-image inside the "style" folder, you could now write background-image: url(../style/back.gif). See path sample image.

Font size

Bug
NN4 messes up font size inheriting.

Also, if you use relative (percentage) units for headers, the one browser will use it relative to the headers original size, while the other browser will use it relative to a normal text size. Another problem is that even absolute font-sizes will look different on certain systems (like smaller on Mac) or even certain browser on one system (like NN4 Win will be smaller then MSIE4 Win).

Workaround

Don't use relative font-sizes. If you have to set one heading size, set all other h sizes as well to keep proportions. Try pixel units for fonts.

Transparent backgrounds

Bug
NN4 sometimes doesn't render transparent GIF's you use as background-images when overlaying with other backgrounds.

List indention

Bug
If you use margin-left: 0 with a list element, NN4 will use this margin relative to its own default margin for lists.

You could of course set the margin-left to a negative value, but then it would look bad in MSIE4.

Workaround

No real workaround, but since NN4 can't display list-style-images for some situations it helps to use negative margin and correct this with a list-style-image the width of the negative margin.

Resizing

Bug
Stylesheet pages are messed up as soon as the NN4 browser window is resized. The window has to be reloaded to be correct again.
Workaround

No easy solution, but there's a JavaScript workaround at WebDeveloper (see Webdesign links).

JavaScript

Bug
If JavaScript is turned off in NN4, Stylesheets will be off as well.

Unknown tags

Bug
If you use <abbr> or <acronym> in N4 on a stylesheet page, the browser may crash or display content falsely.

MSIE4 Mac bugs

Style media

Bug
On a Mac Explorer the print stylesheet is added to the screen stylesheet.
Workaround

First link to the media print, then link to media screen and revert all print settings within the screen styles, like if you hide all online banners for print, use .onlinebanner { visibility: visible } for screen.

 
Basic
Goodies
Design
Tech
Email
Make a donation