Weird rendering in Mozilla/Firefox

[SpaceGirl]

http://www.subhuman.net/temp/test.htm

This page is fully validating XHTML. In IE this page renders perfectly
(there's a first! ), but under Mozilla & Firefox the DIVs sometimes expand
deeper than they should, and for the life of me I cant work out why. You can
see the effect at the bottom edges of the two main boxes. Oddly, if you keep
hitting refresh, eventually Moz will display it correctly. Hit refresh one
more time and it gets it wrong again. Grrr. It might be missing something
really obvious, but a fresh set of of eyes wouldn't do any harm.

(This code is usually generated on the fly, but I copied the source to one
of my boxes as I dont have an exposed IP address here at my clients
offices).

 

[Els]

http://www.subhuman.net/temp/test.htm

This page is fully validating XHTML. In IE this page
renders perfectly (there's a first! ), but under Mozilla
& Firefox the DIVs sometimes expand deeper than they
should, and for the life of me I cant work out why. You can
see the effect at the bottom edges of the two main boxes.
Oddly, if you keep hitting refresh, eventually Moz will
display it correctly. Hit refresh one more time and it gets
it wrong again. Grrr. It might be missing something really
obvious, but a fresh set of of eyes wouldn't do any harm.

I get a log in page, in which I can't see much difference
between IE and Firefox. The only thing being that Firefox lets
go of the none found images.

<quote>
Please wait
vOpen is loging you in...

log in
Username
Password
</quote>

In the code I noticed there is quite some white space before
the doctype. Maybe that does some harm?

(and logging is with two g's ;-))

 

[SpaceGirl]

I get a log in page, in which I can't see much difference
between IE and Firefox. The only thing being that Firefox lets
go of the none found images.

The bottom edges of the document in Moz have a weird double tile (at least
on this machine). Not sure what you mean about 'none found images'?

<quote>
Please wait
vOpen is loging you in...

log in
Username
Password
</quote>

In the code I noticed there is quite some white space before
the doctype. Maybe that does some harm?

I thought that too, but doesn't make much difference. Like I said this code
is generated, and for some really stupid reason, Apache Tomcat echos blank
lines whenever blocks of JSP are parsed, which is why there are massive
spaces in the markup. I'm not writing the code behind this site, just the
front end. I did ask if they could kill the spaces and they looked at me as
if I was daft.

(and logging is with two g's ;-))

My bad

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Thanks!

 

[SpaceGirl]

I get a log in page, in which I can't see much difference
between IE and Firefox. The only thing being that Firefox lets
go of the none found images.

<quote>
Please wait
vOpen is loging you in...

log in
Username
Password
</quote>

In the code I noticed there is quite some white space before
the doctype. Maybe that does some harm?

(and logging is with two g's ;-))

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Oh my @import was broken; that was tripping the browsers up too. Could you
have a look again?

 

[Els]

The bottom edges of the document in Moz have a weird double
tile (at least on this machine).

That's because you wrote this in the code:
<base href="http://localhost:8080/vopen/" />

And this:

<style type="text/css" media="screen">
@import url(css/vopen.css);
</style>

I don't get your stylesheet :-D
(my localhost only holds my own stuff ;-))

Not sure what you mean
about 'none found images'?

There are a couple of images, which in IE get the regular
space left open, with a red little cross in it.
Firefox starts of showing the same (space, with red cross),
but then displays plain blank space, no border, no cross,
nothing to indicate there should have been an image there.

I thought that too, but doesn't make much difference. Like
I said this code is generated, and for some really stupid
reason, Apache Tomcat echos blank lines whenever blocks of
JSP are parsed, which is why there are massive spaces in
the markup. I'm not writing the code behind this site, just
the front end. I did ask if they could kill the spaces and
they looked at me as if I was daft.

Just look back at them. They're the daft ones.
Upload a stylesheet, and I'll have another look

 

[SpaceGirl]

Just look back at them. They're the daft ones.


Upload a stylesheet, and I'll have another look

Done! Thanks...

 

[Steve Pugh]

http://www.subhuman.net/temp/test.htm

This page is fully validating XHTML. In IE this page renders perfectly
(there's a first! ), but under Mozilla & Firefox the DIVs sometimes expand
deeper than they should, and for the life of me I cant work out why. You can
see the effect at the bottom edges of the two main boxes. Oddly, if you keep
hitting refresh, eventually Moz will display it correctly. Hit refresh one
more time and it gets it wrong again. Grrr. It might be missing something
really obvious, but a fresh set of of eyes wouldn't do any harm.

There seem to be two problems.

IE6 is getting the margin-top:100px; wrong on DIV#login and hence is
placing the login box far to high on the page.

Opera and Mozilla are adding some extra space under the image in the
footer and thus the background image shows through, creating the extra
blue line. This can be fixed by adding
div#foot img {display: block;}
to your styles.

Images are inline elements and thus sit on the text baseline. The text
baseline must be above bottom border of the containing div (to allow
room for letters with descenders). By changing the image to a block
the whole issue of baselines and line boxes goes out of the window.
Google for more a in-depth explanation - I gave one in April of this
year.

Oh and the page is usable but messed up in IE5, but you probably
expected that.

Steve

 

[Els]

Done! Thanks...

Steve got there before me, I just have to add one thing:
the same happens on the bottom of the login.bottom.gif, and I
suppose it happens on vopen.top.gif too, although invisible, I'd
add img{display:block;} and fix all instances at the same time.

 

[SpaceGirl]

There seem to be two problems.

IE6 is getting the margin-top:100px; wrong on DIV#login and hence is
placing the login box far to high on the page.

Yes tryign to work that one out!

Opera and Mozilla are adding some extra space under the image in the
footer and thus the background image shows through, creating the extra
blue line. This can be fixed by adding
div#foot img {display: block;}
to your styles.

*sighs* I should know better...

Images are inline elements and thus sit on the text baseline. The text
baseline must be above bottom border of the containing div (to allow
room for letters with descenders). By changing the image to a block
the whole issue of baselines and line boxes goes out of the window.
Google for more a in-depth explanation - I gave one in April of this
year.

Your fix work perfectly, of course... I wasn't thinking. Like I said, it'd
be something obvious Thank you so much! I appreciate the time take to
look.

Oh and the page is usable but messed up in IE5, but you probably
expected that.

Steve

Not sure what to do about IE5 users yet... I'll probably use an alternate
CSS file. But of course I dont have access to IE5 any more since I upgraded
my laptop a few weeks ago. Grrr.

Thanks again!

M.

 

[Els]

Not sure what to do about IE5 users yet... I'll probably
use an alternate CSS file. But of course I dont have access
to IE5 any more since I upgraded my laptop a few weeks ago.

IE 5 displays just fine if you add body{text-align:center;min-
width:705px} to the stylesheet.
(min-width being added to prevent losing your content on
narrow windowed gecko's)

 

[rf]

Not sure what to do about IE5 users yet... I'll probably use an alternate

CSS file. But of course I dont have access to IE5 any more since I upgraded
my laptop a few weeks ago. Grrr.

It's quite posible to run more than one version of IE on the same computer.

Google for multiple internet explorer versions. It's the first hit.

 

[SpaceGirl]

Not sure what to do about IE5 users yet... I'll probably use an alternate

It's quite posible to run more than one version of IE on the same computer.

Google for multiple internet explorer versions. It's the first hit.

What can I say, you guys rock!

I have IE 5 and 5.5 running on here prefectly... the site works on both,
Mozilla displays correctly too!

Thanks all!

 

[SpaceGirl]

IE 5 displays just fine if you add body{text-align:center;min-
width:705px} to the stylesheet.
(min-width being added to prevent losing your content on
narrow windowed gecko's)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Perfect! Thanks again Els!