How to fix layout changes between Firefox and IE?

  gplatt2000 11:35 20 Jan 06
Locked

Hi all

Just 'finished' making a site for a friend, but now I've been checing it in IE/Firefox (to be honest Ive not really done much in the way of making compatible with different browsers before, so don't really know exactly how to do this properly)

Anyway, the site seems to work fine in Firefox.
It also seems OK, in general, in a few different versions of IE, other than the 'about me' pages - click here

In Firefox, all is well. But in IE, the 'next' link at the bottom is always off the bottom of the main 'box'. It looks like the spaces between paragraphs are bigger in IE than in Firefox?

Any ideas why this ould be and how to solve it would be awesome, cheers. Any info/links in general about browser compatability would be great too.

Let me know if there's any more info/code etc you need to see

Thanks a lot

  PurplePenny 14:16 20 Jan 06

The 'next' link is also outside the box in Firefox on my screen and increasing the text size makes matters even worse.

In IE the last line of text is half out of the box as well.

You could make the paragraph gaps smaller in IE by using a conditional statement (ifIE) but that wouldn't solve the problem of the text going outside the box if users resize the text.

  Eric10 14:25 20 Jan 06

The alignment is out when viewed in Opera also.
For a more permanent solution I suggest that you load mainbox.gif into your image editor and trim off the surplus white area from the bottom, leaving just enough for the white border. Next resize this image to 403 x 403 pixels then resave it.
Now on each of your pages, change the table that contains mainbox.gif to have a height of 403 instead of your current 384. This will also improve your home page where the images overlap the bottom of the box.
While you are on that line you could also correct the typing error 'vailgn="middle"' to 'valign="middle"'.

  ade.h 16:04 20 Jan 06

It looks fine for me (F'fox 1.5) which may mean that you have fixed it.

Could you pass on to your friend my compliments on his work? Absolutely excellent!

Oh, and your site design is nice too. Does his work some justice.

  gplatt2000 17:37 24 Jan 06

Thanks a lot for all your comments and help everyone, much appreciated.

I've made a few small changes, and, from what I can tell, it seems to be better.

Let me know how it looks to you - click here

Eric - I still have to change the spelling error so please don't think I'm ignoring your advice! I'm just lazy and not had much time at the minute but I'll get round to it before the final site is uploaded.

Thanks again

Gavin

  Eric10 20:09 24 Jan 06

It looks much better in IE but is no better when viewed in Opera.

  PurplePenny 22:10 24 Jan 06

The 1st 'about' page still doesn't work on my Firefox. I'm now seeing part of the background image tiled to the right and the 'next' link is still off the bottom. Ditto IE.

If I enlarge the font once (which I do on a lot of sites) the first page tiles too (downwards).

Couldn't you just use a bigger background box?

  gplatt2000 22:33 24 Jan 06

Yeah it's looking like it'll have to be a bigger box, bit of a shame as I love the way it looks here at home! But never mind, I uppose it's the easiest way to solve the problem.

I'll update it soon and see how it goes

One more thing - Eric, in your first post you mention ' trim off the surplus white area from the bottom, leaving just enough for the white border'. I'm not too sure exactly which part you mean by this - just the blank (transparent) part of the .gif?

Thanks again

  Eric10 12:16 26 Jan 06

When I loaded mainbox.gif into Paint Shop Pro there was a white section at the bottom of the graduated square. It didn't appear transparent but when I include it in a coloured webpage I see that it actually is. When you are specifying a height for the cell that contains the gif, however, it takes into account the whole image including the transparent section which doesn't seem to have any valid purpose except perhaps to space down your copyright notice which could be achieved by more conventional means.

This thread is now locked and can not be replied to.

Qualcomm Snapdragon 835 benchmarks: Antutu, Geekbench 4, GFXBench and PCMark results

1995-2015: How technology has changed the world in 20 years

This animated short film tells a moving story of domestic violence for Refuge

New iPad 2017 preview: Apple's affordable but underspecced new iPad may appeal to the education…