Customized Suzuki Intruder in French village
Photo: Copyright © 2014 Eelke Blok

CSS Woes

Recently, I've changed the way sponsors are displayed on the site of the Mini Seven Club Nederland. I used a fair bit of CSS (Cascading Style Sheets) for this, and I ran into two strange problems; it was no longer possible to select text in Internet Explorer, and text on the phpBB forum would be positioned incorrectly. Because it was hard to find information on these problems, I'm posting it on my blog, so that it may be helpful to others.

Both problems were an (indirect) result of moving the sponsoring from a separate frame at the bottom of the screen to a div to the right of the page.

Internet Explorer 6 text selection problem

First, the stranger, but also better known of the two problems, the selection problem in Internet Explorer. Basically, whenever the user tried to select text on the site, all content (text and images) up to the start of the intended selection would be selected, and nothing else. Googling for information, I quickly found this is caused by a bug in Internet Explorer 6, which crops up whenever the page contains more than a few divs.

The solution is as obscure as the problem; the following JavaScript should be placed right before the closing body tag of the troublesome page:


<script type="text/javascript">

document.body.style.height = document.documentElement.scrollHeight+'px';

</script>

Firefox text/div misplacement problem

On to the second problem, which reared its ugly head on the phpBB forum running on the site. After the move to sponsor logos on the right of the page, and the associated changes to the forum layout, suddenly text for individual forum posts was misplaced in Firefox; it would be placed either too high or too low, as can be seen in the below screen fragment:

{mosimage}

Of course, just placing the sponsoring to the side wasn't in itself the cause for this. However, to stop forum posts from running too wide (because of users placing content that would prevent the text to properly wrap around, such as big images or long URLs) and thereby obscuring the sponsoring (disliked by the sponsors, and also just plain ugly), each post's text was placed in a div of its own, with a fixed width in pixels and with the CSS attribute overflow:auto set, so that scroll bars would be displayed for content that is wider than the set width. These divs, it seemed, were not properly placed on the page. The problem was seen both in Firefox 1.0.x as well as 1.5, although it seemed it didn't occur as much in the latter.

It was quickly found that when reloading the page, the problem would be corrected. Also, the few references that I found when Googling the problem suggested there is a subtle bug in the pre-rendering of pages. When loading a page, Firefox already starts rendering it, eventhough not all elements may be loaded yet. This in itself is fine, as long as the calculations are redone when new content elements are complete, and the page redrawn if initial estimates of their size proove to be wrong. Apparently, in certain circumstances (I suspect it has something to do with the post containing divs being placed inside tables), this does not happen. Obviously, when doing a reload, the page is redrawn and with all the information available, everything is placed correctly.

After investigating all kinds of changes to the actual HTML structure (hoping I would circumvent the bug that was causing this - nothing worked - or I couldn't get it to work in the limited time I had), I decided to simply force a redraw by using JavaScript to manipulate the width of the main content div (which contains most of the page's layout, including all forum posts). The rational was that when the width of the main content container is changed, the browser will have to recalculate the position of all elements.

I ended up reducing the div's width by 1 pixel both on the onload event of the window, so that the redraw is forced when the page is completely loaded, as well as after a delay of five seconds after opening the page, to prevent elements that take a long time to load (such as images, from sites that are either slow or just unavailable, placed by users) stopping the resizing to occur in a timely fashion. I used the following code for it (it contains a check for Gecko-based browsers, because it was causing JavaScript errors on Internet Explorer):


<script type="text/javascript">

function redrawContent() {

    var contentWidth=document.body.childNodes[11].offsetWidth;

    document.body.childNodes[11].style.width = contentWidth-1 + 'px';

    return;

}

if(navigator.product=='Gecko') {

    window.setTimeout('redrawContent()', 5000);

    window.onload=redrawContent;

}

</script>

Do take note that you can not use this script as is; you will have to adapt it to your particular page. Above, the childNodes[11] is the main content div I am manipulating, and the actual element you should be manipulating is completely dependant on the structure of your page. You can use the DOM inspector in Firefox or the IE Developer toolbar to find how to address the element you chose to (ab)use for this purpose.

Hopefully, the above helps someone that ran into one of these problems.

Add new comment

Category