Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Problems with cross-browser compatibility! Help needed!!

T

thomasp

macrumors 6502a
Original poster
Sep 18, 2004
654
1
UK
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.
 

Attachments

  • PC Screenshot.jpg
    PC Screenshot.jpg
    88.3 KB · Views: 155
  • Mac Screenshot.jpg
    Mac Screenshot.jpg
    55 KB · Views: 141
Whyren

Whyren

macrumors 6502a
Jun 3, 2004
794
0
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.
 
T

thomasp

macrumors 6502a
Original poster
Sep 18, 2004
654
1
UK
ChrisBrightwell said:
Have you run it through a W3C Validator?
Click to expand...

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 <br>'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 <span> - 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! :D
 
ChrisBrightwell

ChrisBrightwell

macrumors 68020
Apr 5, 2004
2,294
0
Huntsville, AL
thomasp said:
No doctype (not sure about this one - I'm an amateur web designer)
Click to expand...
Having a doctype tells the browser exactly which parsing and rendering models to use.

The validator shows I didn't put "'s around the '100%' - is this likely to cause problems with IE on PC?
Click to expand...
No quotes are the 100%? Never seen that complaint, but it may be a residual gripe from lack of doctype spec.

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?
Click to expand...
Mmm ... Try quoting "center". Basically, always try to quote attribute values.

I realised this myself just before running the validator. Those <br>'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?
Click to expand...
Not sure if they'd cause problems or not.

Stupid mistake that could have been prevented by proofreading! Would the </img> (should just be >) cause problems in IE-PC?
Click to expand...
It's possible, but again I don't know.

I take it the <center> shouldn't be inside the <span> - the validator wasn't really clear about this one.
Click to expand...
You should be using CSS on the span. :) What was the validator complaint?

I might try making these changes (and if anyone else has suggestions!), and see if it comes up any better on the PC.
Click to expand...
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.
 
T

thomasp

macrumors 6502a
Original poster
Sep 18, 2004
654
1
UK
ChrisBrightwell said:
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.
Click to expand...

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

The validator complaint was:
W3C Validator said:
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 "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Click to expand...

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)

Whyren said:
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.
Click to expand...

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 :)
 
T

thomasp

macrumors 6502a
Original poster
Sep 18, 2004
654
1
UK
IE6 is still refusing to show that vertical line :mad: and it's still spreading the buttons out :mad:

FireFox on PC manages to show the page correctly though :confused:


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

ChicoWeb

macrumors 65816
Aug 16, 2004
1,120
0
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.
 
T

thomasp

macrumors 6502a
Original poster
Sep 18, 2004
654
1
UK
CanadaRAM said:
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.
Click to expand...

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 :)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom