Notes on CSS and XHTML rendering bugs in various web browsers.

Web Technology:CSS Bugs
Control the page:
Show table of contents,
Change page style,
Adjust text size
W3C standards and compliance
T
C
F
<

The World Wide Web Consortium or W3C is a standards group that publishes recommendations for various web technologies include XHTML, CSS, XML and others. The recommendations come out every few years and then it is up to the software makers to write their products to be compliant with the specification. These standards are important because they, at least in theory, provide a uniform way to compose documents that will be rendered by products from different firms in a somewhat consistent and predictible way. Here is an outline of improper rendering in current browsers.

Mozilla 1.3.1 on Windows
<
<div style="display: inline; border: 1px solid #000000"> <img src="some_picture.jpg" /> </div>

The border will not cover the entire picture.

popup = window.open('file.html', /*other options*/); popup.document.getElementById('photo').src = "some path";

Let us assume that the element contained in file.html by the id of photo is an img tag. Mozilla not return the element from the getElementById function. The above code works fine in IE 6 service pack 1.

When using XHTML 1.0 Strict, Mozilla will add two pixels of padding to the bottom of images appearing inside table cells. Thus far I have not found a way of removing this padding with the help of CSS. In compatibility mode or under HTML 4.01, this is not a problem.

The CSS page-break-inside: avoid; directive does appears to be ignored, this problem has been fixed in version 1.5.

<td border: 1px solid black"> <img src="some_picture.jpg" /> </td>

The border around the table cell will be enclosing more than the picture. There will be additional padding below the image. This only a problem when using XHTML DTDs and still it appears in version 1.6.

Internet Explorer 6.0 service pack 1 on Windows
<
<div style="margin-left: auto; margin-right: auto; width: 500px"> some content </div>

The above will not center the section, unless the page absolutely complies to the XHTML 1.0 Strict DTD. If the page includes the standard XML header (represented below), this will not work either. Proper headers are described in Simple website templates section.

<?xml version="1.0" encoding="ISO-8859-1"?>

The same is true of borders around images, it does not recognize the padding attribute if such as provided.

<img src="pic.jpg" style="border: 1px solid #000000; padding: 2px;" />

Internet Explorer does not properly set the disabled attribute of linked stylesheets. Multiple stylesheets can be attached to a page using the link tag and setting the rel attribute to "alternate stylesheet". The disabled attribute of all link tags containing references to stylesheets will be returned as false, even the default stylesheet.

The JavaScript image object has an attribute complete. This attribute is set to true when the image has been completely downloaded or an attempt to download it has failed. IE sets it to false if the download attempt has failed.

A general note of caution about IE, it is a steaming pile of $#!7. Debugging JavaScript problems takes a significantly longer period than with Mozilla since IE error messages are nearly useless. In addition, Javascript in IE tends to have more bugs in the implementation.

The CSS page-break-inside: avoid; directive does appear to be ignored.

Internet Explorer 5.2 on Mac OS
<

Object.offsetWidth in JavaScript returns the absolute available width for this object, not the amount of space it actually takes.