Need help for exam

Post non-phpwcms related topics here - but I don't want to see "hey check this or that other cms". Post if you have a point or worthwhile comment, don't post just to increase you post count!
Post Reply
Kvist
Posts: 87
Joined: Sat 30. Oct 2004, 04:19
Location: Denmark
Contact:

Need help for exam

Post by 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:

Image

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
Posts: 162
Joined: Sat 24. Apr 2004, 23:48
Location: Hannover, Germany
Contact:

Post by 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.
Ralf
ionrock
Posts: 279
Joined: Fri 20. Feb 2004, 17:04

Post by 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
Posts: 162
Joined: Sat 24. Apr 2004, 23:48
Location: Hannover, Germany
Contact:

Post by rk »

and if you use Firefox with Web Developer PlugIn, you see what style-part are active
Ralf
trip
Posts: 657
Joined: Tue 17. Feb 2004, 09:56
Location: Cape Town, South Africa
Contact:

Post by 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
Posts: 73
Joined: Tue 15. Jun 2004, 01:06
Location: Denmark
Contact:

Post by 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 :cry: 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
Posts: 223
Joined: Tue 26. Oct 2004, 11:56

Post by Karla »

Kulinarisk wrote: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 :cry: 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
Posts: 87
Joined: Sat 30. Oct 2004, 04:19
Location: Denmark
Contact:

Thanks folks!

Post by Kvist »

Thanks for the help. CSS is overrated anyway... :?
Kulinarisk
Posts: 73
Joined: Tue 15. Jun 2004, 01:06
Location: Denmark
Contact:

Re: Thanks folks!

Post by Kulinarisk »

Kvist wrote: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
8)
Post Reply