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

Praat mee over van alles en nog wat!
Forumregels
Dit forum is voor alle zinnige gesprekken buiten phpBB om. Discussies en gesprekken over interessante onderwerpen.

Een nieuw onderwerp moet..:
  • uiteraard voldoen aan de algemene voorwaarden
  • niet passen in de gewone supportfora
  • interessante zijn voor het overgrote deel van onze gebruikers
  • een neutrale of positieve ondertoon hebben
  • anders zijn dan bestaande onderwerpen
Plaats reactie
Gebruikersavatar
Bas
Berichten: 2741
Lid geworden op: 02 dec 2003, 17:38
Locatie: Omgeving Goslar (Duitsland)
Contacteer:

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

Bericht door Bas » 25 jan 2006, 11:54

Ik heb eens een probleempje. :P

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

Mijn broncode:

Code: Selecteer alles

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>

Gebruikersavatar
mattle
Berichten: 848
Lid geworden op: 05 mar 2005, 07:40
Locatie: Doetinchem
Contacteer:

Bericht door mattle » 25 jan 2006, 13:05

hoe maak je eigenlijk dat menu??

Gebruikersavatar
Bas
Berichten: 2741
Lid geworden op: 02 dec 2003, 17:38
Locatie: Omgeving Goslar (Duitsland)
Contacteer:

Bericht door Bas » 25 jan 2006, 13:20

Met wat mouseover-css, en display: block ;) Niet al te moeilijk als je css kan :)

svenn
Berichten: 5001
Lid geworden op: 14 jul 2004, 13:00
Locatie: Kortrijk
Contacteer:

Bericht door svenn » 25 jan 2006, 14:21

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


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

Gebruikersavatar
Bas
Berichten: 2741
Lid geworden op: 02 dec 2003, 17:38
Locatie: Omgeving Goslar (Duitsland)
Contacteer:

Bericht door Bas » 25 jan 2006, 14:27

Gecko:

Afbeelding

IE Tab:

Afbeelding

(sorry voor paint-kwaliteit JPG)

Gebruikersavatar
Bee
Berichten: 13403
Lid geworden op: 29 aug 2004, 10:30

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.
... Maar ik modereer (nog) niet.

Gebruikersavatar
Bas
Berichten: 2741
Lid geworden op: 02 dec 2003, 17:38
Locatie: Omgeving Goslar (Duitsland)
Contacteer:

Bericht door Bas » 25 jan 2006, 15:04

Gecko + Opera == Zelfde probleem. :P

Gebruikersavatar
Wout -- w00t
Berichten: 815
Lid geworden op: 07 jan 2005, 12:57
Locatie: Eindhoven, NL

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)
Geeft geen support aan fora´s zonder copyright

Gebruikersavatar
Bas
Berichten: 2741
Lid geworden op: 02 dec 2003, 17:38
Locatie: Omgeving Goslar (Duitsland)
Contacteer:

Bericht door Bas » 25 jan 2006, 15:38

Gecko ondersteunt beide, hoor. :)

Gebruikersavatar
Bee
Berichten: 13403
Lid geworden op: 29 aug 2004, 10:30

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...
... Maar ik modereer (nog) niet.

Gebruikersavatar
Bas
Berichten: 2741
Lid geworden op: 02 dec 2003, 17:38
Locatie: Omgeving Goslar (Duitsland)
Contacteer:

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;

Plaats reactie