homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Help! My site looks terrible in IE!
What was my mistake?
bregan




msg:561939
 9:22 am on Apr 2, 2006 (gmt 0)

Hi,

I just published my first site and I was sooooo proud of myself, checked all the links, got really happy about everything, then decided to check it out on my PC.

The whole thing is off in IE 6. I designed it to be one table 800 pixels wide with 16 columns. No CSS, no fancy Java, not even any frames. No .swf, nothing fancy at all.

But in IE 6 it stretches to about 1500 pixels with seemingly random widths for individual columns.

It looks fine in Mozilla and Firefox (on a PC). And it's fine in Firefox and Safari and -- get this -- IE5 for the Mac. Everything lines up fine in every browser but the most popular one in the world, IE6!

Did I miss a sticky somewhere about peculiarities of IE6?

Thanks for your help.

 

mm1220




msg:561940
 9:42 am on Apr 2, 2006 (gmt 0)

Strip all the content out of the page and post the html for the site layout and we'll have a look.

When I'm troubleshooting layouts of websites I generally use the web developer extension for firefox which has a feature to outline all table (and block level) elements on a page. Makes it easier to spot a rogue "colpsan".

bregan




msg:561941
 10:07 am on Apr 2, 2006 (gmt 0)

Ok, but I'd also like to know more about the web developer extension: is this a FF plugin?

Anyway, here's the code for the index (I think I've removed everything):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="meta"
content="text/html;charset=ISO-8859-1">
<meta name="name"
content="content">
<title>title</title>
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="8" cellspacing="0" width="800">
<tbody>
<tr>
<td colspan="16">
<div align="center"> <a href="link"><br>
</a></div>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
</tr>
<tr>
<td colspan="16"> <br>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
<td colspan="8" rowspan="3" valign="top">
<blockquote>
<div align="center">
<h2><font color="#196ccc"
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+3"><span
style="text-decoration: underline;">&nbsp;</span><br>
&nbsp; </font><font color="black"
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="+2"><i>&nbsp;<br>
</i></font></h2>
</div>
</blockquote>
<div align="left">
<p><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">&nbsp;&nbsp;
<br>
</font></p>
</div>
</td>
<td colspan="4"><br>
</td>
</tr>
<tr>
<td rowspan="5" colspan="4" bgcolor="#c8c8c8" valign="top"><font
face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="-1"><b>&nbsp;</b></font>
<p><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"
size="-1"><b>&nbsp;</b></font></p>
&nbsp; <span
style="font-family: arial,helvetica,geneva,swiss,sunsans-regular;"><span
style="text-decoration: underline;"><span style="font-weight: bold;"><br>
<br>
<br>
<br>
</span></span></span><br>
<br>
</td>
<td rowspan="5" colspan="4"><br>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="3" colspan="4" valign="top"><br>
</td>
<td rowspan="3" colspan="4" valign="top"><br>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="16"><br>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
<td colspan="4">
<div align="center"> <a href="link"><br>
</a></div>
</td>
</tr>
<tr>
<td colspan="16">
<div align="center">
<p><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a
href="link"><br>
</a><a href="about.html"></a></font></p>
</div>
</td>
</tr>
<tr>
<td colspan="16" bgcolor="#d2d2d2">
<div align="center">
<blockquote>
<p></p>
<p><font size="-1"><br>
</font></p>
</blockquote>
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
<p></p>
</body>
</html>

bregan




msg:561942
 10:07 am on Apr 2, 2006 (gmt 0)

Thanks.

mm1220




msg:561943
 10:48 am on Apr 2, 2006 (gmt 0)

Goodness, what a mess!

First off get rid of all those <div align="center">s that you've got and change the <td>s in question to <td align="center"> instead.

Next look up (on this site) how to use css styles to control fonts. The <font> tag is deprecated.

If you stick to this table layout you're going to have to give individual <td> elements width properties. Either absolute (pixels) or relative (percentage). Putting a width on the table won't prevent scrolling if you fill the <td>s up with huge swathes of text.

bregan




msg:561944
 12:02 pm on Apr 2, 2006 (gmt 0)

Okay, sorry to make you read that, but you asked for it. :-P

