Looking for a little help - cross browser support

PaulStat · 2 Aug 2011 at 11:26

Hi Guys,

I've been asked by marketing to knock up a "landing page" this is basically a dynamic page people see after clicking on a link in an email

*edit link removed* - err thanks for confirming your details Frank Slate, that's quite enough of that thank you.

Now I'll admit it's a bit of a botch job as time scales are short and my CSS experience is limited to one website, my own, of which I have ripped quite a bit of the CSS from and butchered it to suit.

So a couple of questions

1. It looks great in Firefox 5 and IE 8, but not so great in IE 7, how do I fix this?
2. The vertical scroll bar is always there despite not having anything to scroll to, how do I fix this?

Ta very muchly

Sin_Chase · 2 Aug 2011 at 11:39

Scroll bar is there likely because you have 'pushed' and element outside of the body boundary. Perhaps padding or a margin on another element is causing it also.

What is actually broken in IE7? Cross browser compatibility is a TOTAL pain in the arse, they all like to interpret padding a little bit differently for example.

PaulStat · 2 Aug 2011 at 11:42

Well in FF it looks like this

And in IE7 it looks like this

gord · 2 Aug 2011 at 12:16

Get Firebug for your Firefox and use the element inspect tool. Youll notice that your HTML is too tall (something I havnt found the source of yet) and your rightbody ID is too wide.

gord · 2 Aug 2011 at 12:27

Your height issue relates to your centre graphic. Div id centregraphic. It has a huge negative top position value and that isnt good.

Generally your markup and css is a mess. I know you say time is short, but this will take you less time to do a simple box setup with a header, a main container with 3 boxes inside, one for the left pane, one for the centre graphic and one for the right pane and then a footer.

PaulStat · 2 Aug 2011 at 14:02

Thanks gord, useful little tool

visibleman · 2 Aug 2011 at 14:10

Although i 100% agree with Gord in that you should really redo the CSS, a nasty bodge for the scrollbar is to set 'overflow: hidden;' on the body tag; and to left align IE (like it is in FF) then try 'text-align: left;' on the body tag (that should work, haven't tested it though).