Browser Compatibility

Penguin · Sep 5, 2005

Hey Folks,

When i started building my website i had never even looked at building websites before, i've hit a few bumps along the way and once again i've hit another. Browser Compatibility.

Naturally i want my site to look right in as many browsers as possibly, but firefox and internet explorer are the key two really.

Currently my problem is that i can either make it display correctly in one, or the other. Heres the site http://www.alphaclaw.co.uk

(I'm still working on the site)

If you view the home page in firefox you'll see the nasty display issue, and in internet explorer it looks as i wanted it too.

I don't know how to explain these things in "web designer" terms, but i know pretty much whats going on with the code etc.

I think the problem may be down to the <div> which is a scrolling area.

honestly right now i've no clue what i've done wrong/how to fix it, i've read through the entire source, thinking it may be down to the tables, but i checked it and it seems okay!

Any help much appreciated, i understand poking through masses of code isn't entirely appealing

Penguin.

MKJ · Sep 6, 2005

Can't you be a bit more specific? To my tired eyes they look the same bar for movement of the check box under Firefox? If you want to sort that out just stick <br> under eh - well look for this code:

</select>
<input type="submit" value=" Check Name " />
</form>

replace it with this:

</select><br>
<input type="submit" value=" Check Name " />
</form>

That will move the checkbox in Firefox to the same position as in Explorer.

MKJ · Sep 6, 2005

I can see the issue now. The design at the top. You must be working on it at present though. Just get it up and running in Explorer and let us take a look at it then.

Penguin · Sep 6, 2005

It is setup to work correctly in internet explorer, otherwise obviously i wouldn't have posted it as there would be no use. In firefox it has a horrible graphics glitch for me which is most noticable - The table is streched horribly.

Penguin · Sep 6, 2005

Links not working for me atm, so alternative is http://www.freepgs.com/osprey/

Thanks for checking, i wasn't sure what you meant about the "check box" though?

It displays fine in IE for me, but not right in Firefox.. it's not the same for you?

MKJ · Sep 6, 2005

The upper right graphic isn't showing.

With regards to Firefox altering the site as far as I can see at 1024 768 the right scroll bar is showing with Firefox but not with Explorer. Could be that is the reason you think the tables are being altered because you are losing the width of the scroll bar. This wouldn't be an issue on lower res. To remove unwanted scroll bar tracks (empty) use this code in the page:

<body scroll="auto">

You can add the code to your body tag so that it reads like this:

<body scroll="auto" bgcolor="#ffffff">

That will remove the unwanted scroll bar track in explorer to show a much cleaner site view. Also everything will then have the same dimensions for Explorer and Firefox.

The check box is displaying the same now for Firefox and Explorer - first time I took a look they were different.

MKJ · Sep 6, 2005

the right scroll bar is showing with Firefox but not with Explorer.

Oops - meant the other way around.

Penguin · Sep 6, 2005

Hmm, this is odd, i'll show you how it displays for me, Internet Explorer (As intended): 111kb

http://img50.imageshack.us/img50/3791/upload21iv.gif

Firefox (Incorrect) - I've marked the areas with 2 red crosses which shouldn't exsist.. the area below should be pushed to the left: 111kb

http://img50.imageshack.us/img50/6518/upload15sq.gif

(Low quality images so they load a bit quicker)

Is this how you see it also?

A couple of images hadn't loaded in one screenshot, but thats not an issue.

wyrd_fish · Sep 6, 2005

i think i've had simmilar problems before

gave up and redesigned

but i'm sure there's a way to fix it

Penguin · Sep 6, 2005

MKJ said:
With regards to Firefox altering the site as far as I can see at 1024 768 the right scroll bar is showing with Firefox but not with Explorer. Could be that is the reason you think the tables are being altered because you are losing the width of the scroll bar. This wouldn't be an issue on lower res. To remove unwanted scroll bar tracks (empty) use this code in the page:

No, see the area on the right, it's not meant to be seperate, it's meant to be under the main banner at the top, but firefox seems to drag it out to it's own colum.

MKJ · Sep 6, 2005

Bummer - been looking at the wrong page

.

Take another look now.

Ah at last I can see dah problemo

. Should be able to sort that out now - hopefully.

By the way you gotta hell offa large size gif there - need to change it to jpg and optimize it - asorkastimeanim.GIF=286 kbs!

Penguin · Sep 6, 2005

It's an animated GIF, wouldn't do much if it was a JPG would it?

Thanks MJK, i'm kinda stumped on this one as i don't really have much of an idea whats gone wrong, being my first website i'm really new to this stuff.

Penguin.

MKJ · Sep 6, 2005

My mistake - tis the animation gif. Hell I not with it today. Looking at the code you sure using the table commands in a strange way. I think that is where the problem lies. Will see if I can clear it up now.

Penguin · Sep 6, 2005

Yeah, i'm afraid it does get kinda tricky, see i'm using a table inside a table, to create a thinner border. AFAIK it's the only way to get a border only 1px wide in a table. I've also got more than 1 table inside a table -

MKJ · Sep 6, 2005

I got it working ok in Firefox. I haven't really taken a critical look at the code as it is working. Anyways remove the width command from the inner table on line 81:

<table border="0" cellpadding="0" cellspacing="0" width="100%">

it should look like this:

<table border="0" cellpadding="0" cellspacing="0">

That will pull in the column for Firefox. Not tested anything else so see if it upsets anything

.

By the way there gotta be an easier way to get borders on tables. I use borders all the time on tables and I never nest them like yu have. Tis a wonder it works at all

. Hehe - I take another look later on and simplify it.

Penguin · Sep 6, 2005

Haha, yeah i know it's a bit of a mess i plan on tidying it up once i've got everything.

Thanks loads - It's sorted now! I'd never have spotted something like that. Much appreciated.

SheepCow · Sep 7, 2005

Using tables to display data that's not designed to be in a table = stupid

Tables are for data that should be represented in a table, not for layout.

You should redesign without the tables.

Penguin · Sep 7, 2005

One moment it was displaying fine, and now the problem as returned?! Insanity.

Also Sheepcow, Whats not designed to be in a table? I've got images and text... As i said i'm new to this kind of thing, tables is the only way i know to organize the page. Unless i used Iframes.. ? I'm sure it's doable.. maybe i should just reconstruct this page from scratch and see if i can avoid this problem.

Penguin.

MKJ · Sep 7, 2005

Not sure you need to redo the whole page. Just need some work on the tables is all. Nesting tables is different and your borders can be achieved without that nesting from one table really - I think. You just need to give the cells a background or borders rather than putting a table within a table. I will take a look now cos I finished messing with my own site for the day.

Penguin · Sep 7, 2005

This is insane.. i checked again just now and it loaded fine?!

Penguin · Sep 7, 2005

I saved the site to my hard drive ..opened in firefox and it appears fine.. it only seems to screw up when i view it online? You still see this glitch too MKJ?

SheepCow · Sep 7, 2005

http://dig.ninjagrapefruit.com/tmp/penguin/

That is one way of making a site design like this without tables.

MKJ · Sep 7, 2005

The glitch has returned for sure - but I had already noticed it doesn't show if you load it on your hard drive. I transfered the files to my server to see the error. I been working on your design and nesting tables is a real headache. Going to try once more to see if it can be made a lot simpler. Think the best approach is for you to have a go with css cos you get great control over everything then.

Penguin · Sep 7, 2005

Thanks Sheepcow - Should come in handy, perhaps i will have to redesign then

Think i would be able to evade this problem using your method?

It's okay MJK, i think sheepcows probably right. I'll redo the homepage quickly (Copy and paste alot of the code) and move onto the other pages later. Thanks for all your help though.

Penguin.

Browser Compatibility

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Bringer of Code

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Fledgling Freddie

Bringer of Code

Fledgling Freddie

Fledgling Freddie

Users who are viewing this thread

Similar threads