DIV behavior differs between FF and IE

07-01-2007, 1:17 PM

Below is a stripped-down version of a Web page that works
differently between Firefox and Internet Explorer (IE) .

There are three nested tables; table_3 inside table_2 inside table_1.
There's DIV with id="content" that is inside table_1.

There's a JavaScript function that toggles the size of the DIV's text.

Under Firefox all text is resized.
Under IE only the text inside table_1 is resized.

Which behavior is correct?
How do I make it consistent for both browsers?

FYI -- The "doctype" tag does make a difference.

Thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS_Test.htm</title>
<script type="text/javascript">
var size = 0;
function textSize() {
if (!document.getElementById) {
alert("This feature requires a modern browser.");
return;
}
(size==1) ? size=0 : size=1;
var list = new Array("80%","100%");
var item = list[size];
document.getElementById("content").style.fontSize = item;
}
</script>
<style type="text/css">
td, th { font-size:100% }
..font { font-size:80% }
</style>
</head>
<body>
<input type="button" value="Change Text Size" onclick="textSize()">
<br><br>
<table border="1" width="150">
<tr>
<th>
<div id="content" class="font">
<table border="1" width="130">
<tr>
<th>
<table border="1" width="110">
<tr>
<th class="font">
Hello World 1
</th>
</tr>
</table>
<br>
Hello World 2
</th>
</tr>
</table>
<br>
Hello World 3
</div>
</th>
</tr>
</table>
<ul>
</ul>
</body>
</html>

07-01-2007, 1:17 PM

I tried it in both versions on my PC. They worked the same in both
browsers?

Jack

On Mon, 15 Jan 2007 16:47:58 -0600, "McKirahan" <News@McKirahan.com>
wrote:

>Below is a stripped-down version of a Web page that works
>differently between Firefox and Internet Explorer (IE) .
>
>There are three nested tables; table_3 inside table_2 inside table_1.
>There's DIV with id="content" that is inside table_1.
>
>There's a JavaScript function that toggles the size of the DIV's text.
>
>Under Firefox all text is resized.
>Under IE only the text inside table_1 is resized.
>
>Which behavior is correct?
>How do I make it consistent for both browsers?
>
>FYI -- The "doctype" tag does make a difference.
>
>Thanks in advance.
>
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
><html>
><head>
><title>CSS_Test.htm</title>
><script type="text/javascript">
>var size = 0;
>function textSize() {
> if (!document.getElementById) {
> alert("This feature requires a modern browser.");
> return;
> }
> (size==1) ? size=0 : size=1;
> var list = new Array("80%","100%");
> var item = list[size];
> document.getElementById("content").style.fontSize = item;
>}
></script>
><style type="text/css">
> td, th { font-size:100% }
>.font { font-size:80% }
></style>
></head>
><body>
><input type="button" value="Change Text Size" onclick="textSize()">
><br><br>
><table border="1" width="150">
><tr>
> <th>
> <div id="content" class="font">
> <table border="1" width="130">
> <tr>
> <th>
> <table border="1" width="110">
> <tr>
> <th class="font">
> Hello World 1
> </th>
> </tr>
> </table>
> <br>
> Hello World 2
> </th>
> </tr>
> </table>
> <br>
> Hello World 3
> </div>
> </th>
></tr>
></table>
><ul>
></ul>
></body>
></html>
>

07-01-2007, 1:17 PM

"Jack Forbes" <HiJack@fidnet.com> wrote in message
news:usrsq29l20m49aef2quvfhgt1p2g33d6oi@4ax.com...
> I tried it in both versions on my PC. They worked the same in both
> browsers?
>
> Jack

Thanks for your reply.

What version of IE did you use?

I used IE5.5. I'll try IE6.0 next.

07-01-2007, 1:17 PM

"McKirahan" <News@McKirahan.com> wrote in message
news:2OadnSNeyvRzNzPYnZ2dnUVZ_oGlnZ2d@comcast.com. ..
> "Jack Forbes" <HiJack@fidnet.com> wrote in message
> news:usrsq29l20m49aef2quvfhgt1p2g33d6oi@4ax.com...
> > I tried it in both versions on my PC. They worked the same in both
> > browsers?
> >
> > Jack
>
> Thanks for your reply.
>
> What version of IE did you use?
>
> I used IE5.5. I'll try IE6.0 next.

I got consistent behavior by changing the DTD to "quirks" mode per:
http://www.htmlhelp.com/tools/validator/doctype.html

"Newer browsers such as Internet Explorer 5 for Mac,
Netscape 6, and Mozilla use a standards-compliant rendering
for HTML 4.01 Transitional documents that include the URI
of the DTD in the DOCTYPE.

These browsers use a "quirks" mode to emulate rendering
bugs in older browsers if the URI is omitted:"

I changed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
to just:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

07-01-2007, 1:17 PM

I use IE 6.0.2900

I'm resisting as long as I can going to version 7.

Jack

On Wed, 17 Jan 2007 17:04:51 -0600, "McKirahan" <News@McKirahan.com>
wrote:

>"Jack Forbes" <HiJack@fidnet.com> wrote in message
>news:usrsq29l20m49aef2quvfhgt1p2g33d6oi@4ax.com.. .
>> I tried it in both versions on my PC. They worked the same in both
>> browsers?
>>
>> Jack
>
>Thanks for your reply.
>
>What version of IE did you use?
>
>I used IE5.5. I'll try IE6.0 next.
>
>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Strange Behavior using MySQL	Matt White	PHP	4	05-20-2007 5:33 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)