...

View Full Version : pc/mac browser mishap.. :(



Coastal Web
11-03-2005, 06:47 AM
Hello folks, l've got a quick question that l was hoping one of the more seasoned web designers around here would be able to tell me.

Bellow is a website that l've mocked up. Now when viewed on my XP running system it looks perfect on all browsers, netscape, ie, safari, opera, FF.. etc...

however when l look at the page with my mac it seems like it gets jumbled. Here are two screen caps (courtesy of browsercam.com) of what l'm talking about...

mac cap:
http://img358.imageshack.us/img358/5010/maccap6pn.jpg
pc cap:
http://img358.imageshack.us/img358/1478/pccap9iv.jpg

if anyone would be able to tell me what kinds of things might cause this, l would greatly appreciate it. The URL to the page (if you'd have to review the source to know for sure) is available at: http://www.tdtcoalition.net/test/dd/index.html

thanks for the help, and your time :D

Samantha Gram

dreamingdigital
11-04-2005, 01:07 AM
One thing to try is to be very careful about rowspans and colspans. If you really need them do so with care and use some image shims. Another thing pay attention to what you're writing. There are lots of mistakes in here. Also you should always have an object in a cell. The FORM tags can be moved outside of the TD so as not to disturb the contents. Here is what you wrote:

<body background="images/bg.jpg">
<center>
<table cellpadding="1" cellspacing="0" border="0" bgcolor="#3C4859" width="778"><tr><td>
<form method="GET" name="search" action="search.php">
<!-- start header-->
<table cellpadding="0" bgcolor="#70849D" cellspacing="0" border="0" bgcolor="84" width="776" height="84">

<tr>
<td background="images/header_1x1.jpg" height="84" width="307" bgcolor="#70849D"></td>
<td bgcolor="" height="84" width="290" align="center" valign="center">
<table cellpadding="0" bgcolor="#70849D" cellspacing="0" border="0" bgcolor="84" width="290" height="84"><tr>
<td colspan="3" bgcolor="#70849D" background="images/header_1x2.jpg" height="54" width="290"></td>
</tr><tr>
<td bgcolor="#70849D" width="134" height="22" background="images/header_2x1.jpg" valign="center">
<input value="Terms" height="22" width="134" type="text" name="q" value="" class="searchBox"></td>
<td bgcolor="#70849D" width="25" height="22"><a href="javascript:search();"><img border="0" src="images/header_2x2.jpg" width="25" height="22"></a></td>
<td bgcolor="#70849D" width="131" height="22" background="images/header_2x3.jpg"></td>
</tr><tr>
<td colspan="3" bgcolor="#70849D" background="images/header_3x1.jpg" width="290" height="8"></td>
</tr></table>
</td>
<td height="84" width="179" bgcolor="#70849D"><a href="#quote"><img src="images/head2_1x3.jpg" border="0" height="84" width="179" bgcolor="#70849D"></a></td>
</td>
</tr>

</form>
</table>
<!-- end header-->


change it to:

<body background="images/bg.jpg">
<center>
<table cellpadding="1" cellspacing="0" border="0" bgcolor="#3C4859" width="778"><tr><td>
<!-- start header-->
<table cellpadding="0" bgcolor="#70849D" cellspacing="0" border="0" bgcolor="84" width="776" height="84">
<form method="GET" name="search" action="search.php">
<tr>

<td background="images/header_1x1.jpg" height="84" width="307" bgcolor="#70849D"><img src="clear_image.gif" width=307 height=84></td>

<td height="84" width="290" align="center" valign="middle">

<table cellpadding="0" bgcolor="#70849D" cellspacing="0" border="0" width="290" height="84">

<tr>
<td colspan="3" bgcolor="#70849D" background="images/header_1x2.jpg" height="54" width="290"><img src="clear_image.gif" width=290 height=54></td>
</tr>

<tr>
<td bgcolor="#70849D" width="134" height="22" background="images/header_2x1.jpg" valign="center">
<input value="Terms" size=10 type="text" name="q" value="" class="searchBox" style="width:134px; height:22px;"></td>

<td bgcolor="#70849D" width="25" height="22"><a href="javascript:search();"><img border="0" src="images/header_2x2.jpg" width="25" height="22"></a></td>

<td bgcolor="#70849D" width="131" height="22" background="images/header_2x3.jpg"><img src="clear_image.gif" width=131 height=22></td>
</tr>

<tr>
<td colspan="3" bgcolor="#70849D" background="images/header_3x1.jpg" width="290" height="8"><img src="clear_image.gif" width=290 height=8></td>
</tr>
</table></td>

<td height="84" width="179" bgcolor="#70849D"><a href="#quote"><img src="images/head2_1x3.jpg" border="0" height="84" width="179" bgcolor="#70849D"></a></td>
</tr>
</form>
</table>
<!-- end header-->

That should do it. Be sure to make a clear gif image. I just invented one there for you but you'll have to create one in a graphics program and link it appropriately. ;)

CP

SteelValor
11-04-2005, 05:07 PM
Also don't forget about align and valign.

Fedora Linux on Mac :eek: I run an iMac at home with Ubuntu Linux on it :D

Coastal Web
11-05-2005, 02:06 AM
Thanks for the input, l'm trying to place some spacer gifs into any of my empty TD cells, to see if that clears it up (l sure hope so, that's an easy fix.. heh).

On another forum that l'd asked this question, l was told by a couple people that this is happening because l use % for the height attribute in some of my table's cells...

that isn't true is it? I can' use height=%100 can't I? l've never heard that it was improper HTML in the past...

-------------
UPDATE AFTER TESTS...

Yup seems like that must be the problem. I did not know that you *had* to have an element inside of a TD cell or it would throw everything out of whack. Cool beans! Thank you very much, as you've helped me greatly!

http://www.browsercam.com/projects/204318/4057025.jpg

Samantha Gram

Coastal Web
11-05-2005, 02:11 AM
Also don't forget about align and valign.

Fedora Linux on Mac :eek: I run an iMac at home with Ubuntu Linux on it :D


Wait Steel, l don't understand but l value your input. What is it with align/valign?

Samantha Gram

dreamingdigital
11-05-2005, 09:18 AM
Steel just pointed out something I forgot to fill you in on.

horizontal alignment:
align=left,center,right,justify

vertical alignment:
valign=top,middle,bottom

You had some valign=center parts in there I fixed and didn't tell ya.
CP

Coastal Web
11-05-2005, 08:05 PM
ahhh.. okay l got ya. Thank you explaining that :D

Samantha Gram

SteelValor
11-07-2005, 07:30 PM
aling & valing ... don't leave td without it. ;D

sorry this weekends storm knocked everything out at home and at work



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum