phpBB.nl

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>

hoe maak je eigenlijk dat menu??

Met wat mouseover-css, en display: block

Niet al te moeilijk als je css kan

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

)

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

.

Gecko:

IE Tab:

(sorry voor paint-kwaliteit JPG)

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

Gecko + Opera == Zelfde probleem.

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)

Gecko ondersteunt beide, hoor.

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...

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;

phpBB.nl

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

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