Toon posts:

tekst onderin uitlijnen in Div in Firefox

Pagina: 1
Acties:

Verwijderd

Topicstarter
Het is de bedoeling dat de links in de div met de rode achtergrond onderin worden uitgelijnt (bottom:0). Weet iemand waarom dit wel in IE gebeurt, maar niet in FF ziehttp://www.daanooms.nl/test/test.htm

CSS:
code:
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
body,html { 
    background-image: url('../images/negerin1.jpg');
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: top; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 11px;
    margin: 0;
}

.text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #ffffff;
}

.textSmall {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

A.type4:link{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:black; text-decoration:none;}
A.type4:visited{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:black; text-decoration:none;}
A.type4:active{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:black; text-decoration:none;}
A.type4:hover{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:red; text-decoration:underline;}

h1 { font-size: 16px; color: #ffffff }

#introDiv { position: relative; top: 0; margin:0 border: 1px dotted #ffffff; width:760px; height:40px; text-align: left; background-color: #f3510c; z-index:2 }
#containerDiv {position:absolute; margin:0; bottom:0;}


En de pagina:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
<p><style>margin:o</style>[img]"../images/spacer.gif"[/img]</P>
<div align="center">
    <div id="introDiv">
        <div id="containerdiv">
          <p><a class="type4" href="http://www.daanooms.nl/index.htm">Home</a>  <a class="type4" href="http://www.daanooms.nl/Button.htm">
          Button</a>  <a class="type4" href="http://www.daanooms.nl/buttonpages/button2.htm">
          button 2</a>  <a class="type4" href="http://www.daanooms.nl/projecten/vergrotingen/dehaas.htm">
          de haas</a>  <a class="type4" title="klik" href="http://www.daanooms.nl/contact.htm">Contact</a></p>
        </div>
    </div>
</div>
</body>
</html>

Verwijderd

omdat de p in die div een margin heeft. voeg dit eens toe:
code:
1
2
3
#containerdiv p {
margin: 0;
}

Verwijderd

Topicstarter
super! bedankt.

Verwijderd

Topicstarter
Weet je, of iemand anders, waarom in Opera de hele div weer een stuk naar beneden wordt geplaatst. Is dat weer een marge van 't een of ander?

http://www.daanooms.nl/test/test.htm

Verwijderd

dat komt door die merkwaardige <p> die je direct na de body-tag hebt staan. Dit heb ik overigens gewoon gevonden door wat dingen uit je code weg te halen totdat het probleem verdwijnt.

Verwijderd

Topicstarter
Ik heb nu dit:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
[img]"../images/spacer.gif"[/img]
<div align="center">
    <div id="introdiv">
        <div id="containerdiv">
          <a class="type4" href="http://www.daanooms.nl/index.htm">Home</a>  <a class="type4" href="http://www.daanooms.nl/Button.htm">
          Button</a>  <a class="type4" href="http://www.daanooms.nl/buttonpages/button2.htm">
          button 2</a>  <a class="type4" href="http://www.daanooms.nl/projecten/vergrotingen/dehaas.htm">
          de haas</a>  <a class="type4" title="klik" href="http://www.daanooms.nl/contact.htm">Contact</a>&nbsp; <?php echo $guestbooklink; ?>
        </div>
    </div>
</div>
</body>
</html>


Met CSS:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body,html { 
    background-image: url('../images/negerin1.jpg');
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: top; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 11px;
    margin: 0;
}

A.type4:link{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:black; text-decoration:none;}
A.type4:visited{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:black; text-decoration:none;}
A.type4:active{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:black; text-decoration:none;}
A.type4:hover{font-size:9pt; font-family: Arial, Helvetica, sans-serif; color:red; text-decoration:underline;}

#introDiv { position: relative; top: 0; border: 1px dotted #ffffff; width:760px; height:40px; text-align: left; background-color: #f3510c; z-index:2 }
#containerDiv {position:absolute;bottom:0}


In FF en IE staat de div met rode achtergrond prima bovenaan uigelijnd, maar in Opera blijft die een stukje naar beneden staan. Waarom?

Zie:http://www.daanooms.nl/test/test.htm
Pagina: 1