IE7 problems...

Gooner · #1 (**permalink**) Aug 17th, 2007, 10:12

Hello evereyone, I feel bad that my first post is a cry for help, but I really need someone to give me a hand as to what's the problem.

The thing is, when I view my website in IE7, it works perfectly, but in Firefox and IE6, it just goes haywire. The posistioning is all out.

So, can anyone help? Below are some screen shots and links to the website where you can view source.

Thanks in advance

Gooner

IE6 - All crazy looking

IE7 - Lovely...

1840dsgn · #2 (**permalink**) Aug 17th, 2007, 10:18

Eugh Arsenal fan I presume!

Well first tip is always design for the most standards compliant browser, then tweak it to work in the less compliant browsers. So this means design for Firefox. once it is working in firefox you can tweak it to work in IE - you should use a IE specific stylesheet and conditional comments (see my blog link in my sig for an article I wrote or there are plenty scattered about the internet).

So my advice to you would be - go edit your stylesheet so it looks right in firefox - you can then use an ie specific stylesheet to tweak the layout so it works in ie7, you could then use an ie6 specific stylesheet to get it working in ie6

mike

Gooner · #3 (**permalink**) Aug 17th, 2007, 10:26

That. Is. Brilliant!

That's just what I need. Nice one.

P.S. Up the Gunners! :P

1840dsgn · #4 (**permalink**) Aug 17th, 2007, 10:30

haha glad to be of help!

Any questions just ask.

Gooner · #5 (**permalink**) Aug 17th, 2007, 10:56

Cool.

That is a nice site you've got there.

It turns out though, my problem was to do with this line of code;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

As soon as I got rid of this, it worked fine on all browsers (well, IE6,7 and the Fox!).

Just would like to know if that line of code I got rid of is important, as I don't want to go and say 'Done it!' and then for it to go all crazy further down the line.

What do you reckon?

Cheers!

Lchad · #6 (**permalink**) Aug 17th, 2007, 11:15

Yes that line is of utmost importance. You must put it back.

That line is what tells all the browsers what language your site is speaking. It aids the browsers in displaying things correctly. (or incorrectly if you have errors)

You'll need to take Mike's advice. Start over, using FF as your guide. Then I bet you will only need to tweak a couple of things for IE!

1840dsgn · #7 (**permalink**) Aug 17th, 2007, 11:20

Yea that is important! possibly one of the most important!

That is your doctype and tells browsers how to render the page.

You could try changing it to this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

That is a transitional doctype as opposed to the strict one you are using at the moment. Bascially its not as standards ciompliant as the strcit one.

Strict is the best to go with though and your best sticking with that if you have the time to fix your styles - strict is what i recommend.

Read this for more info on doctypes:

Fix your site with the right DOCTYPE!

Gooner · #8 (**permalink**) Aug 17th, 2007, 11:50

Awww...

I was so close!

Looks like there's no easy way to do this then. I'll just have to sort out my CSS.

One question though, would it work if I was to use this code;

