Page 1 of 1
Need help for exam
Posted: Wed 12. Jan 2005, 14:25
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:
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
Posted: Wed 12. Jan 2005, 18:14
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.
Posted: Wed 12. Jan 2005, 18:19
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.
Posted: Wed 12. Jan 2005, 18:33
by rk
and if you use Firefox with Web Developer PlugIn, you see what style-part are active
Posted: Thu 13. Jan 2005, 07:43
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
Posted: Thu 13. Jan 2005, 22:59
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
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
Posted: Thu 13. Jan 2005, 23:43
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
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';
}
Thanks folks!
Posted: Sat 15. Jan 2005, 12:48
by Kvist
Thanks for the help. CSS is overrated anyway...
Re: Thanks folks!
Posted: Sun 16. Jan 2005, 23:25
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
