Browser Compatability

[afcredultra]

I am having a few issues when desinging for I.E and Firefox.

My layouts I do 100% CSS and look fine in Inet Explorer, however they are all over the place in Firefox!!

I would just like to know HOW exactly, you get around this, so that your site displays the same in FF that it does in I.E. I can't seem to get my head round it.

If I change one thing to make it look OK in I.E, it looks screwed up in FF, and vice versa.

Maybe someone can point me in the right direction of where to look so that my layouts can be x-browser compatible!!

cheers,

[Jabber_uk]

Got any site examples or is it the one in your sig?

[iany]

It is a general rule that you should use FF (preferably the most up-to-date version) to design sites using CSS as IE doesn't render correctly. After getting it to work ok in FF, there will be a few minor tweeks to get to work in IE. Unfortunately it doesn't look as if IE7 is going to be much better. For the definitive approach, best to go to the Eric Meyer discussion forum at http://www.css-discuss.org/mailman/listinfo/css-d

What these guys don't know ain't worth knowing. There is a comprehensive WIKI and the responses are prompt and very helpful.

However, if you have a link we can have a look here first.

Cheers

Ian

[pavelhlavsa]

On your http://www.theglenkindiearmshotel.com/index/map
when one goes to the Map you state:
"To open up an enlarged version of the map to The Glenkindie Arms Hotel, please click the thumbnail below."
I can't see any thumbnail. Also clicking on the links one is taken away from your website. Why not open in new instance instead let your visitor to go away?
Paul

[minorgod]

My advice is, don't believe the CSS hype. I am officially starting a CSS rebellion and will no longer waste my time trying to use CSS to create the actual layout of a page. I now use CSS only for styling individual elements, not to define their position or vertical/horizontal dimensions. After very extensive testing and research (not to mention 10+ years of experience) I have switched back to using tables instead of wasting my life with tedious CSS hacks that may or may not work for a particular layout. No matter how many css hacks you employ, some browsers (usually Explorer and Opera) will still have issues unless you use one of the 3 known layouts that actually work in all browsers. Go ahead, try to put together a multi-column design that will expand vertically to fit its contents, I tripple-dog-dare you (and if you succeed I'll congratulate you on wasting hours trying to accomplish something that would take about a minute to do with tables). At this stage of browser development there's simply no excuse for the sorry state of CSS. Here's my profanity-laden take on the subject:

http://electrongun.blogspot.com/2006...er-makers.html

I urge you all to join me in rebelling against CSS until the standards committees and the browser makers can get their act together.

[gowilkes]

I'm with MinorGod on this one. I've used CSS on my sites almost since the 4.0's were out, but I've NEVER trusted it exclusively. I use tables and other HTML tags to design, then CSS to make minor adjustments.

[iany]

seems to be workmen blaming tools here.

Sure the purist will argue that tables should never be used but hey be pragmatic. As for making multiple columns that expand with content. DOn't know where you have been, but that is relatively easy currently see http://www.communitymx.com/content/a....cfm?cid=AFC58
for faux columns. Cool. Have to say, I see more bad code in table designed sites that ever do with css. Have to say that never have any problem with Opera. If works in FF, tends to work in Opera. Just good old IE that has problems and even that doesn't take much time.

In beginning it takes longer to sus out layouts, but once the tricks are learned, it is as quick, if not quicker than using tables and easier to make W3 compliant.

Ian

[bj]

minorgod and gowilkes, all the problems have pretty much been solved in CSS. Yes, we wish IE would toe the line on compliance, but they don't. Sounds like you'd rather whine and b*tch than read and learn.

afcredultra, you've been given some good advice. Definitely design for Firefox or Opera or Safari and then FIX for IE6. Also, joining the css-discuss group, and making lots of mistakes when digging in and learning, is the absolute best way to learn. You might also find this helpful:


Kickass WebGeek Resources CSS Section

[nkycomputers]

Give everything in your css a value if it applies.

