Problems with cross-browser compatibility! Help needed!!

thomasp · 03:26 PM

I'm designing a website for a friend who has just set up their own company. I don't have much HTML experience, but seem to be getting along fine using TextWrangler and HTMLCodeTutorial.com

However, I am having serious problems in cross-browser compatibility.

I'm designing the website on my PowerBook, running Safari 2.0.1. Next to me, I have an old iMac running IE5.1.7 (*shudder*) and Mozilla 1.3.1. My friend is (sadly) running Windows 2000 and whatever Internet Explorer versions ships as standard with that.

My PowerBook and iMac show exactly the same page layout between the three browsers. However, it is a different story for the PC. Attached are the screenshots from the PC and Safari. The intended output is the mac screenshot, with the vertical black line and the navigation buttons butted up close to each other. For reference, the buttons change on mouseover. I believe this works on the PC, as I tried the mouseover code out on the PC in question on another site I deisgned.

As you can see, the PC is refusing to show the vertical line on the right of the buttons, and the buttons are spaced out far too much.

Below is the appropriate HTML code, with some parts removed to save space in the thread

This is the code I wrote in TextWrangler and tested it on 3 Mac browsers.

Code:

<body>

<!-- Logo banner bar -->
<center>
<table width=100% cellpadding=10>
<tr>
	<td valign=center colspan=2><img src="images/logo.jpg" alt="Logo"></td>
	<td valign=center><img src="images/title_strapline.jpg" alt="Title and strapline"></td>
</tr>

<tr>
	<td colspan=3><img src="images/horiz_line.jpg" width="100%" height=2 alt="-----"></td>
</tr>

<!-- End banner bar -->

<br>
<br>

<tr valign=top>

<!-- buttons -->

<td>
		<img src="images/buttons/home_on.jpg" name="home" border=0 alt="Home button"</img>
<br>
		
		<a href="pages/who.html"
		onMouseOver = "rollover('who')"
		onMouseOut = "rollout('who')"
		><img src="images/buttons/who_off.jpg" name="who" border=0 alt="Who We Are  button"></a>
<br>

[all the other navigation buttons]

</td>

<!-- end buttons -->

<td><img src="images/vert_line.jpg" height="100%" width=2 alt="-----"></td>


<!-- main body -->
<td>
<span class="welcomehead">

<center>Welcome<br><br></center></span>

<span class="welcome">

[body text].<br><br><br><br></span>


<span class="footnote">

Please note: this website is currently under construction and none of the links in the button bar work.</span>

</td>
</tr>

</table>

The vertical line is a 1 pixel tall, 2 pixel wide JPEG file. The horizontal line is a 2 pixel wide, 1 pixel tall JPEG file.

How can I make this so as it appears correctly (like the Mac screenshot) on the Windows computer?

Thanks for the help

Edit:

