IE verkloot het weer, Firefox natuurlijk niet ^^
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# connect.php
<style type="text/css">
body {
font-family: Tahoma;
}
.comments#head a {
text-decoration: none;
color: white;
}
.comments#head {
background: url('bg-header.jpg') top;
font-size: 10px;
color: white;
width: 500px;
height: 20px;
padding-left: 6px;
padding-right: 5px;
line-height: 20px;
}
.comments#bericht {
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
height: auto;
font-size: 12px;
min-height: 100px;
width: 504px;
padding-left: 5px;
padding-top: 5px;
}
.comments#clear {
clear: left;
}
</style>
<?php
$server = "localhost";
$gebruiker = "foot";
$wachtwoord = "***";
$database = "gastenboek";
$db = mysql_connect($server, $gebruiker, $wachtwoord) or die ('Kon geen verbinding maken met MySQL.');
mysql_select_db($database) or die ("Kon de database niet vinden.");
?>
<style type="text/css">
body {
font-family: Tahoma;
}
.comments#head a {
text-decoration: none;
color: white;
}
.comments#head {
background: url('bg-header.jpg') top;
font-size: 10px;
color: white;
width: 500px;
height: 20px;
padding-left: 6px;
padding-right: 5px;
line-height: 20px;
}
.comments#bericht {
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
height: auto;
font-size: 12px;
min-height: 100px;
width: 504px;
padding-left: 5px;
padding-top: 5px;
}
.comments#clear {
clear: left;
}
</style>
<?php
$server = "localhost";
$gebruiker = "foot";
$wachtwoord = "***";
$database = "gastenboek";
$db = mysql_connect($server, $gebruiker, $wachtwoord) or die ('Kon geen verbinding maken met MySQL.');
mysql_select_db($database) or die ("Kon de database niet vinden.");
?>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# index.php
<?php
include_once("connect.php");
$query = mysql_query("SELECT naam,email,bericht,datum,tijd,verberg FROM berichten");
while($geg = mysql_fetch_assoc($query)){
if($geg['verberg'] == 0){
$poster = '<a href="mailto:' . $geg['email'] . '">' . $geg['naam'] . '</a>';
} else {
$poster = $geg['naam'];
}
echo "<p><div class=\"comments\" id=\"head\"><b>" . $poster . "</b> " . $geg['datum'] . " @ " . $geg['tijd'] . "<span style=\"float:right\"><a href=\"#\">Quote</a></span></div>
<div class=\"comments\" id=\"bericht\">" . $geg['bericht'] . "</div>
<div class=\"comments\" id=\"clear\"></div></p>";
}
?>
<?php
include_once("connect.php");
$query = mysql_query("SELECT naam,email,bericht,datum,tijd,verberg FROM berichten");
while($geg = mysql_fetch_assoc($query)){
if($geg['verberg'] == 0){
$poster = '<a href="mailto:' . $geg['email'] . '">' . $geg['naam'] . '</a>';
} else {
$poster = $geg['naam'];
}
echo "<p><div class=\"comments\" id=\"head\"><b>" . $poster . "</b> " . $geg['datum'] . " @ " . $geg['tijd'] . "<span style=\"float:right\"><a href=\"#\">Quote</a></span></div>
<div class=\"comments\" id=\"bericht\">" . $geg['bericht'] . "</div>
<div class=\"comments\" id=\"clear\"></div></p>";
}
?>
In IE ziet het er zo uit: klik
En in FF zo: klik
Waarom verkloot IE mijn website weer?
Die zwarte balk is veel te hoog in IE en de breedthe van bericht is in IE breder dan in FF :S
Gewijzigd op 01/01/1970 01:00:00 door Henk en Annie
Gesponsorde koppelingen:
Ten eerste: in de #head staat geen min-height.
Ten tweede: er staat nergens min-width.
Ten derde: als ik een vaste height doe, dan rekt ie niet mee als er meer tekst in staat.
Gewijzigd op 01/01/1970 01:00:00 door Tommie Crawford
Maar er staat bij mij toch geen min-width in!
En hoe moet de div anders meerekken met de tekst?!
Zeg dan op z'n minst hoe het moet.
In je #head heb je dit:
width: 500px;
padding-left: 6px;
padding-right: 5px;
Padding moet je bij je breedte optellen. De totale breedte is hier dus 511.
In #bericht heb je dit:
width: 504px;
padding-left: 5px;
Dat is samen 509. Zorg dat je breedtes hetzelfde zijn, of (slimmer): zet een container div om je #head en je #bericht heen, en geef die een width.
Bedankt!
en ook kan meerekken als er meer tekst is dan ie kan weergeven in die hoogte?