I have made the align="center" change manually without experiencing any change in the page rendering. Is this just a simplification? a more elegant way of coding the same command?

Using CSS to control fonts is something I really didn't want to get into, but I have a sneaking suspicion that this is my problem. While developing, I had to manipulate fonts considerably (I used GoLive 5), to get some of my pages to look right. Because I am an idiot, I was trying to make them look right in Safari and FF on a Mac, while ignoring IE for PC.

I don't know what you mean by "deprecated": is the <font> tag something antiquated that is looked down upon (and not rendered properly) by newer browsers?

Quote:
"If you stick to this table layout you're going to have to give individual <td> elements width properties. Either absolute (pixels) or relative (percentage)."

I was able to specify in GoLive (I used pixels) when necessary; I thought that was normal, and didn't consider a way around it. I also thought that would be in the code I'd pasted, but it appears that my index did not need specification.

"Putting a width on the table won't prevent scrolling if you fill the <td>s up with huge swathes of text."

Damn.

This is good to know, but I think my problem lies in the CSS/fonts area beacuse that's where I had problems while developing the site.

Thanks.

mm1220




msg:561945
 12:27 pm on Apr 2, 2006 (gmt 0)

I think my problem lies in the CSS/fonts area

Not really. Browsers will render the font tag without a problem it's just that it's cumbersome to use.

jessejump




msg:561946
 6:20 pm on Apr 2, 2006 (gmt 0)

>>>>. then decided to check it out on my PC.

You should have done this after typing the first three words on the page, not after finishing the whole site. After every change, constantly.

bathellfire




msg:561947
 8:08 pm on Apr 7, 2006 (gmt 0)

<td colspan="16"> <td colspan="4">
Try to avoid using that stuff... It's good when you are trying to group 2 cells or so, but not the whole thing... Use more than 1 table if you have to, but don't use 1 table and rowspan and colspan it...

No offence, but your code is a mess. I'll tell you a secret, if you show an HTML code to a designer with years of experience (like me :D for example), they can tell you how the page will look like (will be able to draw an approximate sketch on a paper or smth), to tell you the truth, i have problems reading that...

doodlebee




msg:561948
 8:16 pm on Apr 7, 2006 (gmt 0)


Because I am an idiot, I was trying to make them look right in Safari and FF on a Mac, while ignoring IE for PC.

No, actually, you were right to do this. You should *always* do your sites in a standards-compatible browser, and *then* check it in IE later on, after all is said and done. You did right this time, trust me ;)

As for IE - There's something about the "transitional" doctype that causes it to do this. (There's a post on it in the CSS forums right now.)

I agree with bathellfire - it *is* a mess. It's unfortunate that you don't want to use CSS. if that's the case, you *could* try removing your doctype completley and see what happens. Oh, and clean up your code - use one table with cells (as bathellfire said) instead of nested, nested, nested craziness :) Using CSS, you could conrtol all your fonts easily with a couple of lines of code - as well as remove all those "div align=center" things.

I also ran this through a validator, and found a couple of unclosed tags - that's another issue as well.

HTH!

cweaver




msg:561949
 6:23 pm on Apr 18, 2006 (gmt 0)

I threw this demo together for this question only. Start with this and build on it or retrofit what you've got. The key to it is the style declaration "td.Month". (I took this from a calendar I built.) Without out this particular IE hack colspan doesn't work. At least I can't get it to.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> IE ColSpan Test </title>
</head>

<body>

<style>
td{
height:100px;
width:100px;
background-color:aliceblue;
font-family:arial;
font-size:medium;
font-weight:bold;
color:black;
text-align:center;
}

td.Month{
width: 700px;
}

th{
width:100px;
background-color:aliceblue;
font-family:arial;
font-size:medium;
font-weight:bold;
color:black;
}

</style>

<table cellpadding=3 cellspacing=3 border=1 bordercolor=black id="CalendarMonth">

<tr>
<td>Summer</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>
<tr>
<td class='Month' colspan="7">
<b><font size=+3>June</font></b>
<br />

</td>
</tr>

<tr>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;</td>
</tr>

</table>
</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved