Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder Coastal Web's Avatar
    Join Date
    Oct 2004
    Posts
    225
    Thanks
    12
    Thanked 3 Times in 3 Posts

    pc/mac browser mishap.. :(

    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

    Samantha Gram

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Saskatoon SK Canada
    Posts
    174
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Arrow Code with care

    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:
    Code:
    <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
    Colin Puttick

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Location
    NYgamers.net
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also don't forget about align and valign.

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

  • #4
    Regular Coder Coastal Web's Avatar
    Join Date
    Oct 2004
    Posts
    225
    Thanks
    12
    Thanked 3 Times in 3 Posts
    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

  • #5
    Regular Coder Coastal Web's Avatar
    Join Date
    Oct 2004
    Posts
    225
    Thanks
    12
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by SteelValor
    Also don't forget about align and valign.

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

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

    Samantha Gram

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Location
    Saskatoon SK Canada
    Posts
    174
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Colin Puttick

  • #7
    Regular Coder Coastal Web's Avatar
    Join Date
    Oct 2004
    Posts
    225
    Thanks
    12
    Thanked 3 Times in 3 Posts
    ahhh.. okay l got ya. Thank you explaining that

    Samantha Gram

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Location
    NYgamers.net
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts
    aling & valing ... don't leave td without it. ;D

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •