Forum Moderators: open
[quote]
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><div align="center">
<table cellpadding="0" border="0" cellspacing="0" width="772px" style="margin-right: 0px; margin-top:0px; margin-left:0px; margin-bottom: 0px;">
<tr><td><img src="images/banner.gif" width="772px" height="100px" alt=""></td></tr></table>
<table height="100%" cellpadding="0" border="0" cellspacing="0" width="772px" style="margin-right: 0px; margin-top:0px; margin-left:0px; margin-bottom: 0px;">
<tr><td height="100%" class="left" valign="top"><img src="images/left.gif"></td>
<td valign="top" bgcolor="#101921" width="746px">
<table cellpadding="3px" cellspacing="0" border="0" align="left" style="margin-left:10px;">
<tr>
<td class="blog" bgcolor="#101921" valign="top">
<?php
if(!isset($_GET['page'])){
$number=10;
$page = "blog/show_news";
}
else{
$tv = $_GET['page'];
}
$page = $page . ".php";
if(!file_exists($page))
{
echo " This page is under construction.";
}
else{
include($page);
}
?>
</td>
</tr>
</table>
<table cellspacing="0" width="202px" cellpadding="3px" border="0" align="right" style="margin-top:20px; margin-left:20px; margin-right:10px;">
<tr><td><img src="images/winchester.gif" border="3px" style="border-color: #CCCCCC;"></td></tr>
<tr><td bgcolor="#101921" valign="top">
<h3> MY DIGG FEED </h3>
<script language="JavaScript" src="http://example.com/filename" type="text/javascript"></script></td></tr></table>
<td class="right" valign="top"><img src="images/right.gif"></td></tr></table></div>
[/quote]
thanks..
+seth
[edited by: tedster at 6:59 am (utc) on Nov. 21, 2005]
[edit reason] use example.com in code [/edit]
The first thing I do in working with cross-browser display problems is to make sure that the mark-up is valid.
W3C Validator - HTML [validator.w3.org]
Without baseline certainty that the mark-up validates, you can just spin in circles trying to fix rendering differences between user agents.
I appreciate that there is a lot of movement toward table-free layout, and our CSS forum in particular has many, many, many related discussions.
But sometimes there are very good, practical reasons to stick with what you know (you may a time constraint, for instance) or even with what your CMS forces on you. And table-based layouts still work just fine and pass validation -- whereas table-free layouts (depending on what you are trying to achieve) can be extemely frustrating with the number of browser bugs that are still out in the field.
So my point of view is that we should not be too "purist" in telling people to adopt any particular approach, and rather offer support for people who have specific questions for their prefered approach.
If you're going to table the layout, why not just make the entire thing one table? This will make your problem go away:
<table cellpadding="0" border="0" cellspacing="0" width="772px" style="margin-right: 0px; margin-top:0px; margin-left:0px; margin-bottom: 0px;">
<tr><td colspan="2"><img src="images/banner.gif" width="772px" height="100px" alt=""></td></tr>
<tr><td height="100%" class="left" valign="top"><img src="images/left.gif"></td>
<td valign="top" bgcolor="#101921" width="746px">
<!-- here, combine the align left and bgcolor with the blog class, maybe? -->
<div class="blog" style="margin-left:10px; background-color: #101921;">
(your php code)
</div>
</td>
</tr>
<tr><td colspan="2">
<div style="float: right; width:202px; margin-top:20px; margin-left:20px; margin-right:10px;">
<img src="images/winchester.gif" border="3px" style="border: 1px solid #CCCCCC;"><br>
<div style="background-color:#101921">
<h3> MY DIGG FEED </h3>
<script language="JavaScript" src="http://example.com/filename" type="text/javascript"></script><br>
<img src="images/right.gif">
</div>
</div>
</td></tr>
</table>
I may have missed a few formatting/visual things and haven't previewed this, but you get the idea: make your top and bottom tables 2-column span cells of the middle ones. Locking it in a master table will prevent the jiggety-jog you get trying to line up loose tables. Using div's inside the cells wherever you can will move away from an accessibility no-no, tables within tables.
One of the advantages of css is to clear out a lot of the markup to actually help you see the problem more clearly (sometimes.) A few items that should make life a lot easier for you:
1. The body properties will kick a validation error. This is old-school (not that there's anything wrong with old school,) set topmargin for IE, marginheight for NN, and each will ignore the other. The following works for BOTH! (woo hoo! :-) )
body style="margin:0; padding:0;"
or in a style sheet
body { margin:0; padding:0; }
or even
body (margin: 0px 12px 0px 12px; padding:0; }
(margin in the format top, right, bottom, left)
Which brings me to the next helper:
2. Pull out all these styles: style="..." into a style sheet at the top of your doc or a separate file. Since you have classes in your code, I assume you know how. What this does is gives you a remote handle to tweak your pages just in the css code.
3. Also it will make life easier on you (and give you much more control) if you use styles for the following:
background-color instead of bgcolor
background-color: #cccccc;
float instead of align (images and blocks)
<img style="float: right; width: somewidth;"....>
instead of border-color (Note width, style, color all in one)
border: 1px solid #cccccc;
Your margin-top.... styles - much easier to do
margin: 0px 12px 6px 12px;
in the format top, right, bottom, left.
4. td height (IMHO) is completely worthless and you can take it out. There's always something else that overrides it and (I believe) it's only mildly effective in IE.
As you probably already know, for various reasons we're still stuck with cellpadding="" and cellspacing="" but styles manage everything else on a table quite nicely.
Not picking on your code (by no means an expert here!) but these should help you a lot, and hope I guessed the original problem right.
