[Opgelost] FF hieght probleem!
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
.button {
color: #FFF;
font: normal 12px Arial;
text-decoration: none;
cursor: pointer;
height: 23px;
padding: 0px 0px 0px 3px;
background: url(l.png) no-repeat left top;
}
.button span {
height: 23px;
padding: 4px 15px 0px 12px;
background: url(r.png) no-repeat right top;
}
.button:hover {
background: url(l_H.png) no-repeat left top;
}
.button:hover span {
background: url(r_h.png) no-repeat right top;
}
-->
</style>
</head>
<body>
<a href="#" class="button"><span>Test text</span></a>
</body>
</html>
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
.button {
color: #FFF;
font: normal 12px Arial;
text-decoration: none;
cursor: pointer;
height: 23px;
padding: 0px 0px 0px 3px;
background: url(l.png) no-repeat left top;
}
.button span {
height: 23px;
padding: 4px 15px 0px 12px;
background: url(r.png) no-repeat right top;
}
.button:hover {
background: url(l_H.png) no-repeat left top;
}
.button:hover span {
background: url(r_h.png) no-repeat right top;
}
-->
</style>
</head>
<body>
<a href="#" class="button"><span>Test text</span></a>
</body>
</html>
Test URL: http://h1.ripway.com/rakoda/button_test/Button_test.html
Gewijzigd op 07/09/2010 07:22:03 door Joey Drieling
Dat laatste moet je echter alleen doen als je weet wat je doet. Je kunt niet een <a> element gebruiken in een lange zin. Zodra je er een block element van maakt, breekt het met de rest van de text.
PS> het is dus niet FF die het fout doet, maar IE. Opdat je dat even weet.
waarom laat je de achtergrond van je plaatje niet horizontaal herhalen, als je nu de mouseover gebruikt, is hij voor een halve seconde even wit.
Merijn Venema op 05/09/2010 21:11:57:
als je al een height mee wil geven, moet je dat doen door padding of je moet een display: block mee geven aan het <a> element.
De mouse over plaatje is lichter dat je wit ziet is dat hij de hover plaatje langzaam laad.
Maar, wat je ook kunt doen ( het gaat hier immers om een menu ), is een <ul> maken, en binnen die <ul> voor elke <a> een <li> maken.
Op die manier kun je de <li> floaten, zodat ze naast elkaar vallen, kun je je <a> een display:block geven, en als je het goed uit meet, heb je geen hoogtes en breedtes meer nodig. Als je deze methode kiest, moet je er op verdacht zijn dat zowel de <li> als ook de <a> geen height en width krijgen. Anders zal IE6 niet weten wat ie er mee moet.
Dus:
<ul>
<li>
<a>
<span>
De <li> floaten, de <a> paddings mee geven en een display:block, en dat zou het wel moeten doen
Gewijzigd op 05/09/2010 21:33:59 door Joey Drieling
Als je weet hoe hoog het plaatje is, en het moet een inline button worden, ( zoals je aangeeft ) dan moet je een line-height opgeven voor je text ( wat je als het goed is sowieso doet ) en als je de line-height weet, kun je de padding bepalen. Je kunt heel wat met CSS hoor.
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
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
<style type="text/css">
<!--
.button {
color: #FFF;
font: normal 12px Arial;
text-decoration: none;
cursor: pointer;
line-height: 18px;
padding: 4px 0px 4px 3px;
background: url(l.png) no-repeat left top;
}
.button span {
padding: 4px 15px 4px 12px;
background: url(r.png) no-repeat right top;
}
.button:hover {
background: url(l_H.png) no-repeat left top;
}
.button:hover span {
background: url(r_h.png) no-repeat right top;
}
-->
</style>
<!--
.button {
color: #FFF;
font: normal 12px Arial;
text-decoration: none;
cursor: pointer;
line-height: 18px;
padding: 4px 0px 4px 3px;
background: url(l.png) no-repeat left top;
}
.button span {
padding: 4px 15px 4px 12px;
background: url(r.png) no-repeat right top;
}
.button:hover {
background: url(l_H.png) no-repeat left top;
}
.button:hover span {
background: url(r_h.png) no-repeat right top;
}
-->
</style>
En als ik dit doe:
Code (php)
1
padding: 0px 0px 4px 3px;
Dan krijg ik het omgekeerde probleem
Gewijzigd op 05/09/2010 21:51:49 door Joey Drieling
http://h1.ripway.com/rakoda/button_test/Button_test_2.html
zet ik bij de padding 4px op 0px krijg ik het omgedraide probleem.
Toevoeging op 05/09/2010 23:01:25:
Ik heb het met display block geprobeert maar dan breekt hij de regel weer is er geen fix voor IE voor dit probleem met die px verschil.
Gewijzigd op 05/09/2010 23:02:01 door Joey Drieling
Zet die buttons in een div met een id.
Probeer dit, misschien wat lomp ge-css-st maar dit werkt in alle browsers.
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
#button ul {
height: 35px;
list-style: none;
overflow: hidden;
display: inline;
float:left;
}
#button ul li {
background:url(l.png) top left no-repeat;
float: left;
display: inline;
overflow: hidden;
}
#button ul li a {
width:auto;
float:left;
display: inline;
overflow: hidden;
padding: 3px 15px 5px 13px;
margin-left: 2px;
text-decoration:none;
background: url(r.png) top right no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
#button li:hover {
background:url(l_H.png) top left no-repeat;
float: left;
display: inline;
}
#button ul li a:hover {
width:auto;
float:left;
display: inline;
overflow: hidden;
text-decoration:none;
padding: 3px 15px 5px 13px;
margin-left: 2px;
background:url(r_h.png) top right no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
-->
</style>
</head>
<body>
<div id="button">
<ul>
<li><a href="#" class="button">Test text</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
#button ul {
height: 35px;
list-style: none;
overflow: hidden;
display: inline;
float:left;
}
#button ul li {
background:url(l.png) top left no-repeat;
float: left;
display: inline;
overflow: hidden;
}
#button ul li a {
width:auto;
float:left;
display: inline;
overflow: hidden;
padding: 3px 15px 5px 13px;
margin-left: 2px;
text-decoration:none;
background: url(r.png) top right no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
#button li:hover {
background:url(l_H.png) top left no-repeat;
float: left;
display: inline;
}
#button ul li a:hover {
width:auto;
float:left;
display: inline;
overflow: hidden;
text-decoration:none;
padding: 3px 15px 5px 13px;
margin-left: 2px;
background:url(r_h.png) top right no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
}
-->
</style>
</head>
<body>
<div id="button">
<ul>
<li><a href="#" class="button">Test text</a></li>
</ul>
</div>
</body>
</html>
Hier de URL: http://h1.ripway.com/rakoda/button_test/Button_test_3.html