Browser compatibility Problem

  kwikmann 09:26 23 Aug 06
Locked

I am a Silver Surfer and really enjoy making my own webpages/sites using just "Windows" Notepad + HTML and CSS but find it frustrating to say the least to find that after spending a lot of time trying to construct a webpage only to find that it won't display as i would like in IE6, Firefox and Opera. Could someone point me to a tutorial or even give me some advice on this subject please. Any help or advice would be really appreciated. Thanks everyone.
Kwikmann

  Ade_1 10:30 23 Aug 06

I cant really offer alot of advice in terms of how to solve it but I have the same problem.

Please forgive me if I have misread what you have posted but it appears to me that you construct the pages and then see what it looks like?

What I would suggest is to check each browser along the way. Although I personally would focus mainly on IE and Firefox as they ,in my opinion, are the most popular browsers.

Just a little bit of info on Firefox if you didnt know. Firefox adds its own padding which can often lead to mis alignment especially if your using CSS.

There are certain "hacks" which you can implement to take off the padding in IE or add padding in IE etc... Although im not sure where you would find one. Maybe someone else may be able to suggest a website that gives you information on these "hacks"


Aidan

  Ade_1 10:33 23 Aug 06

Here, take a look at this thread - click here

"slightlymad" has explained it slightly better than what I have about the padding in Firefox.

Aidan

  kwikmann 11:49 23 Aug 06

Hiya Ade_1
Thanks for the reply mate. I have had a look at "Slightlymad's" explanation and will give it a go and see how things turn out. Cheers. Kwikmann

  slightlymad 15:41 23 Aug 06

Mine was a very scant explanation, so I'll elaborate...

Browsers apply style sheets to all web documents. Although these style sheets vary from browser to browser, they all have common characteristics such as black text, blue links, purple visited links etc. These are referred to as a "default" browser stylesheet.

Some browsers will use padding for the default space around the page and some will use the margin property. Therefore both of these properties need to be explicitly set to ensure that all pages start on a level playing field.

As soon as you apply a style sheet to a document, it will override the browser's style sheet.

Each block tag has margins and padding by default that are read differently by each browser if they aren't explicitly defined.

The most common tag is <body>, but it's also the case for all the block tags: paragraph (<p>), citation (<blockquote>), form (<form>), list (<ul>, <li>), titles (<h1, h2, h3 etc>), and more.
Except for <div> which is the only block tag that doesn't have padding and margins by default.

Take for example <body>. If you don't define its margins you will get a space at the top left of your site. These are the margins for the document and their size varies according to different browsers.

It's the same thing for the paragraph (<p>) tag which has a bottom margin by default; this is why it looks like you have an extra line between each paragraph. Suppressing the bottom margin would suppress this "extra line" {margin-bottom:0}

These default margins can create unforeseen positioning problems. A list (<ul>) won't be displayed on the same spot on IE or on Mozilla simply because of the margins by default around it.

You could use the universal selector (matches all elements) to set the padding and margins for all elements to zero. This would avoid the browsers default on all elements, but it is inadvisable as you would then have to explicitly set every margin and padding that you need (including a 16px left margin (or padding) on UL otherwise the bullets won't show).

* {padding:0;margin:0}

Whew. Hope this all makes sense, and that it helps.

Marie

  kwikmann 17:00 23 Aug 06

Just like to say a very big thank you for taking the time and trouble to print out such a clear and elaborate explanation. Webpage now appears and displays in IE6, Firefox and Opera almost exactly as i wanted it too. A few minor items to be sorted before validation. Would really like to learn all i can about webpage design and appreciate the title of any books or the URL's of any tutorials where i may continue to learn. Many thanks. Kwikmann

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

Sniper Elite 4 review: Headshotting Nazis has never felt so good

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

The Best Design, Illustration, Animation and VFX Awards of 2017

WWDC 2017 dates: How to get WWDC 2017 tickets, when is WWDC 2017 and more details announced