SillyDog701

[Andrew T.]

On a number of pages on my website, I am having a problem with the rendering of elements within two DIV elements in older Gecko-based browsers (such as Netscape 7.1) and in Opera 7.54.

As a typical example, on this page, I want the left end of the horizontal rule at the top of the page to end to the right of the "Forward" image and FAQ link. It does render this way on Mozilla Firefox 1.0, but on Netscape 7.1 and Opera 7.54 the horizontal rule runs underneath or behind the image and link. In addition, the link itself can only be clicked when hovering the cursor above the upper half of the link and image.

The "Andrew Turnbull" graphic and "Forward" image/FAQ link are located in one DIV, with the horizontal rule and "What's New" caption enclosed in another.

What do I need to do in order for these elements to render the way I want them to on older Gecko-based browsers and in Opera? I assume I just need to tweak my CSS.

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)

[Antony]

Kindly to provide screenshots of rendering results in older Gecko browsers?

Otherwise, you can use [tt]<table>[/tt] elements.

UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.5.6 (KHTML, like Gecko) Safari/125.12

[Andrew T.]

The top image shows how these elements render in Mozilla Firefox 1.0; the bottom image is from Mozilla 1.4.2.

UserAgent: Mozilla/5.0 (Windows; U; Win95; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

[beanboy89]

Andrew, I have viewed your site in the following browsers: Mozilla 1.4.2, Mozilla 1.5, and Mozilla 1.7.6. I see the rendering problem you described in only Mozilla 1.4.2. Also, the problem extends to the main page of the Andrew Turnbull Network(Mozilla 1.4.2 Screenshot). The issue has appeared to be fixed in Mozilla 1.5 and newer.

UserAgent: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.6) Gecko/20050121

[Andrew T.]

Andrew, I have viewed your site in the following browsers: Mozilla 1.4.2, Mozilla 1.5, and Mozilla 1.7.6. I see the rendering problem you described in only Mozilla 1.4.2. Also, the problem extends to the main page of the Andrew Turnbull Network(Mozilla 1.4.2 Screenshot). The issue has appeared to be fixed in Mozilla 1.5 and newer.

Thanks for the screenshot, beanboy89. I've viewed the main page with Netscape 7.1 and Mozilla 1.4.2, however, and I've noticed that most of the time it renders correctly. Everything is shifted over to the tight, as in your screenshot, only if the font size is smaller than it usually is.
I call upon Trebuchet MS as the first font in my style sheet. In your screen shot the matter on the front page is set in Arial, which probably indicates that you don't have Trebuchet installed on your system. Arial must be slightly smaller than Trebuchet, which would explain why everything is shifted to the right.

I may need to consider making extensive changes to the site's style to keep things like this from happening.

UserAgent: Mozilla/5.0 (Windows; U; Win95; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

[Antony]

I would suggest using the old fashioned [tt]table[/tt] for the layout.

UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/125.5.6 (KHTML, like Gecko) Safari/125.12