CSS Renders OK in Windows But Not Linux

Ovalteen · 02-20-2006, 11:02 PM

Hello,

I've got a bit of a CSS/HTML problem here. I'm a novice with web design, and I'm coding up a small test site. It displays fine in Opera and IE on Windows, but if I go to Linux and use Opera or Firefox it comes out mangled.

The bits that get mangled are the rounded boxes I have created by copying the code mentioned here. It's like the corners are the wrong way around or something, and they don't line up properly with the edge of the box. It's especially strange because it renders fine in Opera on Windows, yet the same browser on Linux screws it up. I've tried different screen resolutions and it makes no difference.

Is anyone aware of any Linux libraries I might need to install to get proper CSS support? Alternatively, can anyone spot any OS-specfic bits of code in the CSS in that link? It looks OK to me, which is why it's so puzzling.

Any advice greatly appreciated.

Cheers

Ovalteen

Spudley · 02-21-2006, 08:46 AM

I'm taken the example code from the page you referenced, and I'm looking at it now in three different Linux browsers (Opera 8.5, Konqueror 3.3 and Firefox 1.07), and it looks fine.

I also can't see anything in the code that looks wrong.

What browser versions are you using? Have you modified the code from the example, or are you seeing this effect with exactly the same code as that?

I'm pretty certain it won't be anything Linux specific, because all three browsers I'm testing have their own page rendering engines.

One question I will ask, though, is whether you've got a doctype declaration at the top of your page -- something that looks like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

If you haven't, you should add it, because when it's missing, certain browsers (MSIE and Opera in particular) will render certain CSS elements very differently, and not conforming to standards. They do this to maintain backward compatibility with older sites. But when you add this tag, you're telling the browser explicitly that you want it to conform to standards, so they should all look exactly the same. (... almost

)

There's a couple of different variants you can use on the above line, but the loose.dtd is probably the best one to use if you're not sure.

Hope that helps.

xhi · 02-21-2006, 02:01 PM

also
ie is not a good thing to base testing off of.. atleast not if you want to have any form of compatibility without a bunch of extra hacks..

i found this page recently and it oulines alot of the problems with ie and may shed some light on your problems

http://www.howtocreate.co.uk/wrongWithIE/

Ovalteen · 02-27-2006, 09:49 AM

Thankyou very much guys. Sorry for my late reply. I'll try the things you guys mentioned and see how I go.

I'm using the code unmodified, in Opera 8.5, IE 6 and Firefox 1.07. Spudley, I don't have a doctype declaration, so that may be what's stuffing it up. I'll have a fiddle with it and see what happens.

xhi, thanks for the link, I was looking for something like it not long ago.

Cheers

Ovalteen

nx5000 · 02-27-2006, 10:51 AM

A general rule if you want your webpage to work on a lot of browser, be small , be compliant is to BEGIN by using a full-css-compliant browser like emm... not IE
And then add awful hacks for IE.
Otherwise you will face big headaches and have a dirty/long/not wellreferenced page

Ovalteen · 03-05-2006, 02:18 AM

Damnit, I still can't get it to work. I tried doing a pretty much direct cut and paste (I added the <HTML> tags and CSS link stuff to the code but that was it), and it still doesn't work. I also tried the Doctype thing but that made no difference.

It looks fine in Windows on any browser (Firefox, Opera and IE), but on Linux with either Firefox or Opera it comes out wierd. This is what it looks like.

Anybody know what I'm doing wrong?

Cheers

Ovalteen

EDIT - I've also tried mucking around with some of the CSS properties (tweaking the positions and various things), and that hasn't made a difference (what I do usually makes it worse).

Jaqui · 03-05-2006, 03:05 AM

http://www.cssplay.co.uk/ non ie friendly css, pushing the limits of css site design principles.

from that page, a well configured xhtml header.
The most important is the first 2 lines, the Doctype and the namepsace.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | experiments with cascading style sheets</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="css play, cssplay, play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" media="all" type="text/css" href="css/cssplay.css" />

<!--[if lte IE 6]>
<style>
#ads {display:none;}
#adsie {clear:both; text-align:center; width:750px; margin-top:10px;}
</style>
<![endif]-->
</head>

there is also:

http://www.csszengarden.com/ a learning display of css.

Both use the xhtml, since html support for css is much more limited.

Ovalteen · 03-05-2006, 07:39 AM

Thanks for the info Jaqui. Using the first link you provided I was able to find an alternative method of creating rounded corners which works better

.

Cheers

Ovalteen