Why do items that appear great in IE look like crap in Mozilla?

Forum Moderators: phranque

Message Too Old, No Replies

Why do items that appear great in IE look like crap in Mozilla?

rdruser

2:56 am on Apr 9, 2005 (gmt 0)

I am in the process of doing a redesign and am using a lot of tables. The tables look great and are all sized out perfectly in Internet Explorer, but in Mozilla, they look like crap and are all stretched out and 2-3x the normal size.

All tables have defined heights & widths so it's not due to that, but I am clueless as to what the problem is.

All suggestions would be appreciated. Thanks!

incrediBILL

2:59 am on Apr 9, 2005 (gmt 0)

Lately my experience has been Mozilla displays it more like it should in many cases where IE sweeps some quirks under the carpet to show you what they think you wanted. I'd look under the hood at the HTML and see if anything jumps out at you, like a missing span or extra column or something.

rdruser

3:06 am on Apr 9, 2005 (gmt 0)

I cut the images from imageready and just set the cell sizes, deleted the old image, and filled it with the text. Any columns of spans that were assigned was kept.

rdruser

3:24 am on Apr 9, 2005 (gmt 0)

what's funny is I just checked the source of the page from mozilla and pasted it into frontpage and it displays fine, it's just something about mozilla that messes it up.

Farix

3:47 am on Apr 9, 2005 (gmt 0)

The problem is that you are designing around IE's quirky rendering mode, which FP loves to do. Use a full doctype on the very first line to switch IE into standards mode (which should be the default mode, but MS loves to make our life difficult). If that doesn't work, provide a code sample here and someone should be able to spot the problem.

P.S. Drop FrontPage as an editor. It will only teach you some rather nasty coding habits.

rdruser

4:04 am on Apr 9, 2005 (gmt 0)

I use this

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

Farix

4:21 am on Apr 9, 2005 (gmt 0)

Provide a code snippet then.

rdruser

4:26 am on Apr 9, 2005 (gmt 0)

Ok, I narrowed it down to the header being the problem. The pages are fine by themselves, but stretch with the header. I have to re-cut that, but if it's still posing a problem I post back.

rdruser

9:44 pm on Apr 13, 2005 (gmt 0)

I am still having issues with this. This is the header that is screwing up the whole site. Any advice would be appreciated. Thanks!

<html>
<head>
<body bgcolor=#EBEBEB leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<body bgcolor="#EBEBEB">
<table width="648" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="border-style:solid; border-width:1px; " colspan="9" align="center" bgcolor="#FFFFFF" bordercolor="#000000">
<leftmargin=0 topmargin=0 marginwidth=0 marginheight=0">
<div align="center">
<center>
<table width=143 border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td colspan=21 width="807" bgcolor="#4672A8" height="4">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td rowspan=2 width="11" bgcolor="#4672A8">
 </td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=4 alt=""></td>
</tr>
<tr>
<td width="53" bgcolor="#4672A8" height="18">
 </td>
<td colspan=4 width="72" bgcolor="#4672A8" height="18">
 </td>
<td width="56" bgcolor="#4672A8" height="18">
 </td>
<td width="59" bgcolor="#4672A8" height="18">
 </td>
<td width="62" bgcolor="#4672A8" height="18">
<p align="center">
 </p>
</td>
<td width="47" bgcolor="#4672A8" height="18">
<p align="center">
 </p>
</td>
<td colspan=2 width="229" bgcolor="#4672A8" height="18">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td colspan=2 width="95" bgcolor="#4672A8" height="18">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"><input type="text" name="username" size="18"></td>
<td colspan=4 width="32" bgcolor="#4672A8" height="18">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td colspan=4 width="102" bgcolor="#4672A8" height="18">
 <input type="text" name="password" size="18"></td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=18 alt=""></td>