All three computers have different screen resolutions - if this affects things! (can't see why it should space everything out and make a line disappear though)

Also, the stypes in <span...> are in an external CSS file.

ChrisBrightwell · Sep 15, 2005, 01:07 PM

Have you run it through a W3C Validator?

Whyren · 01:44 PM

In my experience this is all too common: a page works perfectly on any browser other than IE for Windows (or possibly Netscape 4 or earlier). It may not be an issue with validation...it may not be something you can easily solve without scrapping your design for something that works on IE for Windows.

My initial thought is that IE is spacing out the navigation bar because of the text in your third column. A possible (though a bit complicated) way around this may be to have your navigation bar in one table, the body in another table and possibly put the two of those in a table (one cell) that encompasses the entire page.

Example (sorry for the crude ASCII):
---------------- <--Page or page-size table
|------ -------|
||Navi ||Body ||
||Table||Table||
|------ -------|
|---------------|

For the vertical line, you may want to try adding another column to the Nav Table and having the vertical line be the background image of the table.

thomasp · Sep 15, 2005, 02:24 PM

Quote:

Originally Posted by ChrisBrightwell

Have you run it through a W3C Validator?

I've just run it through the validator, and it has thrown up a few points:

No doctype (not sure about this one - I'm an amateur web designer)

The next one:

Code:

<!-- Logo banner bar -->
<center>
<table width=100% cellpadding=10>
<tr>

(at the very top).
The validator shows I didn't put "'s around the '100%' - is this likely to cause problems with IE on PC?

Next:

Code:

<td valign=center colspan=2><img src="images/logo.jpg" alt="Logo"></td>

The validator is saying 'center' isn't valid, and it should be TOP, MIDDLE or BOTTOM. According to http://www.htmlcodetutorial.com/tables/_TD_ALIGN.html , CENTER is valid. Should MIDDLE (or whatever) have " around it?

Next:

Code:

</tr>

<!-- End banner bar -->

<br>
<br>

<tr valign=top>

I realised this myself just before running the validator. Those 's shouldn't be there, as they still within the table code, but not in a cell. Taking those out moves the page body higher up (there was a gap at the very top of the page), but would they cause the problems in IE-PC?

Next:

Code:

<!-- buttons -->

<td>
		<img src="images/buttons/home_on.jpg" name="home" border=0 alt="Home button"</img>
<br>

Stupid mistake that could have been prevented by proofreading! Would the </img> (should just be >) cause problems in IE-PC?

Finally:

Code:

<!-- main body -->
<td>
<span class="welcomehead">

<center>Welcome<br><br></center></span>

I take it the <center> shouldn't be inside the - the validator wasn't really clear about this one.

I might try making these changes (and if anyone else has suggestions!), and see if it comes up any better on the PC.

Thanks for the help!

ChrisBrightwell · Sep 15, 2005, 02:51 PM

Quote:

Originally Posted by thomasp

No doctype (not sure about this one - I'm an amateur web designer)

Having a doctype tells the browser exactly which parsing and rendering models to use.

Quote:

The validator shows I didn't put "'s around the '100%' - is this likely to cause problems with IE on PC?

No quotes are the 100%? Never seen that complaint, but it may be a residual gripe from lack of doctype spec.

Quote:

The validator is saying 'center' isn't valid, and it should be TOP, MIDDLE or BOTTOM. According to http://www.htmlcodetutorial.com/tables/_TD_ALIGN.html , CENTER is valid. Should MIDDLE (or whatever) have " around it?

Mmm ... Try quoting "center". Basically, always try to quote attribute values.

Quote:

I realised this myself just before running the validator. Those 's shouldn't be there, as they still within the table code, but not in a cell. Taking those out moves the page body higher up (there was a gap at the very top of the page), but would they cause the problems in IE-PC?

Not sure if they'd cause problems or not.

Quote:

Stupid mistake that could have been prevented by proofreading! Would the </img> (should just be >) cause problems in IE-PC?

It's possible, but again I don't know.

Quote:

I take it the <center> shouldn't be inside the - the validator wasn't really clear about this one.

You should be using CSS on the span.

What was the validator complaint?

Quote:

I might try making these changes (and if anyone else has suggestions!), and see if it comes up any better on the PC.

Always always always code to standards. If you have valid HTML and CSS but the browser is still struggling, you'll have a lot more trouble figuring it out.

If you write to standard though, most browsers will render simple stuff well enough to work w/out any additional mods or whatever.

thomasp · Sep 15, 2005, 03:06 PM

Quote:

Originally Posted by ChrisBrightwell

You should be using CSS on the span.

What was the validator complaint?

Always always always code to standards. If you have valid HTML and CSS but the browser is still struggling, you'll have a lot more trouble figuring it out.

If you write to standard though, most browsers will render simple stuff well enough to work w/out any additional mods or whatever.

My external CSS stylesheet was validated fine, and the <span...> did have a CSS code in it, which works fine.

The validator complaint was:

Quote:

Originally Posted by W3C Validator

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "" or "<table>") inside an inline element (such as "<a>", "", or "").

I've made the recommended change, and will have to wait and see how the PC opens it - everything looks fine on IE5.1.7 on the OS9 iMac (which is notorious for poorly rendering pages)

Quote:

Originally Posted by Whyren, from earlier in the thread

For the vertical line, you may want to try adding another column to the Nav Table and having the vertical line be the background image of the table.

Currently, the vertical line is in its own column in the table. If things still aren't working, I might try your solution

Thanks for the help so far

thomasp · Sep 16, 2005, 03:44 AM

IE6 is still refusing to show that vertical line

and it's still spreading the buttons out

FireFox on PC manages to show the page correctly though

Oh well, back to the drawing board, I guess.

ChicoWeb · Sep 18, 2005, 03:07 PM

That is the toughest part about being a designer now a days. Before it was IE and nothing else. It was great! But not the case anymore. Unfortuantly it still carries most of the market share, so it's the most important, so I'd make sure it works in IE PC.

Good luck.

CanadaRAM · Sep 18, 2005, 03:15 PM

You say the vertical line graphic is 3 px wide but in your code you have width = 2

Put the nav buttons into their own table within the large table cell.

thomasp · Sep 18, 2005, 03:25 PM

Quote:

Originally Posted by CanadaRAM

You say the vertical line graphic is 3 px wide but in your code you have width = 2

Put the nav buttons into their own table within the large table cell.

Sorry, that was a typo in my first post - the vertical line graphic is 2 pixels wide, not 3.

Currently, I've bodged the site by manually entering the height for each page. This is not ideal, as it doesn't look right on big monitors. I'll try to find a better solution when I've got a bit more time

Sep 15, 2005, 12:58 PM	#1
thomasp macrumors 6502a Join Date: Sep 2004 Location: UK	Problems with cross-browser compatibility! Help needed!! I'm designing a website for a friend who has just set up their own company. I don't have much HTML experience, but seem to be getting along fine using TextWrangler and HTMLCodeTutorial.com However, I am having serious problems in cross-browser compatibility. I'm designing the website on my PowerBook, running Safari 2.0.1. Next to me, I have an old iMac running IE5.1.7 (shudder) and Mozilla 1.3.1. My friend is (sadly) running Windows 2000 and whatever Internet Explorer versions ships as standard with that. My PowerBook and iMac show exactly the same page layout between the three browsers. However, it is a different story for the PC. Attached are the screenshots from the PC and Safari. The intended output is the mac screenshot, with the vertical black line and the navigation buttons butted up close to each other. For reference, the buttons change on mouseover. I believe this works on the PC, as I tried the mouseover code out on the PC in question on another site I deisgned. As you can see, the PC is refusing to show the vertical line on the right of the buttons, and the buttons are spaced out far too much. Below is the appropriate HTML code, with some parts removed to save space in the thread This is the code I wrote in TextWrangler and tested it on 3 Mac browsers. Code: <body> <!-- Logo banner bar --> <center> <table width=100% cellpadding=10> <tr> <td valign=center colspan=2><img src="images/logo.jpg" alt="Logo"></td> <td valign=center><img src="images/title_strapline.jpg" alt="Title and strapline"></td> </tr> <tr> <td colspan=3><img src="images/horiz_line.jpg" width="100%" height=2 alt="-----"></td> </tr> <!-- End banner bar --> <br> <br> <tr valign=top> <!-- buttons --> <td> <img src="images/buttons/home_on.jpg" name="home" border=0 alt="Home button"</img> <br> <a href="pages/who.html" onMouseOver = "rollover('who')" onMouseOut = "rollout('who')" ><img src="images/buttons/who_off.jpg" name="who" border=0 alt="Who We Are button"></a> <br> [all the other navigation buttons] </td> <!-- end buttons --> <td><img src="images/vert_line.jpg" height="100%" width=2 alt="-----"></td> <!-- main body --> <td> <span class="welcomehead"> <center>Welcome<br><br></center></span> <span class="welcome"> [body text].<br><br><br><br></span> <span class="footnote"> Please note: this website is currently under construction and none of the links in the button bar work.</span> </td> </tr> </table> The vertical line is a 1 pixel tall, 2 pixel wide JPEG file. The horizontal line is a 2 pixel wide, 1 pixel tall JPEG file. How can I make this so as it appears correctly (like the Mac screenshot) on the Windows computer? Thanks for the help Edit: All three computers have different screen resolutions - if this affects things! (can't see why it should space everything out and make a line disappear though) Also, the stypes in <span...> are in an external CSS file. Attached Thumbnails Last edited by thomasp; Sep 18, 2005 at 03:26 PM. Reason: Correcting sizes on line graphics
	0

Sep 15, 2005, 01:07 PM	#2
ChrisBrightwell macrumors 68020 Join Date: Apr 2004 Location: Huntsville, AL	Have you run it through a W3C Validator? __________________ "Simplicity is the ultimate sophistication."
	0

Sep 15, 2005, 01:30 PM	#3
Whyren macrumors 6502a Join Date: Jun 2004 Location: east of the West and west of the East	In my experience this is all too common: a page works perfectly on any browser other than IE for Windows (or possibly Netscape 4 or earlier). It may not be an issue with validation...it may not be something you can easily solve without scrapping your design for something that works on IE for Windows. My initial thought is that IE is spacing out the navigation bar because of the text in your third column. A possible (though a bit complicated) way around this may be to have your navigation bar in one table, the body in another table and possibly put the two of those in a table (one cell) that encompasses the entire page. Example (sorry for the crude ASCII): ---------------- <--Page or page-size table \|------ -------\| \|\|Navi \|\|Body \|\| \|\|Table\|\|Table\|\| \|------ -------\| \|---------------\| For the vertical line, you may want to try adding another column to the Nav Table and having the vertical line be the background image of the table. __________________ Before a brilliant person begins something great, they must look foolish in the crowd. QS02 800MHz G4 + 768 RAM + 300 GB HD + NVidia GeForce4 MX 2G 10 GB iPod + 512 shuffle last.fm + music mobs + itunes registry Last edited by Whyren; Sep 15, 2005 at 01:44 PM.
	0

Sep 18, 2005, 03:07 PM	#8
ChicoWeb macrumors 65816 Join Date: Aug 2004 Location: California	That is the toughest part about being a designer now a days. Before it was IE and nothing else. It was great! But not the case anymore. Unfortuantly it still carries most of the market share, so it's the most important, so I'd make sure it works in IE PC. Good luck. __________________ C H I C O W E B D E S I G N C H I C O H O S T I N G Content Management Solutions - M A V I E O Design Studio
	0

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 16, 2005, 03:44 AM	#7
thomasp Thread Starter macrumors 6502a Join Date: Sep 2004 Location: UK	IE6 is still refusing to show that vertical line and it's still spreading the buttons out FireFox on PC manages to show the page correctly though Oh well, back to the drawing board, I guess.
	0

Sep 18, 2005, 03:15 PM	#9
CanadaRAM Contributor Join Date: Oct 2004 Location: On the Left Coast - Victoria BC Canada	You say the vertical line graphic is 3 px wide but in your code you have width = 2 Put the nav buttons into their own table within the large table cell.
	0


MacRumors Forums > Archive > Archives of Old Posts > Web Design and Development (archive)

Similar Threads
thread	Thread Starter	Forum	Replies	Last Post
Applecare+ help help help!!!!	Hpye	iPhone	13	Oct 21, 2011 10:24 PM
Problems with Migration Assistant - Need Help Please!!	wez99950	Mac Basics and Help	1	Oct 1, 2009 05:50 PM
Mac Book and external iomega hard drive...problem with saving music...help needed.	Polly Pod	MacBook	2	Feb 9, 2009 08:45 AM
Cousin calling me with problems with his mac, help?	tennismanclay	Mac OS X	4	Jan 29, 2009 07:14 PM
Safari problem w/ .dmg files, help needed.	kewp04	Mac Applications and Mac App Store	2	Sep 10, 2004 12:02 PM