Browser Compatibility (Firefox mainly :@)

[Boogle]

Hi guys... so this is 'proper wierd' to say the least (yorkshire lad n all!)

I have been designing a site in Visual Studio for a while now and obviously it's default browser viewing whilst in development mode is IE and so things have all been going yankee doodle dee, however it's coming close to be finished now and so i tested it on Firefox, Safari, Opera and IE6.

here are the results:

IE 6 or greater: Perfect;
Firefox: SUCKS!!!!!!!!!!
Safari: 90% OK
Opera: 99% OK

So, basically where Firefox is messing up is the really SIMPLE stuff, which is the worst thing here because it makes it harder to figure out why. Basically some stuff has been done using photoshop CS3 and then sliced up. Now the code it spits out for you for that is created in tables, which i wouldn't normally do but it looks better so i can put up with it: Anyway getting to the point, basically firefox can't friggin render a table with images in it properly!

this version is IE which is 100% perfect

this version is FF

Both are just images as I don't have the aspx web space yet, waiting for my IP-SEC to be ready for uploads, anyhoo... here's the html for this page:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="serviceMain.aspx.cs" Inherits="Default3" Title="All Handling Servicing" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<div class="contentPageFullWrapperDiv">
<h3 class="topFatTitles">Servicing</h3>
<br />
    <table id="Table_01" width="585" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="6">
			<a href="Servicing.aspx">
				<img src="App_Themes/images/AllHandlingServiceSplash_TitleLink.jpg" width="584" height="33"alt="Service Title" /></a></td>
		<td>
			<img src="App_Themes/images/spacer.gif" width="1" height="33" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="4">
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_02.jpg" width="201" height="393" alt="" /></td>
		<td colspan="2">
			<a href="Servicing.aspx">
				<img src="App_Themes/images/AllHandlingServiceSplashTitleLink.jpg" width="225" height="19" alt="Request a Service Online" /></a></td>
		<td rowspan="6">
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_04.jpg" width="158" height="647" alt="" /></td>
		<td>
			<img src="App_Themes/images/spacer.gif" width="1" height="19" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_05.jpg" width="225" height="11" alt="" /></td>
		<td>
			<img src="App_Themes/images/spacer.gif" width="1" height="11" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_06.jpg" width="146" height="617" alt="" /></td>
		<td>
			<a href="Servicing.aspx">
				<img src="App_Themes/images/AllHandlingServiceSplash_inblurbLink.jpg" width="79" height="14" alt="Online Service Request" /></a></td>
		<td>
			<img src="App_Themes/images/spacer.gif" width="1" height="14" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_08.jpg" width="79" height="603" alt="" /></td>
		<td>
			<img src="App_Themes/images/spacer.gif" width="1" height="349" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_09.jpg" width="85" height="254" alt="" /></td>
		<td>
			<a href="ContactUs.aspx">
				<img src="App_Themes/images/AllHandlingServiceSplash_ContactLink.jpg" width="104" height="16" alt="Call an Engineer Today" /></a></td>
		<td rowspan="2">
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_11.jpg" width="12" height="254" alt="" /></td>
		<td>
			<img src="App_Themes/images/spacer.gif" width="1" height="16" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="App_Themes/images/AllHandlingServiceSplashWithSlice_12.jpg" width="104" height="238" alt="" /></td>
		<td>
			<img src="App_Themes/images/spacer.gif" width="1" height="238" alt="" /></td>
	</tr>
</table>
<br />
<img src="App_Themes/serviceBottomimg.jpg" alt="scooter" />
<br />
    
</div>
</asp:Content>

Can anyone spot why FF would mangle it up sooooooooooooo badly?

Thanks Boog's

P.S. Edit: XHTML Validation and CSS Validation passes 100%

[Costin Trifan]

Your html doesn't help me too much here, because it's obvious that your problem is with your CSS.

I'll need your images as well, so I could give you an answer

[Boogle]

Hey Costin,

I solved the problem shown above now, basically, i did a bad job of the slicing and so what photoshop did was insert some fake-non-images called 'spacers' with the width and height of the images set on the fly, which are supposed to take care of my bad slicing... because they weren't actually images, FF wouldn't render them and so the 'spacers' weren't actually there...

I re-did the slicing and infact decided to put the images inside divs manually and it works much better; NOTE TO ALL THOUGH: SLICING IS A BAD TECHNIQUE I HAVE FOND OUT THROUGH EXPERIENCE!

Not only does it create silly work with stupid tables etc, it also won't be SEO friendly (i think) as your text i actually an image and so to make it SEO friendy you would have to use the 'longdesc' of the <img> tag if i'm thinking right and tbh that's too much of a farce!

So all in allthis browser compatability issue is a learning curve... and a slow one at that!

One question Costin: I can't fathom out why FF/Opera renders padding and margins different to IE... like do you know the different ways they do it? Some of my container boxes just don't like up and i know it's because of margins and padding but i can't set them so it works correctly for both?

Thanks,

Boog's

[Costin Trifan]

Hey Nat,
I'm glad you've solved your problem

As about your browser question, I can't give you a straight answer, because I don't have one. Making a site showing good in Firefox, Opera, IE and IE6 is still giving me lots of headaches...
I hate them all, I really do!

You can use conditional comments to apply individual styles to different elements. This way you don't rely on JS to load the right CSS file depending on the browser detected

well, good luck then!

[Boogle]

Why can't they all just be the same?

I want to say... this far into the development... IE seems to be more flexible than the other browsers and thus is best to work with IMO!

So you mean i should use something like

<!--[if IE]>
margins
padding
<![endif]-->
?

That makes sense but not i have like 1gazillion styles that's going to be annoying lol!

Thanks, Costin

[Costin Trifan]

Well, if you have a few classes then use it like this:
<!--[if IE]>
DIV.Style_1 { blah blah blah }
DIV.Style_2 { blah blah blah }
<![endif]-->

But if you have lots of them, use stylelesheets instead:
<!--[if IE]>
<link href="css/styles_1.css" rel="stylesheet" type="text/css" />
<link href="css/styles_2.css" rel="stylesheet" type="text/css" />
<![endif]-->
... and so on