Forum Moderators: open
IE renders the DIV incorrectly with the table and Mozilla just renders the table as it is without using javascript. The point is to have the table expand to 100% of the clientwidth (of the entire window) minus about 120px regardless of whether there is content within it.
<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="http://www.jabcreations.com/temp/TESTING/themes/style.css" media="screen" rel="stylesheet" title="Classic Theme" type="text/css" />
</head>
<body><script type="text/javascript">
<!--
var width;
var height;
width = document.body.clientWidth-20;
height = document.body.clientHeight-20;
function setDivSize(){
document.getElementById('myDiv').style.width = width;
document.getElementById('myDiv').style.height = height;
}
//-->
</script><script type="text/javascript">
<!--
document.writeln('<div id="myDiv" class="content">')
resizeDiv();
//-->
</script><table class="title" cellspacing="0">
<tr><td class="a5-13c">
<p class="title">Title</p>
</td></tr>
</table><script type="text/javascript">
<!--
var tablewidth;
tablewidth = document.body.clientWidth-150;
function setTableSize(){
document.getElementById('myTable').style.width = tablewidth; }
//-->
</script><!-- start code we're talking about -->
<script type="text/javascript">
<!--
document.writeln('<table id="myTable" class="content" cellspacing="0">')
resizeTable();
//-->
</script>
<tr><td class="outset">
1 table<br />
Content<br />
</td>
<td class="inset" onmouseover="this.className='inset-hover'" onmouseout="this.className='inset'">
inset<br />inset<br />
</td></tr>
<script type="text/javascript">
<!--
document.writeln('</table>')
setTableSize();
//-->
</script><!-- end code we're talking about -->
<script type="text/javascript">
<!--
document.writeln('</div>')
document.writeln('</div>')
setDivSize();
//-->
</script>
</body>
</html>
[edited by: JAB_Creations at 7:37 pm (utc) on Nov. 18, 2004]
Also tried applying this to the table cell but did not see any difference.
Not working in Moz?
(apart from any other possible stuff)
document.body.clientWidthwindow.innerWidthSo this statement may do it:
tablewidth = (document.body.clientWidth¦¦window.innerWidth)-150;The function, resizeTable, appears to be missing.
---------------
I get the feeling that this could be achieved without the intricate mix-up of doc.write statements, and further modifying Javascript...but who am I to say?
Is there a way I can get this script to use the myDiv variable or are variables only used within that specific script?
(Just checking)
You are replacing the '¦' with a proper, unbroken pipe, aren't you?
ahh...heck if I know IoI.
1. There are some function calls - resizeTable(), for instance - for which I can't see any actual defined function.
2. There are quite a few script blocks in there (some could be joined up).
Remember that a function cannot be called in an inline (immediately executed) statement if it is defined in a block below the calling statement.
<script ..etc..>
doThis()
</script>
<script ..etc..>
function doThis()
</script>
- that's a 'no-no'
Seems like you're OK on that score, so far.
3. You're going for XHTML strict. All very commendable, I'm sure, but it won't validate (if you care) because the elements written by document.write() will be invisible. Moz may even have a problem with the use of doc.write with an XHTML strict doctype.
4. WebmasterWorld's editor (for reasons unknown) changes pipes, which usually come in pairs (¦¦) for an 'or', but occasionally singly (¦) in regular expressions and binary logic. They end up 'broken' - as you can see.
Do a 'search and replace' on any posted code before you use it.
5.
don't know javascript like I know html
Have you considered not using script to do this, but using IE's conditional comments instead? You could 'make it in Mozilla', then fix it in IE by loading some extra CSS.
I've thought it through why the DIV was being rendered this way in both Mozilla & IE but not the table. So I figured hey... what if it's because the table was inside the DIV and unable to retrieve the info in Moz. So that didn't work so I scraped that and thought again... well what if it's just the fact I'm using a table versus the DIV? Not like anything else was suggestive to me so I created div.table class and effecively changed the table to a div with a table for a class. Now it works in Mozilla, Opera, and IE!
The <!--//--> in the scripts make the W3 validator pass over the code...and since I've decided to use DIVs instead of tables (as these aren't like my menus pixel by pixel(ly) placed) I won't have to worry about the validator telling me that I dont have table tags :-D
I don't know how to fix the not being defined error in the Firefox javascript console...can you help me out with that one? I don't want to just get my html valid ;-)
4. WebmasterWorld's editor (for reasons unknown) changes pipes, which usually come in pairs (¦¦) for an 'or', but occasionally singly (¦) in regular expressions and binary logic. They end up 'broken' - as you can see.
Ok honestly now you're talking on a level I'm not even understanding now unfortunitly.
IE conditional comments? Not sure what you mean, is this some sort of Microsoft Illuminati? :-D
I mean that this symbol here (after the colon): ¦
..is not what I actually typed in. I typed in an unbroken pipe symbol. WebmasterWorld converts it to what you see now. If any script that uses pipes is copied from WebmasterWorld, then it will immediately error when run - unless the pipes are converted back to unbroken ones.
Put this snippet of HTML through your browser to get the picture:
<h1>proper pipe: |</h1>
<h1>broken pipe: ¦</h1>
Conditional Comments
A Microsoft tag style that's actually very, very useful. Non-MS clients see them as comments. This way you can load extra code without using Javascript to browser sniff.
Have a read:
[google.com ]
- The top 3 or 4 hits for this search should do it.
I'm not a validation hound myself, so I'm not certain about this, and you may care as little as I do, but...
Since the validator doesn't execute script. The <table> tags aren't part of the document. This means that there are <tr> tags that are not children of <table> (or tbody or thead), which I presume is invalid.
I think code inside style and script tags needs to be hidden from the validator like so:
<script>
/*<![CDATA[*/
...code...
/*]]>*/
</script>