</tr>
<tr>
<td colspan=11 width="578" bgcolor="#4672A8" height="11">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td width="8" bgcolor="#4672A8">
<img src="images/head1_14.gif" width=7 height=11 alt=""></td>
<td width="87" bgcolor="#4672A8" height="11">
<font color="#FFFFFF" face="Times New Roman" size="1"> Email
Address</font></td>
<td colspan=4 width="32" bgcolor="#4672A8" height="11">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td width="8" bgcolor="#4672A8">
<img src="images/head1_17.gif" width=7 height=11 alt=""></td>
<td colspan=2 width="86" bgcolor="#4672A8" height="11">
<font size="1" color="#FFFFFF">
<img border="0" src="complete/images/spacer.gif" width="1" height="1">Password</font></td>
<td colspan=2 rowspan=3 width="19" bgcolor="#4672A8" height="32">
 </td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=11 alt=""></td>
</tr>
<tr>
<td colspan=20 width="799" bgcolor="#4672A8" height="6">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=6 alt=""></td>
</tr>
<tr>
<td colspan=19 width="744" bgcolor="#4672A8" height="15">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td width="55" bgcolor="#4672A8" height="15">
<p align="center"><input type="image" value="Submit" name="B1" src="/images/head1_22.gif" width="55" height="15"></td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=15 alt=""></td>
</tr>
<tr>
<td colspan=22 width="781" bgcolor="#4672A8" height="6">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=6 alt=""></td>
</tr>
<tr>
<td colspan=2 rowspan=3 width="101" bgcolor="#4672A8" height="18">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td colspan=2 rowspan=2 width="16">
<img src="images/head1_25.gif" width=11 height=11 alt=""></td>
<td colspan=10 width="564">
<img src="images/head1_26.gif" width=554 height=7 alt=""></td>
<td colspan=2 rowspan=2 width="16">
<img src="images/head1_27.gif" width=11 height=11 alt=""></td>
<td colspan=6 rowspan=3 width="121" bgcolor="#4672A8" height="18">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=7 alt=""></td>
</tr>
<tr>
<td colspan=10 rowspan=5 width="564">
<img src="images/head1_29.gif" width=554 height=43 alt=""></td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=4 alt=""></td>
</tr>
<tr>
<td rowspan=3 width="8">
<img src="images/head1_30.gif" width=7 height=35 alt=""></td>
<td rowspan=3 width="8">
<img src="images/head1_31.gif" width=4 height=35 alt=""></td>
<td rowspan=3 width="8">
<img src="images/head1_32.gif" width=4 height=35 alt=""></td>
<td rowspan=3 width="8">
<img src="images/head1_33.gif" width=7 height=35 alt=""></td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=7 alt=""></td>
</tr>
<tr>
<td colspan=2 width="101" bgcolor="#000000" height="21">
 </td>
<td colspan=6 width="121" bgcolor="#000000" height="21">
 </td>
<td width="1" bgcolor="#4672A8">
<img src="images/spacer.gif" width=1 height=21 alt=""></td>
</tr>
<tr>
<td colspan=2 rowspan=3 width="101" bgcolor="#FFFFFF" height="18">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td colspan=6 rowspan=3 width="121" bgcolor="#FFFFFF" height="18">
<img border="0" src="complete/images/spacer.gif" width="1" height="1"></td>
<td width="1">
<img src="images/spacer.gif" width=1 height=7 alt=""></td>
</tr>
<tr>
<td colspan=2 rowspan=2 width="16">
<img src="images/head1_38.gif" width=11 height=11 alt=""></td>
<td colspan=2 rowspan=2 width="16">
<img src="images/head1_39.gif" width=11 height=11 alt=""></td>
<td width="1">
<img src="images/spacer.gif" width=1 height=4 alt=""></td>
</tr>
<tr>
<td colspan=6 width="340">
<img src="images/head1_40.gif" width=334 height=7 alt=""></td>
<td colspan=4 width="224">
<img src="images/head1_41.gif" width=220 height=7 alt=""></td>
<td width="1">
<img src="images/spacer.gif" width=1 height=7 alt=""></td>
</tr>
<tr>
<td width="53" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=53 height=1 alt=""></td>
<td width="48" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=48 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=7 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=4 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=2 height=1 alt=""></td>
<td width="56" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=56 height=1 alt=""></td>
<td width="59" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=59 height=1 alt=""></td>
<td width="62" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=62 height=1 alt=""></td>
<td width="47" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=47 height=1 alt=""></td>
<td width="108" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=108 height=1 alt=""></td>
<td width="121" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=121 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=7 height=1 alt=""></td>
<td width="87" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=87 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=5 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=4 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=7 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=2 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=7 height=1 alt=""></td>
<td width="31" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=31 height=1 alt=""></td>
<td width="55" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=55 height=1 alt=""></td>
<td width="8" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=1 height=1 alt=""></td>
<td width="11" bgcolor="#FFFFFF">
<img src="images/spacer.gif" width=5 height=1 alt=""></td>
<td width="1" bgcolor="#FFFFFF"></td>
</tr>
</table></center>
</div>

