14 replies [Last post]
EddieHowell
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2006-03-19
Posts: 10
Points: 0

Dear All

ESSENTIALLY, what I’m after is:
How do you make an em based container/div resize properly in Internet Explorer?

WHAT I’VE DONE IS
- HTML <div id="container"><div> i.e. a single container
- CSS  #container {width: 50em; margin: 0 auto;} i.e.centred & a certain width)

- this displays fine in Dreamweaver
- in Firefox, the div appears, and is resized according to the browser’s text resizing¸no matter how small or big
- in Internet Explorer: the text/div resizes a little, getting slightly smaller, but never allowing to be bigger than the div appears in Dreamweaver

AND SO I TRIED THIS
I read & tried this page http://www.bluerobot.com/web/css/fouc.asp, about FOUC (Flash of Unstyled Content), but got the same problem. I included the below code in my page, as suggested, but got no results.

<head>
<title>My Page</title>
<script type="text/javascript"> </script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>

I am new to this game, so perhaps there is something that I am missing?

Q’s
-will this header code need to reference a Java script of some kind?
-the Blue Robot page above says that this FOUC problem occurs when using the @import <head>< but mine was doing it without (the HTML page is linked to an external Style Sheet though)?
- anything else I might be missing?

Any and all help would be much appreciated?
Regards
Eddie Howell

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Resizing EM divs in IE

Not too sure why you're reading about the FOUC, as it should have nothing to do with this.

Can you show a live link to the page? Or failing that all the HTML and CSS?

And as an aside, DON'T EVER test in Dreamweaver. It's bad Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

EddieHowell
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2006-03-19
Posts: 10
Points: 0

Resizing EM divs in IE

Hi

Heres my code, just try chucking this into your webdesign app

**HTML**
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript"></script>
<style type="text/css" title="currentStyle" media="screen">
@import "style.css";
</style>
<!--the above script & style section is used instead of what Dreamweaver puts in, as the above method avoid the EM resizig problem that IE has-->

</head>

<body id="yu-wonder-records-by-eddie-howell">
<div id="container">
</div> <!-- end of CONTAINER div -->

</body>
</html>

**CSS**
body {
font-size: 77%; /* initially set to percentage so that ems work without producing miniscule text in IE */
text-align: center; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
}

#container {
width: 50em;
text-align: left; /*resets the text alignment*/
margin: 0 auto; /* centers the container */
}

I look forward to your response

Eddie

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Resizing EM divs in IE

Works fine for me?

I'm not entirely sure what the problem is? :?

Verschwindende wrote:
  • CSS doesn't make pies

EddieHowell
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2006-03-19
Posts: 10
Points: 0

Resizing EM divs in IE

Hhm, interesting.

The problem is essentially that in IE, when I resize the text, the div does not resize itself (unlike Mozilla, which works fine).

is it possible for you to explain a little about what adding the Java Script part in the head section does, as I don't quite get what it's referring to when you add it in i.e. if there has to be any other type or scripting language installed on my computer.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Resizing EM divs in IE

Ok, you need to forget about the FOUC, as it has nothing to do with this.

Basically, the FOUC refers to a page which has no style on first load, but suddenly gets styled. Adding a fake javscritp link at the top fixes it. You don't need anythign installed anywhere, it doesn't reference anything. Don't worry about it.

The problem - well, there is no problem.

First of all, actually put some content in the #content div - even the word "test" will do.

Then, edit your CSS to give the content div a pink background.

Open it in IE, and resize the text.

Does the box resize?

Verschwindende wrote:
  • CSS doesn't make pies

EddieHowell
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2006-03-19
Posts: 10
Points: 0

Resizing EM divs in IE

Many thanks for your reply once again.

Ok. Understood about the Javascript thing, I just include the Java line below into my <head>.

Can I just confirm that you tried the exact same HTML as below/that it works on your computer/the em based div resizes itself with the browser text?:

<title>Untitled Document</title>
<script type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

There are now 3 sites that I have tried this on, and the same resizing problem arises in IE, so I must presume that it's something not to do with the code/Dreamweaver etc, but rather with IE.

Are you aware of any Windows temporary files that I need to get rid of eg. cache files where the Style Sheet may alreay be stored? I've deleted the files C:/Windows/temporary files, but no joy. any other files/issues that you can think of?

Many thanks
Eddie

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Resizing EM divs in IE

Could be a cache issue but I doubt it - to do a forced refresh in IE use <ctrl><f5>

The code I used is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
body {
font-size: 77%; /* initially set to percentage so that ems work without producing miniscule text in IE */
text-align: center; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
}

#container {
width: 50em;
text-align: left; /*resets the text alignment*/
margin: 0 auto; /* centers the container */
background: pink;
} 
</style>
</head>

<body>
<div id="container"> fff </div>

</body>
</html>

Stick it in a html and test it, lemme know if it worls.

Verschwindende wrote:
  • CSS doesn't make pies

EddieHowell
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2006-03-19
Posts: 10
Points: 0

Resizing EM divs in IE

Tried the code, with and without the inclusion of the Java Script part, but still no joy. Your code works fine in Firefox, but still not IE (God damm them!). Deleted all temp/cache files again, and tried the force CTRL+F5 reset.

Any other masterful things you can think of?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Resizing EM divs in IE

Which version of IE? Are you sure you're actually starting the text size with "normal" and then resizing? Cos it works fine for me.

Verschwindende wrote:
  • CSS doesn't make pies

EddieHowell
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2006-03-19
Posts: 10
Points: 0

Resizing EM divs in IE

it's v6.029.

Text size set to normal at startup, still fixed to that limited scaling/position though Shock(

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Resizing EM divs in IE

So what happens when you resize text? Does the text resize, but the div doesn't?

Can you show a screenie?

Verschwindende wrote:
  • CSS doesn't make pies

EddieHowell
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2006-03-19
Posts: 10
Points: 0

Resizing EM divs in IE

Resizing changes both text and div size, but only by a certain amount (it's like the em value that I've set is actually being classed as a maximum pixel value instead)

Here's the IE screen shots, with thw biggest & smallest sizes.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 3 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Resizing EM divs in IE

I don't see a problem. IE only has 5 font changes - largest, larger, normal, smaller and smallest. So you'll only be able to resize the text twice in either direction. This may be where you're going wrong Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Resizing EM divs in IE

EddieHowell wrote:
Understood about the Javascript thing, I just include the Java line below into my <head>.

http://www.dannyg.com/ref/javavsjavascript.html