my website doesn't display properly in IE7 (^n^)

Reds-on-Sea

Hiya,

hope this is the right place to post, It's my 1st time in the techie forum.

I'd love if someone could help me out or point me in the right direction at least.

I've been nominated web designer for my band - all good, I need the practice. I've made a website using dreamweaver (I'm a graphic designer so I know a bit, but self taught as far as web is concerned) I made my own template and used the same one for each page, but when I open it up in Internet Explorer 7, some pages display differently, it moves up & down - I've tried redoing pages etc, but it doesn't fix it. I've made other websites which are fine & I just can't figure this one out.

Any advice please? https://www.mbbb.co.uk

thanks xx

john_s_2

What do you mean "it moves up and down"? I had a quick flick through all your pages (from the links at the top) and I couldn't see anything obviously wrong. But I'm using Firefox 3.0.8 with javascript turned off so not sure if that will make a difference to how IE7 will display it. (Is it the header.gif image that's moving up and down? It stays the same for me.)

Is it only IE7 that shows it wonky? Is it OK in other browsers?

M4RKM

Can't see any reason why it shouldn't display correctly in IE7, but IE is notorious for writing it's own rules on interpreting webpages.

have you thought about designing the web page using divs, floats, and css alone rather than tables. Tables are a reasonably outdated way of making a layout for a website, and css / divs are the "correct" way..

again, i'm not on IE right now, but could check tomorrow morning, and work out why it's not working right when i hit the office

M

Meepster

Works fine in Chrome...

poppy10_2

Looks fine in IE8, but in IE7 compatibility view then you get the same problem - different pages have the site's menubar showing at different heights.

To be honest, this is going to be a pain to debug - it looks like it's just a quirk of the non-compliant way IE7 renders pages. With IE8 being pushed out to the masses via Automatic Updates I wouldn't bother about trying to code specifically for the old browser.

terakris

There are problems with your code. Quickest fix will be to go through the HTML and look for anything like this;

<table width="100%" height="1138" border="0" cellspacing="1">
or
<td height="505" align="center" valign="top">

Where you find these areas, remove the height="xxx" bit highlighted below;

<table width="100%" height="1138" border="0" cellspacing="1">
or
<td height="505" align="center" valign="top">

They are not needed and are in fact invalid html - that should sort the problem from quickly looking at your code. If not, drop me a PM and ill email you a template or something to replace your code.

As mentioned earlier idealy you would be using DIV's and CSS to position your site, but you really need to know what your doing to work on those kinda things

trcooke

poppy10 wrote: »

With IE8 being pushed out to the masses via Automatic Updates I wouldn't bother about trying to code specifically for the old browser.

Tut tut poppy, poor advice indeed. You'd be surprised the number of people who don't or won't upgrade to the latest and "greatest" version of IE. IE6 is still pretty popular and to give up on IE7 as a bad job would be excluding a hefty portion of the OP's target audience.

It's likely that the problem is not specific to IE7 but effects most recent IE versions (probably from 5.5 up).

markymoo has the best advice here with respect to using <div> elements for content and css for layout instead of tables for both.

Searching for "IE broken box model" might shed some light on your IE issues. IE, in their infinite wisdom, decided not to implement the W3C box model so margins and padding are rendered differently.

Also, take a look here for a possible solution: http://stackoverflow.com/questions/505841/best-work-around-for-the-broken-box-model-in-ie6-w-respect-to-padding

poppy10_2

trcooke wrote: »

It's likely that the problem is not specific to IE7 but effects most recent IE versions (probably from 5.5 up).

It doesn't affect IE6

droopsnoot

I've found the guys over at www.sitepoint.com very helpful in diagnosing stuff like this, IMO it's going to be an issue with not specifying a parameter and allowing the browser to make assumptions about what it should use. But then I'm still learning.

The other comments about using DIVs and CSS instead of tables for layout are valid as long as you've got the time to figure it all out. That code looks quite like the output from Dreamweaver to me, in which case (depending on the version of DW) you're limited to how much control you have unless you use their HTML editor.

Reds-on-Sea

Thanks all, esp terakris & droopsnoot for your help. I'm pretty sure it displays properly in all other browsers. I didn't think it would be a 'specifying a paramater' mistake, as I used the same menu etc for all pages, but I'll def go over it all with a fine toothed comb.

I'm using quite an old dreamweaver (MX!) and I used an old book teaching MX to make my website too! I am doing it for free after all though! but I'd like to get to grips with css etc etc.

SonOfJack

This is a good overview on how to test for older and different browsers...

freelancefolder.com/7-fresh-and-simple-ways-to-test-cross-browser-compatibility/