Forum Moderators: open

Message Too Old, No Replies

Div height in ems - IE 6 is different between localhost and remote host

         

smartymarty

1:27 am on May 13, 2004 (gmt 0)

10+ Year Member



Hi
I've got a lot of text content that I want to be in a smaller, scrollable box. To do this, I'm using a 'div' container, setting the 'overflow' property to 'scroll', and setting the 'height' of the 'div' container to '27em'.

The problem I have encountered is that IE6 interprets the height of the text box differently depending on whether the page is on my own computer (localhost) or if it is on my web host's server. When I view the remote page, the height is much smaller than when the page is on localhost. I've 'viewed source' on the remote page, to make sure it's not an older, cached version, but the correct 'height' value is there OK.

Does anyone have any insight re: why this difference is occuring?
Thank you!

BlobFisk

3:36 pm on May 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Do you get the same effect if you use an absolute unit like pixels for the height?

DrDoc

5:19 pm on May 13, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You're using the same doctype on both?

smartymarty

1:41 am on May 14, 2004 (gmt 0)

10+ Year Member



Thank you for your replies.

When I set the 'height' property to an absolute value in px, there is no problem, the box is the same size on my localhost as on my remote web host.

The doctype on the pages is the same; in terms of content, the pages are identical. The only difference is that one of the pages sits on my own PC, while the other one I've uploaded to my website host.

[I checked the source code of the uploaded file, just in case it got changed somehow between uploading and viewing, but the source code is still the same as the local web page.]

tedster

3:22 am on May 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The peculiarities of IE never cease to amaze. I wonder where it's picking up the base size of an "em" in each case, if not from the settings of its own preferences.

smartymarty

3:41 am on May 14, 2004 (gmt 0)

10+ Year Member



If you would like to see the effect for yourself, just insert the following into an HTML doc:
**
<div style="height: 3em; border: 3px solid red;">
text
</div>
**

Save it to your own computer, then upload it to a remote web host.
View the local page in IE, then view the remote page, and watch the box shrink! So strange!

SuzyUK

10:48 am on May 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



smartymarty, tested this and could see no difference in height..

what are the font properties of html, body & the div in question.. if any?

Suzy

BlobFisk

11:27 am on May 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Which doctype are you using? Also, are there any extra CSS files on the webspace (or some missing for that matter)?

smartymarty

1:13 am on May 17, 2004 (gmt 0)

10+ Year Member



The HTML for the test page is:
***
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div style="height: 27em; border: 3px solid red;">
text
</div>
</body>
</html>
***

I increased the 'height' of the div to 27em to hopefully make the effect more pronounced.

tedster

3:00 am on May 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I cannot duplicate this effect.

Are you using the same computer for the local and remote tests? The only way I can make the height of the div change is to change text-size in the browser options.

smartymarty

4:04 am on May 17, 2004 (gmt 0)

10+ Year Member



Yes, I'm using the same computer. I get the effect just by starting IE, going to the remote URL, then go to the local URL, and the height changes!

Same computer, same browser session!

tedster

5:06 am on May 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've got to admit, this has me baffled. It's like there's just got to be some other factor at work here, you know? Otherwise others could also generate the same effect you're seeing, and that's not the report.

How about other css in effect, or perhaps NOT in effect, like BlobFisk asked? I'm also wondering if anything in the server headers could make this happen -- although I can't think of anything that might. But the difference you're seeing is between remote and local, so...

TGecho

8:00 pm on May 17, 2004 (gmt 0)

10+ Year Member



Are you using any sort of external files, especially CSS? Are they also identical locally and remotely?