afbeelding wordt grote tussen <a> tag
Voor de gemakkelijkheid had ik alles in een tabel gezet en in opera en firefox ziet het der goe uit maar in IE wordt de image percies groter vanaf dat er een link over staat. De image zelf wordt niet echt groter eerder het vlak erachter.
screenshot: http://www.moskydesign.be/temp/IE.jpg
Het rode is dus het vlak achter de image. Zou normaal niet zichtbaar moeten zijn.
ik heb er ook is ne list van gemaakt maar het probleem blijft.
Wie kan zeggen hoe dit komt krijgt een pintje ;), kzit der echt al te lang op te zoeken.
de html
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
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
<div id="menu">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" >
<img src="images/head-1.jpg" border="0" />
</td>
<td width="125" height="49" >
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/head-home_down.jpg',1)">
<img src="images/head-home.jpg" name="Home" vspace="0" border="0" id="Home" /> </a> </td>
<td width="20" height="49" >
<img src="images/head-2.jpg" border="0" />
</td>
<td width="125" height="49" >
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TI40','','images/head-ti40_down.jpg',1)">
<img src="images/head-ti40.jpg" name="TI40" border="0" id="TI40" />
</a>
</td>
<td width="18" height="49">
<img src="images/head-3.jpg" border="0" />
</td>
<td width="125" height="49" border="0" >
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TI','','images/head-ti_down.jpg',1)">
<img src="images/head-ti.jpg" name="TI" border="0" id="TI" />
</a>
</td>
<td width="17" height="49" >
<img src="images/head-4.jpg" border="0" />
</td>
<td width="125" height="49">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/head-events_down.jpg',1)">
<img src="images/head-events.jpg" name="events" border="0" id="events" />
</a>
</td>
<td width="75" height="49" >
<img src="images/head-5.jpg" border="0" />
</td>
</tr>
</table>
<img src="images/head-6.jpg" border="0" />
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" >
<img src="images/head-1.jpg" border="0" />
</td>
<td width="125" height="49" >
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/head-home_down.jpg',1)">
<img src="images/head-home.jpg" name="Home" vspace="0" border="0" id="Home" /> </a> </td>
<td width="20" height="49" >
<img src="images/head-2.jpg" border="0" />
</td>
<td width="125" height="49" >
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TI40','','images/head-ti40_down.jpg',1)">
<img src="images/head-ti40.jpg" name="TI40" border="0" id="TI40" />
</a>
</td>
<td width="18" height="49">
<img src="images/head-3.jpg" border="0" />
</td>
<td width="125" height="49" border="0" >
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TI','','images/head-ti_down.jpg',1)">
<img src="images/head-ti.jpg" name="TI" border="0" id="TI" />
</a>
</td>
<td width="17" height="49" >
<img src="images/head-4.jpg" border="0" />
</td>
<td width="125" height="49">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/head-events_down.jpg',1)">
<img src="images/head-events.jpg" name="events" border="0" id="events" />
</a>
</td>
<td width="75" height="49" >
<img src="images/head-5.jpg" border="0" />
</td>
</tr>
</table>
<img src="images/head-6.jpg" border="0" />
</div>
de css
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
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
body{
font:Arial, Helvetica, sans-serif;
font-size:12px;
}
img{
border:none;
padding:0;
}
#container{
}
a{
text-decoration:none;
background-color:#FF0000;
}
#left{
float:left;
width: 349px;
}
#main{
}
#logo{
background:url(images/logo.jpg) no-repeat;
height:363px;
margin-top:0;
}
#head{
}
#menu{
padding-top: 80px;
}
.menu{
width: 660px;
}
font:Arial, Helvetica, sans-serif;
font-size:12px;
}
img{
border:none;
padding:0;
}
#container{
}
a{
text-decoration:none;
background-color:#FF0000;
}
#left{
float:left;
width: 349px;
}
#main{
}
#logo{
background:url(images/logo.jpg) no-repeat;
height:363px;
margin-top:0;
}
#head{
}
#menu{
padding-top: 80px;
}
.menu{
width: 660px;
}
Edit: Wth gebruik je javascript voor image swappen..?
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
en het gebruikt de rollover van dreamweaver maar daar heeft het volgens mij niks mee te maken, hij hij doet het ook als ik er gewoon ne <a> tag over en alles van de rollover wegdoe
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
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
* { /* Even alle elementen aanspreken */
padding: 0;
margin: 0;
list-style-type: 0;
}
a { text-decoration: none; }
#menu_horz {
width: 100%; /* Uitgegaan van 100%, weet niet hoe groot je achtergrond is.. */
height: 49px;
background: #fff url(..) /* Background image van Menu */ top left no-repeat;
}
#menu_horz ul li {
display: inline;
}
#menu_horz ul li a {
display: block;
height: 49px;
width: 150px;
float: left;
background: top left no-repeat;
}
#menu_horz ul li a.home {
background-image: url(home1.whatevah);
}
#menu_horz ul li a.home:hover {
background-image: url(home2.whatevah);
}
#menu_horz ul li a.ti40 {
background-image: url(ti401.whatevah);
}
#menu_horz ul li a.ti40:hover {
background-image: url(ti402.whatevah);
}
#menu_horz ul li a.ti {
background-image: url(ti1.whatevah);
}
#menu_horz ul li a.ti:hover {
background-image: url(ti2.whatevah);
}
#menu_horz ul li a.events {
background-image: url(events1.whatevah);
}
#menu_horz ul li a.events:hover {
background-image: url(events2.whatevah);
}
padding: 0;
margin: 0;
list-style-type: 0;
}
a { text-decoration: none; }
#menu_horz {
width: 100%; /* Uitgegaan van 100%, weet niet hoe groot je achtergrond is.. */
height: 49px;
background: #fff url(..) /* Background image van Menu */ top left no-repeat;
}
#menu_horz ul li {
display: inline;
}
#menu_horz ul li a {
display: block;
height: 49px;
width: 150px;
float: left;
background: top left no-repeat;
}
#menu_horz ul li a.home {
background-image: url(home1.whatevah);
}
#menu_horz ul li a.home:hover {
background-image: url(home2.whatevah);
}
#menu_horz ul li a.ti40 {
background-image: url(ti401.whatevah);
}
#menu_horz ul li a.ti40:hover {
background-image: url(ti402.whatevah);
}
#menu_horz ul li a.ti {
background-image: url(ti1.whatevah);
}
#menu_horz ul li a.ti:hover {
background-image: url(ti2.whatevah);
}
#menu_horz ul li a.events {
background-image: url(events1.whatevah);
}
#menu_horz ul li a.events:hover {
background-image: url(events2.whatevah);
}
How 'bout that? ;]
Maar plots werkt het!
de oplossing, ik heb gewoon een andere tabel gemaakt in een andere pagina en tot mijn verbazing was er daar geen probleem. Tabel gecopieerd en ineens werkt het. Tabel ziet er exact hetzelfde uit. De misteries van IE zeker
als ik bv van
Code (php)
1
2
2
<td width="125"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/head-home_down.jpg',1)">
<img src="images/head-home.jpg" alt="Home" name="Home" width="125" height="49" border="0" id="Home" /></a></td>
<img src="images/head-home.jpg" alt="Home" name="Home" width="125" height="49" border="0" id="Home" /></a></td>
dit maak om het de code een beetje te structureren
Code (php)
1
2
3
4
5
2
3
4
5
<td width="125">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/head-home_down.jpg',1)">
<img src="images/head-home.jpg" alt="Home" name="Home" width="125" height="49" border="0" id="Home" />
</a>
</td>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/head-home_down.jpg',1)">
<img src="images/head-home.jpg" alt="Home" name="Home" width="125" height="49" border="0" id="Home" />
</a>
</td>
dan geeft hij ineens het probleem van hierboven.
Code (php)
1
<td>inhoud</td>
Code (php)
1
2
3
2
3
<td>
inhoud
</td>
inhoud
</td>
zijn. ;]
Maar nog steeds raad ik je aan gewoon mijn code te gebruiken. Tables hoor je niet te gebruiken voor je layout.
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
gewoon de standaard van dreamweaver
Citaat: The "bgcolor", "height", "width", and "nowrap" attributes of the td element are not supported in XHTML 1.0 Strict DTD.
Zal waarschijnlijk ook zijn waarom td niet goed werkt in de vernaggelde IE. ;]
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Mitchell schreef op 22.05.2008 10:52:
http://www.w3schools.com/TAGS/tag_td.asp
Citaat: The "bgcolor", "height", "width", and "nowrap" attributes of the td element are not supported in XHTML 1.0 Strict DTD.
Zal waarschijnlijk ook zijn waarom td niet goed werkt in de vernaggelde IE. ;]
Citaat: The "bgcolor", "height", "width", and "nowrap" attributes of the td element are not supported in XHTML 1.0 Strict DTD.
Zal waarschijnlijk ook zijn waarom td niet goed werkt in de vernaggelde IE. ;]
Jij praat ook over XHTML Strict, terwijl hij het DOCTYPE Transitional gebruikt. Dat zou dus geen problemen op moeten leveren.
René D. schreef op 22.05.2008 11:06:
Jij praat ook over XHTML Strict, terwijl hij het DOCTYPE Transitional gebruikt. Dat zou dus geen problemen op moeten leveren.
Mitchell schreef op 22.05.2008 10:52:
http://www.w3schools.com/TAGS/tag_td.asp
Citaat: The "bgcolor", "height", "width", and "nowrap" attributes of the td element are not supported in XHTML 1.0 Strict DTD.
Zal waarschijnlijk ook zijn waarom td niet goed werkt in de vernaggelde IE. ;]
Citaat: The "bgcolor", "height", "width", and "nowrap" attributes of the td element are not supported in XHTML 1.0 Strict DTD.
Zal waarschijnlijk ook zijn waarom td niet goed werkt in de vernaggelde IE. ;]
Jij praat ook over XHTML Strict, terwijl hij het DOCTYPE Transitional gebruikt. Dat zou dus geen problemen op moeten leveren.
Ja, maar aangezien hij beweerd dat hij wel werkt in Opera en Firefox maar niet in IE, blijkt dus dat IE de td verkeerd ziet. IE doet wel vaker dit soort dingen fout. (In IE 8.0 word beweerd dat deze dingen allemaal verbeterd worden.)