Farix

11:35 pm on Apr 13, 2005 (gmt 0)

Yipes, there is a lot of junk code and a plethora of errors in there, too many to get into.

Ok, let's start from the top with a full doctype and open our html document

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

Next we establish our header. Here we put the page title, declare the character set we are using and any styles for the page. Styles can be either inline or from an external file.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Something needs to go here</title>
<style type="text/css" media="screen">

Next we want to create some styles, also know as CSS. All styling information should go between the <style> and </style> tags. Let start with the most basic things first, background and link.

body {
background-color: #EBEBEB;
margin: 0;
padding: 0;
}

a { color: #FFF; }

#FFF is a shorthand for #FFFFFF or white. We can also declare a general text color for the body as well.

Next, need have to look through the rest of the document and see if you can extrapolate some basic classes to us.

Now we close our header and move to the "body" of the HTML document. Notice that the body tag is now empty and we are not using the non-standard leftmargin, topmargin, marginwidth, and marginheight.

</style>
</head>

<body>

I'll leave it to use to finish the rest. But do keep the followiong in mind Always enclose the value of an attribute in quotes. <td colspan=3> is not correct, <td colspan="3"> is.

Keep widths consistent in all cells in a column. You shouldn't have the width of a cell in the first row set to 103 and then have the cell below it set to 108. Normally I would only set the width for the first row of cells and leave the other rows inherit the width of the cell above.

Avoid the use of spacer images. They do nothing more then junk up your code and makes things more confusing.

If you nest a table with another table, make sure that both tables a closed. In fact, justify why you even have that first table there in the first place.

If there is a font tag wrapped around an image, take the font tag out. It does nothing more then junk up your code further and has no affect on the rendered output.

And finally, justify why you need so many columns and ask yourself if it is better to use CSS to position elements on the page.

rdruser

5:23 am on Apr 14, 2005 (gmt 0)

The code was generated from ImageReady so I'm not sure how they formulated it, I just adapted what was there to what I was aiming for but had the height stretching problems

Farix

11:09 am on Apr 14, 2005 (gmt 0)

As if to provide a perfect example of why you don't want to use a so-called HTML "editor" to create a webpage. Learn to code HTML and CSS directly without using anything more complicated then a text editor. W3Schools [w3schools.com] is a good place to start.

sonjay

12:02 pm on Apr 14, 2005 (gmt 0)

Great post above, Farix, on how rduser should approach this page!

But I would say that this is a perfect example of why you don't want to use an image editor to write your code. Dreamweaver can write perfectly good, valid code (if you know what you're doing), and I see claims here all the time that the most recent version of FrontPage can, as well.

But Photoshop, Imageready and Fireworks should only ever be used for graphics. Create your graphics in your favorite image editor, slice them up if necessary, then build your own page. But do not -- repeat not -- just plop ImageReady code into your page. You'll get what rduser got, which is a big mess!

ajs83

6:45 pm on Apr 14, 2005 (gmt 0)

It worked for the other 2 dozen pages I made, but for some reason it does not work with this one...

ajs83

8:54 pm on Apr 14, 2005 (gmt 0)

Not sure what your issue is...maybe try recutting it and go step by step to see if it works after each thing is changed. If it changes, theres your problem.

Also, before doing so, look over a few slicing tutorials to optimize and better formulate your code.