css conflict in different browsers

[monique]

Hello!

For a foundation that organizes special events for metally and physically handicapped persons in Holland, I have been asked to make a website in short notice.

I have started with it with the first results shown here: http://www.arti-mo.com/shamajo/. Note: no links work yet, except on the HOME page the submenu DOEL.]

Somehow I can't get it right. It looks fine in IE, but in the other browsers the various items are in a different place and don't fit properly as it was meant to be. Maybe I have used a too complicated base for the site, I don't know, but I have tried many things but don't understand the mistakes. :o

Is there someone who is willing and able to help me out? ;)

Thanks very much in advance!

Have a nice day,
Monique :)

[Freeman]

What program do you use for creating web pages?

[monique]

Hello Freeman,

I use Macromedia Dreamweaver MX, but work normally only in the 'show code view' and write the pages in (X)HTML. That I combine with CSS to create the layout of the site.

Can you help me?

Regards,
Monique

[jscheuer1]

If you don't know much about cross browser HTML coding, Dreamweaver is actually pretty good at it so you could just use its design features and skip 'show code view'.

However, your layout doesn't seem too far off, so you could use one stylesheet for IE and another for all other browsers.

Have the main stylesheet first on the page and make things look good in FF and/or Opera with it. Follow it with something like:


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie_styles.css" media="screen" title="default">
<![endif]-->

You only need to include the styles in there that need to be different for IE.

Also, you would be better of designing in HTML strict or transitional. XHTML can throw some browsers into quirks mode so, isn't that good of a DOCTYPE for normal HTML pages.

[monique]

Hi John,

I always try to understand what I am doning, rather than just using a 'standard' programm. This is why I was interested to know where the mistakes in my site were, or in other words, what caused the different behaviour in the different browsers.

Can you tell me, when I would like to get a proper education in building nice and technically good websites, what programms could I best focuss on? I am not that interested in flashy stuff, and prefer a site with good navigation, clear reading and accessable... (what more do I wish?)

Bye,
Monique

[jscheuer1]

Well, you should understand that there are differences in the rendering engines among browsers. The more complex that your layout and/or style are, the more likely that you will come up with something that looks different across browsers. It is best to avoid things like absolute and relative positioning. Positive and negative margins can often be used to fine tune the position of things and are a bit more consistent across browsers. Padding is also often useful. A strict HTML 4.01 DOCTYPE is a good standard to code to as it keeps differences to a minimum. Using the validator (which it looks like you've done with the HTML):

http://validator.w3.org/

is also good as it keeps non-standard quirks from creeping into your layout. But the css validator:

http://jigsaw.w3.org/css-validator/

is also required to avoid quirks in style. If you do that much, it usually is only IE that may be different. The conditional comment method I mentioned before can be very handy for overcoming those differences. Conditionals may be version specific in IE and their content hidden from or available to other browsers:

http://www.quirksmode.org/css/condcom.html

and in more detail:

http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

Because of this, it is best to design with a compliant browser like FF or Opera and then later to correct (tweak) for IE.

A good text editor with syntax highlighting and the ability to build a clip collection is very handy for HTML editing. Vim (http://www.vim.org/) is one such program and it is free.

[monique]

Thanks very much John for this very usefull information!

First set up in FF & others and than add the conditional comment for IE worked very well. I understand the information about the conditional comments on quirksmode and MSDN. With this I can overcome some differences between the various browsers.

As you had noticed, I regularly use the W3 validator for both (X)HTML and CSS, which is very helpfull but as you said not 100% 'accurate'. Anyway it is a big helping hand. Although W3 seems not to know anything about scroll-bar colors... :rolleyes:

I would be happy if with this everything would be solved now, however there is still a small remaining "issue". See http://www.arti-mo.com/shamajo/ for the results so far (note the links aren't working yet, only the ones for viewing in normal/bigger font and printing). All works well, except for printing in bigger font in IE; in all other browsers it works well (selected parts to be printed only), but in IE it shows all the page. :confused:

May I ask you once more if you can be of help with this...?

Bye, bye,
Monique

[jscheuer1]

Well, I'm not that experienced with so many style options as you seem to require. You may need an additional stylesheet(s) to do that (print in different sizes in IE) but, why bother with it at all? Even offering different sizes for display is a bit excessive as, browsers already come equipped with options to do that as well as to change font-size for printing. If it can be done, most likely it is just a problem in logic - making sure the specific styles you want are active for the media and text size active. There may be some quirk in IE that prevents it though.

Getting back to the validator. As I think you know, styling the scrollbar (although it is gaining support in other browsers) is really an IE proprietary style. As such, it isn't valid. Sometimes you just have to know what is an error and what is the validator just being a bit more strict than the 'real world' is. You can always include IE proprietary styles in an IE only stylesheet and they will no longer cause an error for validation but then, other browsers that may support them will not see them. The validator sometimes even makes actual mistakes. All in all though, it is most useful if you take the time to get used to it..

[monique]

Hi John,

Practicing a lot, I am sure I will get used to a lot of the "web-related-issues" :)

The reason for offering different font-sizes is that part of the people who visit this site cannot see much because they have restricted vision and I tried to offer them somewhat more accessibility. I'll try to cover this last issue somehow.

Thanks for now,
Monique