CSS-probleem: Werkt in IE, niet in andere browsers.

Bas · Bericht door **Bas** » 25 jan 2006, 11:54

Ik heb eens een probleempje.

Zie deze site in IE, en in een willekeurige andere browser. Zoals je ziet, wil ik het zoals in IE.

Mijn broncode:

body {
	font-family: Arial, sans-serif;
	font-size: 12px;
	background-image: url(grass.jpg);
	background-color: #ffffff;
	margin: 0px;
}

#page {
	width: 80%;
	margin-right: auto;
	background-image: none;
	background-color: #ffffff;
}

.header {
	width: 100%;
	height: 80px;
	margin-top: 0px;
	margin-bottom: 20px;
	background-color: #009900;
}

.body {
	float: right;
	width: 75%;
	text-align: justify; /* Toch altijd mooi? :) */
	background-color: inherit;
}

.header h1 {
	background-color: #009900;
	vertical-align: middle;
	font-size: 290%;
	text-align: center;
}

/* content */

h1 {
	background-color: #00C102;
	font-variant: small-caps;
	display: block;
	margin-top: 12px;
	margin-bottom: 6px;
	font-size: 125%;
}

h2 {
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 0px;
	margin-top: 14px;
}

p {
	padding: 0px;
	margin: 0px;
}

a {
	color: #007B01;
	text-decoration: none;
}

a:hover {
	color: #00CC02;
}

/* menu */

.menu {
	float: left;
	width: 24%;
	background-color: inherit;
}

.menu div.menublock {
	border: 1px solid #007B01;
}

.menu div.menublock h1 {
	font-size: 110%;
	display: block;
	background-color: #009B01;
	font-variant: small-caps;
	margin-top: 0px;
	margin-bottom: 0px;
}

.menu div.menublock a {
	display: block;
	width: 100%;
	font-variant: small-caps;
}
.menu div.menublock a:hover {
	background-color: #008201;
	width: 100%;
	display: block;
}

p.introtext {
	font-weight: bold;
	padding-bottom: 12px;
}

Mijn HTML-broncode:

Code: Selecteer alles

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

<html>
<head>
	<title>Bas Style Test</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="page">
<div class="header">
	<h1>Header!</h1>
</div>
<div class="body">
<p class="introtext">
Deze tekst introduceert dit artikel een beetje.
</p>
<h1>
Dit artikel is ver weg!
</h1>
<p>Testje, echt waar!</p>
<h2>Gigantisch testje</h2>
<p>Dit is echt een test. :)</p>
</div>

<div class="menu">
	<div class="menublock">
		<h1>Menu</h1>
		<a href="#">Test-link</a>
	</div>
</div>
</div>
</body>
</html>

mattle · Bericht door **mattle** » 25 jan 2006, 13:05

hoe maak je eigenlijk dat menu??

Bas · Bericht door **Bas** » 25 jan 2006, 13:20

Met wat mouseover-css, en display: block

Niet al te moeilijk als je css kan

svenn · Bericht door **svenn** » 25 jan 2006, 14:21

wat is niet juist wilje effe screen maken ? heb enkel maar Ie hier (schande

)

// html : Passed validation
//css :klik
passed dus. vreemd he

.

Bas · Bericht door **Bas** » 25 jan 2006, 14:27

Gecko:

IE Tab:

(sorry voor paint-kwaliteit JPG)

Bee · Bericht door **Bee** » 25 jan 2006, 14:43

Heb je al eens in Opera gekeken? Daar heeft het een totaal ander gedrag dan in IE.

Bas · Bericht door **Bas** » 25 jan 2006, 15:04

Gecko + Opera == Zelfde probleem.

Wout -- w00t · Bericht door **Wout -- w00t** » 25 jan 2006, 15:13

Ik zie wel dat je margin gebruikt en geen margin en padding. (eigenlijk is het hetzelfde, maar FireFox ondersteunt geloof ik geen margin, maar wel padding. Sommige browsers juist andersom)

Bas · Bericht door **Bas** » 25 jan 2006, 15:38

Gecko ondersteunt beide, hoor.

Bee · Bericht door **Bee** » 25 jan 2006, 15:43

Wout -- w00t schreef:Ik zie wel dat je margin gebruikt en geen margin en padding. (eigenlijk is het hetzelfde, maar FireFox ondersteunt geloof ik geen margin, maar wel padding. Sommige browsers juist andersom)

Opera heeft (nog steeds) problemen met margin...

Bas · Bericht door **Bas** » 25 jan 2006, 15:59

Nu doe ik het met alleen kleuren, zie ook de pagina zelf, en de css-broncode ervan.

Alleen is de achtergrond van #page nog steeds die van body, en niet die die in #page zelf gespecifieerd werd.

EDIT:

W00t, het werkt! Moest gewoon #page absoluut positioneren...

Code: Selecteer alles

	position: absolute;
	left: 0px;
	top: 0px;