code (xhtml)
<!–[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<!– replace ie.css with the path to your own IE stylesheet–>
<![endif]–>

Would I just have to paste this into the <head> section?

Thanks for all your help.

1840dsgn · #9 (**permalink**) Aug 17th, 2007, 12:03

Yea if you follow my article thoruhg it should make sense.

Basically your head structure would be like this:

Code: Select all

 
<head>
 
- call your main stylesheet (the one that works in firefox)
 
- call your ie stylesheet with a conditional comment
 
- call any othe specific stylesheets for specific versions
 
</head>

This will then render yor main stylsheet, then if its IE7 it will then render the IE specific styles, which will override the ones from the main stylesheet, then it will laod any version specific stylehseets overwriting styles form both the main and ie7 styles!

So if in the main you had:

#container {padding: 5px;}

and in ie.css

#container {padding: 3px;}

and in ie6.css

#container {padding: 0px;}

Then in Firefox and other browsers there would be 5px padding, in all versions of ie there would be 3px padding, except for ie6 where there would be no padding.

hope that makes sense.

1840dsgn · #10 (**permalink**) Aug 17th, 2007, 12:22

Obviously you need to call the ie stylesheets by conditional comments as explained in the article.

And the stylesheets can be called whatever you like...I just find it easy for organistaions sakes that they are called main, ie, ie6, ie5 etc.

Your next steps should be:

- make the main stylesheet work in firefox
- once its working test in ie7, if it needs tweaking, try tweaking within the main stylesheet
- if you can't get it to disaply properly in both FF and IE7 then create ie.css, a css file with tweaks for IE, rememebr,m you need to overwrite selectors from the mian stylesheet.
- call the ie stylesheet for all IE browsers and check it in ie7 and ie6
- if you need t0 make tweaks for ie6 you can add a further stylesheet and call it with an ie6 conditional comment

Gooner · #11 (**permalink**) Aug 17th, 2007, 12:47

Well, I seem to be doing as your site says, but it still calls upon the IE7 CSS. I've put a link to the screenshot of the code. It might make it clear just what it is I'm doing wrong.

Also, even if I put the line

(code xhtml)

it still doesn't work. It just shows up as text on the site.

Appologies again, but this is just killing me.

Gooner · #12 (**permalink**) Aug 17th, 2007, 12:49

1840dsgn · #13 (**permalink**) Aug 17th, 2007, 12:59

Do you mean in Ie6 it still calls on the ie7 css?

if so read down my article at the bottom it explains why...

if your usinf standlone browsers on the same computer then it identifies every version as the latest version you have installed. so ie6 will be recognised as ie7. So it probably is wokring...you just can't see it happening.

also see the article for a workaround

Gooner · #14 (**permalink**) Aug 21st, 2007, 09:28

OK, so, I've got it working, IE7 now does what I ask it to, which is very nice.

Just wondering if you think this is a good long term idea? I'm saying this because it now means that I have two CSS scripts that I have to deal with, and who knows, when 7.5 (or whatever they call it) rears it's ugly head, will I have this problem all over again? Should I try and figure out a more solid solution, or am I just begining to enjoy the wonders of Site making. Gory bits an' all?

1840dsgn · #15 (**permalink**) Aug 21st, 2007, 10:08

Well if you think of it this way...

your always going to have to fiddle to get your site working in IE and Firefox because they do render CSS differently.

You will have one main stylesheet you can tweak to make it look how you want in Firefox, and then you have one where you just change the troublesome selectors.

So your IE stylesheet shouldn't be a copy of the stylesheet. Just overiding the problematic bits. If in you FF stylesheet you have a #container that isn't working in IE. But everything else is...all you IE stylesheet has to contain is

#container and its new properties - you don't need to copy everythign else.

So back to my point - your going to have to fix it in IE anyway, so I find it easier this way and you haven't used hundreds of unstable hacks - your using proper CSS rules to get byour look.

Personally I think this wins hands down all the time!

pa007 · #16 (**permalink**) Aug 21st, 2007, 10:31

Your IE 6 stylesheet will always work. The worst that could happen in the future is you need to alter your main stylesheet or add another one.

I also think that it's ridiculous that you can't view the ie specific stylesheets with multiple installs of ie. It's the bane of my life. You can get them working but it requires a registry hack and there is no way I'm doing that.

Pete.

Gooner · #17 (**permalink**) Aug 21st, 2007, 10:51

Well, that's the end of that then...

Thanks to everyone for your help, especially 1840, who was spot on with his first post. (I assume you're a man, as you have a man in a tux avatar)

I'll be sure to stick around on these forums. It's refreshing to see people actually use English as apposed to "L33t". That is truly the language of idiots, it REALLY grates me.

But, that's another matter. Thanks once again...

Gooner

1840dsgn · #18 (**permalink**) Aug 21st, 2007, 13:02

no problems - yup i'm a bloke lol.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
IE Problems	AndrewChip	Web Page Design	9	Dec 29th, 2007 14:35
Problems with IE7	duncanelliot	Web Page Design	7	Nov 12th, 2007 15:15
Problems with IE	etoare	Web Page Design	5	Jun 14th, 2007 20:40
Having some problems, with IE and FF	Powderhound	Web Page Design	10	Oct 25th, 2006 22:12
IE/FF Problems	adamas85	Web Page Design	3	Apr 21st, 2006 01:51

		Webforumz.com > Main Forums > Design Your Website > Starting Out
IE7 problems...