Toon posts:

tekst onderin uitlijnen in Div in Firefox

Pagina: 1
Acties:

zondag 11 september 2005 15:27

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>

zondag 11 september 2005 15:39

Acties:

Verwijderd

omdat de p in die div een margin heeft. voeg dit eens toe:
code:
1
2
3

#containerdiv p {
margin: 0;
}

zondag 11 september 2005 16:04

Acties:

Verwijderd

Topicstarter
super! bedankt.

zondag 11 september 2005 16:09

Acties:

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

maandag 12 september 2005 08:54

Acties:

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.

dinsdag 13 september 2005 16:21

Acties:

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
Reageer