Site looks different in Firefox vs IE

[Mike Lewis]

Hi All,

I'm trying to learn HTML and CSS. Previously, I just used Frontpage to create my sites, but now I'm trying to hand-code my HTML, mainly to help me understand how it works.

I've been creating a site, and previewing it in my browser (Firefox) as I went along. Everything looked fine. Then I decided to view it in Internet Explorer. I was really surprised at how different it looks.

Basically, IE seems to place a lot more vertical white space between the elements than Firefox does. For example, a vertical list of links, which looks just right in Firefox, looks a lot more stretched in IE.

I'm not going to ask you folk to comment or debug my individual tags or styles. I'd just like to know whether this behaviour is normal -- if it's just something I should put up with? Is it a well-known problem? If so, is there a well-known solution, or should I not worry about it?

Thanks in advance for your help.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk

 

[vacunita]

Internet Explorer has differences when rendering, because it does not adhere to standards the way other browsers do.

You should to make IE behave as close to standards as it can use a valid doctype, and make sure all your code validates.

Also you can use special css to to remove all margins and paddings on objects.

This will make developing easier as there is no extra space affecting objects.

you might want to google "IE's box model" and "IE Quirks mode" to learn more about how and why IE does things differently than the rest, and how to code more effectively to avoid it.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Mike Lewis]

Vacunita,

Many thanks for your helpful reply. I'll follow up those suggestions.

I was a bit worried that I had made some fundamental mistake in my coding, but your reply has reassured me.

Mike


__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk

 

[ca8msm]

As vacunita said above, you can reset margins and paddings which will then mean they are only applied when and if you supply them. I always start my sites with the following CSS:

* {padding: 0; margin: 0;}

So whilst you may still have a bit more work to do after this, it's a good start and you may notice big changes with just this one method.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Mike Lewis]

Ca8msm,

* {padding: 0; margin: 0;}

You're right -- I did notice a big change. Now all the vertical space has gone (which is what you would expect). But IE is still looking less squashed than FireFox, so at least that's consistent.

It looks like you've put me on the right track. I'll now examine all the individual padding and margin settings throughtout the style sheet, and see what I come up with.

Thanks.

Mike


__________________________________
Mike Lewis (Edinburgh, Scotland)

My Visual FoxPro site: www.ml-consult.co.uk