Archief - HTML/CSS: Alweer FF - IE probleem..

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
5

50Euro

Legacy Member
Ik denk dat het ergens aan die relative positioning ligt.. Maar ben dat dus niet zeker.

http://www.plaskes.be

In IE staat het goed nu.. In FF niet.. Heb 2 maal home afbeelding dus daar niet opletten. Gewoon zo gedaan om te testen.

PHP: 
<?php
$pagina_titel = "Welkom bij de Plaskes!";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $pagina_titel; ?></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
	<div class="header">
		<div id="header_gebruikersnaam">Gebruikersnaam:<input type="text" name="gebruikersnaam" id="header_box1" /></div>
		<div id="header_paswoord">Paswoord:<input type="password" name="paswoord" id="header_box2" /></div>
		<div><a href="index.php" target="_self"><img src="images/home.jpg" name="header_menubutton" border="0" class="header_menubutton" alt="Home" /></a><a href="index.php" target="_self"><img src="images/home.jpg" class="header_menubutton" border="0" alt="Home" /></a></div>
	</div>	
	<div class="body_homepage"></div>
	<div class="footer">Hier komt footer</div>
</div>
</body>
</html>

PHP: 
.container {
	width:750px;
	margin: 0px auto;
}
.header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	height:125px;
	background-image:url(images/header_background.jpg);
	background-repeat: no-repeat;
}
#header_gebruikersnaam {
	position:relative;
	left:580px;
	top:24px;
	z-index:1;
	visibility:visible;
	border:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #FFFFFF;
}
#header_box1 {
	position:relative;
	left:5px;
	width:60px;
	height:11px;
	z-index:1;
	visibility:visible;
	border:1px solid #000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}
#header_paswoord {
	position:relative;
	left:580px;
	top:25px;
	z-index:1;
	visibility:visible;
	border:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color: #FFFFFF;
}
#header_box2 {
	position:relative;
	left:37px;
	width:60px;
	height:11px;
	z-index:1;
	visibility:visible;
	border:1px solid #000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}
.header_menubutton {
	position: relative;
	top: 57px;
	width:78px;
	height:18px;
	margin-left: 14px;
}
.body_homepage {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height:375px;
	background-image: url(images/home_background.jpg);
	background-repeat: no-repeat;
}
.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height:30px;
	background-color:#CCCCCC;
}

Wss zit er nog fouten in dus breek maar meteen alles af wat niet goed is. Liefst met correcte info erbij. Het lijkt alsof een px niet evengroot is in IF dan in IE.. Space tussen twee boxjes rechtsboven komt ook niet overeen..

Thanks om het te bekijken..
o

orez

Legacy Member
kunde zo uw probleem eens niet omschrijven, om te weten waar we moeten kijken? Want ik zie ni direct iets verkeerd in FF.
5

50Euro

Legacy Member
Die 2 home buttons staan in FF hoger dan in IE.. En de verticale ruimte tussen de de 2 inputs rechtsboven is ook verschillend.. (In IE de de ruimte ertussen groter dan in FF bij mij..)
5

50Euro

Legacy Member
Krijg het niet helemaal goed.. Ben eens herbegonnen en heb nu

http://www.plaskes.be

HTML: 
<?php
$pagina_titel = "Welkom bij de Plaskes!";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $pagina_titel; ?></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">

<!-- Log in menu -->
<div id="login">Gebruikersnaam:<input type="text" name="gebruikersnaam" maxlength="20" id="login_box1" /><br />Paswoord:<input type="password" name="paswoord" maxlength="20" id="login_box2" /></div>

<!-- Navigatie bar -->
<div id="menu_bar"><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /><a href="index.php" target="_self"><img src="/images/home.jpg" alt="Home" class="menu_button" /></a></div>
</div>

</body>
</html>
en

Code: 
body {
	width:750px;
	margin:0px auto;
}
#header {
	width:750px;
	height:125px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	background-image:url(/images/header_background.jpg);
	background-repeat: no-repeat;
	position:relative;
	top:0px;
}
#menu_bar {
	width:750px;
	position:relative;
	top:41px;

}
.menu_button {
	width:78px;
	border:0px;
	margin-left:14px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#login {
	width:170px;
	height:50px;
	position:relative;
	top:25px;
	left:580px;
}
#login_box1 {
	width:70px;
	height: 12px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	border: 1px solid #000000;
	margin-left:2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding:0px;
}
#login_box2 {
	width:70px;
	height: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	border: 1px solid #000000;
	margin-left:33px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding:0px;
}

2 probleempjes

1) Verticale ruimte tussen de 2 invoerboxen rechtsbovenaan is niet gelijk in IE en FF.
2) In IE centreerd de site niet als ik venster verklein.. (Container maken ipv body?)

Ps. Is dit een goeie structuur?
B

BlueSkyraider

Legacy Member
kZie nie direct iets, maar wat ik wel weet (en waar ik me serieus kan aan ergeren) is dat IE en FF margin en padding omgekeerd gebruiken in een div.

Dus in IE bereik je (in een div) met padding, wat je met margin in FF bereikt en omgekeerd.
Dus misschien ligt het daaraan.
5

50Euro

Legacy Member
Nieuw probleem

Kijk bij contact op http://www.plaskes.be en je ziet dat boodschap onderaan de linkerkant van textarea staat. Hoe krijg ik die bovenaan, onder Onderwerp?

Code: 
<div id="pagebody_contact">
	<div id="contact_block">
		<div id="contact"><form action="index.php" method="post">
		Naam:<input type="text" name="naam" maxlength="30" id="contact_input1" /><br />
		Voornaam:<input type="text" name="voornaam" maxlength="30" id="contact_input2" /><br />
		Email:<input type="text" name="email" maxlength="40" id="contact_input3" /><br />
		Onderwerp:<input type="text" name="onderwerp" maxlength="40" id="contact_input4" /><br />
		Boodschap:<textarea name="boodschap" id="contact_input5"></textarea><br />
		<input type="image" src="images/contact_verzenden.jpg" id="contact_input6" />
		</form>
		</div>
	</div>
</div>

#pagebody_contact {
width:750px;
height:360px;
font-size: 10px;
background-image:url(/images/contact_background.jpg);
background-repeat: no-repeat;
color: #fff;
}
#contact_block {
height: 200px;
}
#contact {
float: right;
width:475px;
padding: 0px;
text-align: left;
font-size: 12px;
color: #fff;
margin: 75px 0px 0px 0px;
height:200px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#contact_input1 {
width: 200px;
height: 14px;
border: 1px solid #000;
padding: 1px;
margin-left:41px;
margin-top:2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#contact_input2 {
width: 200px;
height: 14px;
border: 1px solid #000;
padding: 1px;
margin-left:15px;
margin-top:2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#contact_input3 {
width: 200px;
height: 14px;
border: 1px solid #000;
padding: 1px;
margin-left:43px;
margin-top:2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#contact_input4 {
width: 200px;
height: 14px;
border: 1px solid #000;
padding: 1px;
margin-left:10px;
margin-top:2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#contact_input5 {
width: 300px;
height: 100px;
border: 1px solid #000;
padding: 1px;
margin-left:10px;
margin-top:2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#contact_input6 {
width: 87px;
height: 25x;
border: 0px;
margin-left:77px;
margin-top:2px;
}
Klik om te vergroten...

Zit ik nu al 2u op te zoeken.. Damn.. Websites zijn fun.. :D
B

BlueSkyraider

Legacy Member
ofwel tabellen gebruiken ofwel eens kijken wat het geeft u contact_input5 "float: right;" te gebruiken in u css.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan