Position css niet goed in chrome

erik11 · 13 mei 2010

Hallo beste mensen,

Ik ben bezig met een verzoekbox te maken voor onze internetradio.
De bedoeling daarmee is dat mensen verzoekjes in de verzoekbox kunnen aanvragen. Zo is dat heel overzichtelijk. Adres: http://close2you.net78.net

Ik heb het ter promotie even op een gratis 000webhost accountje gezet.

Deze box is gecodeerd met html, css en php.
Het probleem is, als ik met firefox of internet explorer de pagina bekijk, dat ik de titels gewoon zie zoals ik ze heb geprogrammeerd. Mooi achter elkaar, in een lijn.

In google chrome echter, is dit niet het geval. De titels zitten op de verkeerde plek, en lopen ook niet achter elkaar door.

Hier is de code van mijn html pagina:

PHP:

<?php 
include('mysql.php');

$sql = "SELECT * FROM `lock`";
$query = mysql_query($sql);
$row = mysql_fetch_array($query);

if($row['lock'] == 1) { ?>
<html>
<head>
<title>FTA/J4F radio verzoekbox</title>
</head>
<body>
<body bgcolor="#2B2B2B">
<img src="images/box.png">

<div id="verzoekje" style="position: absolute; overflow: hidden; left: 187px; top: 122px; width: 921px; height: 180px; z-index: 4;">
<font face="Tahoma" size="2" color="#2F466A">
<img src="http://kfstannedriespulisut.dewaaie.nl/kfstannedriespulisut/images/stories/hangslot.gif">&nbsp;De verzoekbox is momenteel gesloten. Er kunnen nu geen verzoekjes worden aangevraagd.<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alleen de DJ kan deze verzoekbox ontgrendelen.
</div></font>

<div id="footer" style="position: absolute; overflow: hidden; left: 300px; top: 288px; width: 450px; height: 30px; z-index: 4;">
<font face="Tahoma" size="1" color="#858585">
<b>© Verzoekbox 2010, een tool gemaakt door Erik11 & DJ Crossfader</b>&nbsp;<a href="login.php"><img src="http://kfstannedriespulisut.dewaaie.nl/kfstannedriespulisut/images/stories/hangslot.gif" border="0"></a><BR>
</div></font>
<?php mysql_close(); } else { ?>

<html>
<head>
<title>FTA/J4F radio verzoekbox</title>
<LINK rel="stylesheet" type="text/css" name="style1" href="css/verzoekbox.css"> 
<meta http-equiv="refresh" content="30" > 
</head>
<body>
<body bgcolor="#2B2B2B">
<img src="images/box.png">

<div id="box" style="position: absolute; overflow: auto; left: 22px; top: 22px; width: 937px; height: 183px; z-index: 4;">
<span class="verzoekje"><b>Verzoekje</b></span>
<span class="aanvrager"><b>Aanvrager</b></span>
<span class="datum-tijd"><b>Datum</b></span>

<span class="status-icoon">
<?php
include('mysql.php');

$sql = "SELECT * FROM `verzoekjes` ORDER BY num desc";
$query = mysql_query($sql);

while($row = mysql_fetch_array($query)) {
	if($row['status'] == 1) {
	echo "<img src='images/verzoek.png'><p>";
	}
	
if($row['status'] == 2) {
	echo "<img src='images/klaar.png'><p>";
	} 
	} 
mysql_close(); ?></span>

<span class="titel-verzoekje">
<?php
include('mysql.php');

$sql = "SELECT * FROM `verzoekjes` ORDER BY num desc";
$query = mysql_query($sql);

while($row = mysql_fetch_array($query)) {
	echo "<B>".$row['titel']."</b>";
	echo "<BR><BR>"; 
	} 
mysql_close(); ?></span>

<span class="aanvrager-naam">
<?php
include('mysql.php');

$sql = "SELECT * FROM `verzoekjes` ORDER BY num desc";
$query = mysql_query($sql);

while($row = mysql_fetch_array($query)) {
	echo "<b>".$row['naam']."</b><BR><BR>";
	} 
mysql_close(); ?></span>

<span class="datum-tijd2">
<?php
include('mysql.php');

$sql = "SELECT * FROM `verzoekjes` ORDER BY num desc";
$query = mysql_query($sql);

while($row = mysql_fetch_array($query)) {
	echo "<b>".$row['datum'].",&nbsp;".$row['tijd']."</b><BR><BR>";
	} 
mysql_close(); ?></span></div>

<div id="box2" style="position: absolute; overflow: hidden; left: 61px; top: 222px; width: 859px; height: 40px; z-index: 4;">
<form action="add.php" method="post">
<span class="tekstbox-titel"><input type="text" name="song" size="80"></span>
<span class="tekstbox-naam"><input type="text" name="name" size="18"></span>
<span class="button-toevoegen"><input type="submit" value="Toevoegen"></span>
</div>

<div id="footer" style="position: absolute; overflow: hidden; left: 280px; top: 288px; width: 450px; height: 50px; z-index: 4;" align="center">
<font face="Tahoma" size="1" color="#858585">
<b>© Verzoekbox 2010, een tool gemaakt door Erik11 & DJ Crossfader</b>&nbsp;<a href="login.php"><img src="http://kfstannedriespulisut.dewaaie.nl/kfstannedriespulisut/images/stories/hangslot.gif" border="0"></a><BR>
<b>Pagina ververst automatisch na 30 seconden.</b>
</div></font>

</html>

<?php } ?>