Example...
Instead of...
h1 {font-size: 18px;}
h2 {font-size: 14px;}
h3 {font-size: 12px;}
Do...
h1 {
font-size: 1.6em;
font-family: arial;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h2 {
font-size: 1.4em;
font-family: arial;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h3 {
font-size: 1.2em;
font-family: arial;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

It takes extra code and typing but you won't need to use any hacks for what you are trying to do. Do this for all the elements and tags in your page. You will have to do a little research or trial and error to figure out what applies to each element but if you specify everything you will have better control of your page.

Hope this helps let me know if you have any questions.

[gowilkes]

BJ, you're partially correct. It's not that I would rather whine than to read and learn, it's that I haven't found a need to move exclusively to CSS when I can do the same thing in HTML and tables. I just don't see the point in wasting time and risking the problems of other browsers if it's not necessary.

Roughly 90% of my site's visitors are using IE5.5+ (and less than 2% are using Opera or FF). Why should I optimize for other browsers and "fix" for IE, when it should obviously be the other way around?

[tcustomgolf]

Why should I optimize for other browsers and "fix" for IE, when it should obviously be the other way around?

Beautifully said....

[bj]

You design for the compliant browsers since they basically get it RIGHT if you write compliant code. Then you fix for IE since IE rarely gets it right. You put the IE fixes into a separate IE stylesheet called by a conditional comment for IE6 and lower. That way your code is futureproofed, just in case IE7 does get it right (which is a long shot.) All my sites work in IE. They also work in all the other browsers. And not one of them uses tables for layout.

Gowilkes, re your stats-- I find them truly amazing. IE represents only 40.3% of my webtraffic, Firefox 33%, and other compliant browsers around 10% (unknown at around 16%) so it appears that more people are surfing my site with compliant browsers than not, if you disregard the unknowns. That's on my dev site, my other more general sites are showing just a bit higher on IE, but not a whole lot higher. Your stats are definitely not anywhere near the "norm" or average. One wonders if there are features of your site that are so IEcentric that they are skewing your stats? I just peeked at your homepage and couldn't see anything obvious. If that is the case you're hurting yourself.

[webecho]

Originally Posted by nkycomputers

Give everything in your css a value if it applies.

Example...
Instead of...
h1 {font-size: 18px;}
h2 {font-size: 14px;}
h3 {font-size: 12px;}
Do...
h1 {
font-size: 1.6em;
font-family: arial;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h2 {
font-size: 1.4em;
font-family: arial;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h3 {
font-size: 1.2em;
font-family: arial;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

It takes extra code and typing but you won't need to use any hacks for what you are trying to do. Do this for all the elements and tags in your page. You will have to do a little research or trial and error to figure out what applies to each element but if you specify everything you will have better control of your page.

Hope this helps let me know if you have any questions.

You're making a huge amount of work for yourself there mate.

It's far easier to use a statment declaring all html to follow a basic set of rules then you only have to change the differences:

html {font-family: arial, sans-serif;margin:0;}
h1{font-size:1.6em;}
h2{font-size:1.4em;}
h3{font-size:1.2em;}

I also find it really useful to start any CSS file with

*{margin:0;padding:0;}

This gets rid of any differences in browsers and you just need to amend the padding / margin on individual elements that need it

e.g.

h1{margin:10px 0 0;}

(gives it a 10px margin at the top)


Gowilkes and Minorgod:
I design every website using XHTML and CSS and will only use tables for data that is better presented in a table e.g. item and price lists , even then, most things can be presented easily using definition list (dl).

There is the occasional stumbling block with IE but never anything that can't be worked around with a little thought. afcredultra is trying to use CSS and that should be comended not slated!

afcredultra: as mentioned , design in Firefox and adjust for IE, try and find a way around it without using hacks (if possible)

CSS forums is full of very knowledgable, skilled designers (ask and they will happily help you)

If using FF to design in , download the Web Developer toolbar, as well as providing links to validate your code and CSS (great way to find and fix problems) it offers tools like "Outline Current Element", an easy way to see exactly what that troublesome part is related to and how the parents may be afffecting it.

Don't give up on the CSS! You will be rewarded with a quicker loading, cleaner and more Search Engine Friendly website.

(climbs off soapbox...)


Post the url and describe some of the problems, I'm happy to help out
Webecho

[ACross]

Originally Posted by gowilkes

Why should I optimize for other browsers and "fix" for IE, when it should obviously be the other way around?

Originally Posted by bj

You design for the compliant browsers since they basically get it RIGHT if you write compliant code.

Afcredultra, BJ is right. If you design (CSS) using a compliant browser first, the tweaks needed to make the design work in IE are generally small.

On the other hand, it is much harder to tweak a design created using IE. So even if IE is your browser of choice, you will be much less frustrated with CSS if you use another browser. My personal favorite is Firefox.

Originally Posted by nkycomputers

Give everything in your css a value if it applies...

h1 {
font-size: 1.6em;
font-family: arial;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

...It takes extra code and typing but...

Good advice from nkycomputers. And you can cut down on the code by using shorthand notation. For example the h1 tag above could be written like this:

h1 {
font: 1.6em arial;
margin: 0px 0px 0px 0px;
}

like this:

h1 {font: 1.6em arial;margin: 0 0 0 0;}

or even like this:

h1 {font: 1.6em arial;margin:0;}


("0" doesn't require the unit designator, all other values do.)

A great introduction to CSS shorthand can be found at builder.com. (You may need to register...)
builder.com.com/5100-6371_14-5400557.html?tag=sc

Perhaps the best practice for using different code for IE is as BJ says, using a conditional comment, but I prefer to keep it all in the same file. It is easier for me when the two variations are together.

I can't take credit for this, I stumbled upon it while studying someone else's code, but I like the way it works:

h1 {font: 1.6em/1.9em arial;margin:0;color:#900;}
html>body h1 {font: 1.7em/2em arial;}

Currently, IE ignores the tag definition following "html>body". You only need to include what is being changed. In the above example, the size of the font and the line height are being adjusted for Firefox/Netscape.

If you're serious about learning to design using CSS layout, you will save yourself a lot of grief if you use a compliant browser.

Hope some of this helps.
-ACross

[ron angel]

Originally Posted by afcredultra

I am having a few issues when desinging for I.E and Firefox.

My layouts I do 100% CSS and look fine in Inet Explorer, however they are all over the place in Firefox!!

I would just like to know HOW exactly, you get around this, so that your site displays the same in FF that it does in I.E. I can't seem to get my head round it.

If I change one thing to make it look OK in I.E, it looks screwed up in FF, and vice versa.

Maybe someone can point me in the right direction of where to look so that my layouts can be x-browser compatible!!

cheers,

Forget all the fancy stuff pop ups, flash,ect
simple to use microsoft frontpage or pro.
when it is all working ok go to:
http://www.sitereportcard.com/
use the HTML Validation & replace what it suggests on your page (keep backup of your original of course)
then the page will work ok in most browsers if not
just put your stuff back- simple costs nothing this site will show you many things you did not know were wrong on your pages.


The richard montgomery matter

[danners02]

Internet Explorer is an awful browser and a bain in all coders life! You should create one stylesheet for Firefox and all standards compliant browsers, then 1 for Internet Explorer and then another for Internet Explorer 5*. Below is the code to use in the <HEAD>, only IE will read the second stylesheet and only IE5* will read in third stylesheet

<link rel="stylesheet" href="style.css">



An example at http://www.naughtybitsandbobs.com

[eddster]

....or alternatively, instead of using 3 seperate style sheets, use a table for your layout. It's what it was invented for.

Gowilkes and Minorgod: spot on boys.

I still haven't seen a convincing argument for design for firefox etc and then tweaking for ie.

Until ie becomes the least used browser, design for ie.

Before I get torn down by everyone, I do agree that ie is flawed as far as CSS implementation goes. I've done some experimenting with different sized images and layering where I knew the exact size of the images. The rendering is way out sometimes. However, use tables. No issue then. :)

[webecho]

"Gowilkes and Minorgod: spot on boys.
I still haven't seen a convincing argument for design for firefox etc and then tweaking for ie."
- eddster

Mainly because anyone using a non-IE browser doesn't get to view your (or worse your customers!) website.

As for tables:
Why tables for layout are stupid!

Webecho

[MuNKyonline]

It's incorrect to say to use CSS for future compliancy with new browsers. Why would they suddenly remove tables from being supported when there are billions of web sites that are designed using tables?? Actually come to think of it, that just about sounds stupid enough for something that i'd expect Microsoft to do.

It's best to use a combination of the two. CSS can help speed up a page downloading time but with most people having broadband now, this is just a very small issue.

When css makes a web site take longer to create it has cost implications to the customer. If it's quicker, I agree, use tables!

I do agree also though that it is best to design for Firefox/Mozilla and then tweak for Internet Explorer as it saves a lot of time and hassle. There are a growing number of Firefox users so it would be wrong to ignore them.

[eddster]

Webecho, I think you misunderstood me.
I just meant that with the most dominant browser being ie, it makes more sense to design primarily for that and then tweak it where you believe necessary to work with the minority browsers.

It's purely a question of practicality as opposed to personal preference. If everybody used firefox, I'd recommend designing for firefox and then tweaking for the others.

Also, I can't see how tables are "stupid" if they provide a simple solution to x-browser compatibility issues. Surely this makes them more sensible.

"Tables are stupid because they work".

Where's the logic in that? I'd love to be able to use CSS for everything, it's just not possible right now.