Forum Moderators: not2easy
#maincontent {
border-left: 2px dotted #333;
width: 440px;
font-size: 10pt;
}
#sidebar {
width: 100px;
height: 170px;
text-align: right;
font-size: 10pt;
}
It's supposed to make the main cell of the table have a fixed width of 440px and have a dotted border down the left side, and the adjoining "sidebar" cell is supposed to be fixed at 100px.
When I run this in 5.5 it displays perfectly. When I do it in 6.0 it is not fixed-width and the border is missing.
Can anyone tell me why, and how to fix it so it will work in *both* versions of the browser?
Welcome to WebmasterWorld [webmasterworld.com]
Looks okay to me.
First stop whenever you hit a cross-browser bug like this is to check that your HTML and CSS validates using
W3C HTML Validator [validator.w3.org]
and the
W3C CSS Validator [jigsaw.w3.org]
There is a known problem with the box model in IE5 to do with padding and width. IE6 can also be picky about widths. Try adding code like 'padding:0;' and 'margin:0;'.
What DOCTYPE are you using? If HTML 4, then IE6 acts like IE5. But if XHTML, then it changes the way it handles divs.
If HTML 4, then IE6 acts like IE5.
Err... not quite.
Yes, the doctype does control whether the browser is in quirks mode or standards-compliant mode, but its just depends whether you use the FULL doctype or not.
e.g. using the full HTML4.01 doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
..will put IE into standards-compliant mode and it will use the correct box model.
See W3C Valid Doctype list [w3.org] and AListApart using the DOCTYPE [alistapart.com]
Thanks for your help so far. Actually I'd like to provide a link to the page in question so you could see for yourself, but I think it's a breach of ToS if I do that, so....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML LANG="en">
<HEAD>
<TITLE>B-Blaster</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<LINK HREF="basestyles.css" REL="stylesheet" TYPE="text/css">
<SCRIPT SRC="swap.js" LANGUAGE="Javascript1.2" TYPE="Text/Javascript">
<!--
// Calls external function to swap the images
-->
</SCRIPT>
</HEAD>
OK that's all the header stuff.
There's not much in the body part of the page...
<BODY>
<! -- snipped out unnecessary stuff -->
<TABLE id="mainTable">
<TR>
<TD id="sidebar" valign="top">
Client: <BR>
Project Type:<BR>
Status: <BR>
Comments:<BR><BR>
<SCRIPT SRC="timer.js" LANGUAGE="Javascript1.2" TYPE="Text/Javascript">
//document.PageStatus.write('Page i of 7');
</SCRIPT>
<SCRIPT LANGUAGE="Javascript1.2" TYPE="Text/Javascript">Start();</SCRIPT>
<TD id="mainContent" valign="top">
Equicom Pty. Ltd.<BR>
Application, Commercial<BR>
Beta (restricted)<BR>
<SCRIPT SRC="typing.js" LANGUAGE="Javascript1.2" TYPE="Text/Javascript">
// Display the text on the screen
</SCRIPT>
</TD>
</TR>
</TABLE>
</body>
</html>
So, as u can see, we have a 2 panel table, with the field names shown in the left panel (sidebar), and the data shown in the right panel (mainContent). Because the right panel text for the comments field is added *dynamically* at what I will describe as "run-time", what happens in IE6.0 is that the table resizes itself. But in IE5.5 it doesn't do that. Also in IE6.0 it doesn't display my nice border between the 2 panels (not really important, but I wanted the border!).
I used the validator on the page and it said it was ok for both the CSS and the HTML. Well it didn't right away, but after I "revalidated" a few times I finally had it perfect.
But it still doesn't work properly and I'm getting frustrated with it. I don't want to have to scrap the idea, because I like the idea of being able to show a multi-line comments field without having to have a full-screen page (that is, I can fit it in a tiny box, so why have the text display on the whole page?).
If you have a solution I would appreciate any assistance, however small.
Thanks
Brad :)
body {
margin: 0 10% 0 10%;
padding: 0; /* used for Opera - prevents border */
font-size: 14px;
background-color: #012dd7;
}
.typewriter {font-size: 10pt;}
#mainTable {
background-color: #36c1fc;
padding: 5;
margin: 0 auto;
border: 5px solid #000;
/*/*/line-height: 1.5em; /* */
font-size: 10pt;
}
#mainTable td {
padding: 10px;/*Pads each table cell in modern browsers*/
}
#maincontent {
border-left: 2px dotted #333;
width: 440px;
font-size: 10pt;
}
#sidebar {
width: 100px;
height: 170px;
text-align: right;
font-size: 10pt;
}
td, p, ul {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 10pt;
}
The important stuff is in "mainContent" and "sidebar", but there might be a mistake elsewhere. I've noticed that IE6 prefers "pt" for fonts instead of "px", whereas with IE5 it seems to be the other way around. But when we're dealing with table borders, obviously the unit should be pixels, right? I dunno if u can use twips, but thinking not, and I would rather think in pixels anyway cos they are easier to understand.