En de bijbehorende css pagina:

PHP:

.verzoekje 
{
position: absolute; 
left: 330px;
top: 0px;
font-family: Tahoma;
font-size: 10px;
color: #858585;
}

.aanvrager
{
position: absolute; 
left: 615px;
top: 0px;
font-family: Tahoma;
font-size: 10px;
color: #858585;
}

.datum-tijd
{
position: absolute; 
left: 800px;
top: 0px;
font-family: Tahoma;
font-size: 10px;
color: #858585;
}

.status-icoon
{
position: absolute;
left: 10px;
top: 30px;
}

.titel-verzoekje
{
position: absolute;
left: 40px;
top: 30px;
font-family: Tahoma;
font-size: 13px;
color: #2F466A;
}

.aanvrager-naam
{
position: absolute;
left: 611px;
top: 30px;
font-family: Tahoma;
font-size: 13px;
color: #FF0000;
text-align: center;
}

.datum-tijd2
{
position: absolute;
left: 767px;
top: 30px;
font-family: Tahoma;
font-size: 13px;
color: #858585;
text-align: center;
}

.tekstbox-titel
{
position: absolute;
left: 55px;
top: 225px;
}

.tekstbox-titel
{
position: absolute;
left: 0px;
top: 0px;
}

.tekstbox-naam
{
position: absolute;
left: 550px;
top: 0px;
}

.button-toevoegen
{
position: absolute;
left: 750px;
top: 0px;
}

Wat doe ik fout??
Ik begin overigs net met css, maar ik vind het helemaal niet moeilijk.

Alvast bedankt

csshunter · 14 mei 2010

Hoi erik11,
Zou 't kunnen dat Chrome niet goed overweg kan met de 14 Errors, 6 warnings die de html-validator ons signaleert?
Bv. op regel 13 en 14 van de php-code, en ook op regel 35 en 36, staat twee keer een <body> tag vlak achter elkaar. Dat lijkt me niet garant te staan voor een vlekkeloze cross-browser weergave!

Dus heb ik ook een vraag: wat gebeurt er in Chrome als alle html-fouten gecorrigeerd zijn, en de html-validator het groene sein geeft?

Met vriendelijke groet,
CSShunter

PS: voor het DOCtype zie de link hieronder.

erik11 · 14 mei 2010

Dat is handig! Daar wist ik niet van af. Ik ga het eens proberen. Bedankt voor je reactie.

Position css niet goed in chrome

erik11

Gebruiker

csshunter

Meubilair

erik11

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy