Need help for exam

[Kvist]

Hi all.

I have run into some CSS trouble and I can't seem to solve it. I need to make this page for an exam and after having made a CSS file, this is the result I get:



This is my CSS file:

Code: Select all

body {
	padding:0 0 0 0;
	margin:5 5 5 5;
	font-size:12;
	font-family:'Tahoma','Verdana';
	background:#FFFFFF;
	color:#000000;
}
h1 {
	color:#003399;
	font-family:arial;
	font-size:16;
	font-variant:small-caps;
}
h2 {
	color:#000000;
	font-size:14;
	font-family:arial;
	font-variant:small-caps;
}
h3 {
	color:#808080;
	font-size:12;
	font-family:arial;
}
a {
	font-weight: bold;
	text-decoration: underline;
	color:#808080;
	font-variant:small-caps;
	font-family:arial;
}
a:hover {
	color:#FFC600;
	text-decoration:underline;
	font-variant:small-caps;
	font-family:arial;
}
#kilde {
	font-style:italic;
	font-size:11;
	font-family:'Tahoma','Verdana';
	color:#000000;
	float:right;
}
#kilde a {
	font-weight:normal;
	text-decoration: underline;
	color:#808080;
	font-variant:normal;
	font-family:arial;
}
#kilde a:hover {
	color:#FFC600;
	text-decoration:underline;
	font-variant:normal;
	font-family:arial;
}
#indhold {
	z-index: 1;
	padding:20px;
	border-left: 1px solid #FFC600;
	left:25%;
	top:0px;
	position:absolute;
}
#menu {
	z-index: 2;
	width: 20%;
	left:1%;
	margin:500 500 500 500;
	top:0px;
	position:absolute;
}
table {
	font-size:12;
	font-family:'Tahoma','Verdana';
	background:#FFFFFF;
	color:#000000;
}

This is the html file: http://www.hum.aau.dk/~jkkv02/insomnia/ ... /index.htm

The problem is only in Firefox, IE works fine.

Do you have ANY idea how to solve my problem? Any help would be greatly appreciated!

/Kvist

[rk]

What did you mean?

The most things are the same in IE6 SP1 and Firefox 1.0 .

Only the "pagelogo" and the headline is larger in Firefox.

[ionrock]

It is much easier to test in firefox first and then fix in IE. IE is crappy and will give you a false image of how css should work.

[rk]

and if you use Firefox with Web Developer PlugIn, you see what style-part are active

[trip]

You might want to look at this site
http://www.dithered.com/css_filters/index.html

This will give you clues how to fix and filter for IE and FireFOX

this has helped a stack load...check it out..

also

http://www.w3schools.com/css/css_reference.asp
will be a good start as well....
TriP

[Kulinarisk]

Make your divs with width in px, reduce font size and put px after your font size in the css file. IE doesn't really like CSS. You can spend the rest of the year making hacks and still not get it right. Don't even try it with IE5 for mac.
Is there a reason why you want the doctype to be strict?

You should run your css through a validator.
http://jigsaw.w3.org/css-validator/validator-uri.html

[Karla]

Make your divs with width in px, reduce font size and put px after your font size in the css file. IE doesn't really like CSS. You can spend the rest of the year making hacks and still not get it right. Don't even try it with IE5 for mac.
Is there a reason why you want the doctype to be strict?

You should run your css through a validator.
http://jigsaw.w3.org/css-validator/validator-uri.html

Main point from what Kulinarisk said is:

put px after your font size in the css file

Also for padding, margins, etc...
Don't leave units of measure to be "defaulted" or "assumed".

Code: Select all

body {
	padding: 0px;
	margin: 5px;
	background: #FFF;
	color: #000;
	font: 12px 'Tahoma', 'Verdana';
}
h1 {
	color: #039;
	font: small-caps 16px arial;
}
h2 {
	color: #000;
	font: small-caps 14px arial;
}
h3 {
	color: #808080;
	font: 12px arial;
}
a {
	font-weight: bold;
	text-decoration: underline;
	color: #808080;
	font-variant: small-caps;
	font-family: arial;
}
a:hover {
	color: #FFC600;
	text-decoration: underline;
	font-variant: small-caps;
	font-family: arial;
}
#kilde {
	color: #000;
	float: right;
	font: italic 11px 'Tahoma', 'Verdana';
}
#kilde a {
	font-weight: normal;
	text-decoration: underline;
	color: #808080;
	font-variant: normal;
	font-family: arial;
}
#kilde a:hover {
	color: #FFC600;
	text-decoration: underline;
	font-variant: normal;
	font-family: arial;
}
#indhold {
	z-index: 1;
	padding: 20px;
	border-left: 1px solid #FFC600;
	left: 25%;
	top: 0px;
	position: absolute;
}
#menu {
	z-index: 2;
	width: 20%;
	left: 1%;
	margin: 500px;
	top: 0px;
	position: absolute;
}
table {
	background: #FFF;
	color: #000;
	font: 12px 'Tahoma', 'Verdana';
}

[Kvist]

Thanks for the help. CSS is overrated anyway...

[Kulinarisk]

Thanks for the help. CSS is overrated anyway...

If having one page control all your page design and fonts is overrated - then good luck. In my view it's the best thing since the hyperlink