Ga naar inhoud

IE v.s. Chrome


Aanbevolen berichten

Geplaatst:

Hey allemaal,

Ik heb een probleempje met mijn website.. Ik hem met Adobe Photoshop een layout gemaakt en in Dreamweaver geladen (met segmenten en al).

Op de menu buttons heb ik met CSS en jQuery een hover fade (een mouseover maar dan langzaam overlopend) toegepast.

Dit werkt allemaal perfect, maar wanneer ik mijn website in Internet Explorer 9 open blijken de menu buttons 1 pixel verschoven te zijn. Als ik de code met een <div> heb aangepast aan Internet Explorer, verschuift de boel in google chrome..

1 Pixel lijkt niet veel, maar het veroorzaakt een witte streep.. Is niet zo netjes, en sonde van die vele uren werk aan de layout.

M'n website staat nog niet online, maar ik kan hier wel de code neerzetten:

<html><head>
<title>Pagina 2</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});


});
</script>
<style>
div.fadehover {
position: relative;
}


img.a {
position: absolute;
left: 0;
top: -25;
       z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: -25;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<body bgcolor="#191610" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<!-- Save for Web Slices (Nieuw begin.psd) -->
<div align="center">
<table id="Tabel_01" width="1000" height="1501" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="10">
		<img src="afbeeldingen/Over-mij_01.jpg" width="1000" height="88" alt=""></td>
</tr>
<tr>
	<td colspan="10">
		<img src="afbeeldingen/Over-mij_02.jpg" width="1000" height="4" alt=""></td>
</tr>
<tr>
	<td colspan="2">
		<img src="afbeeldingen/Over-mij_03.jpg" width="84" height="47" alt=""></td>
	<td>
       <div class="fadehover" style="position:relative;top:1px">
	<img src="afbeeldingen/Over-mij_04.jpg" alt="" class="a" />
	<img src="afbeeldingen/Nieuw-begin-mouseover_03.jpg" alt="" class="b" /> 
       </div>
	</td>
	<td colspan="2">
		<img src="afbeeldingen/Over-mij_05.jpg" width="195" height="47" alt=""></td>
	<td colspan="4">
       <div class="fadehover" style="position:relative;top:1px">
	<img src="afbeeldingen/Over-mij_06.jpg" alt="" class="a" />
	<img src="afbeeldingen/Nieuw-begin-mouseover_05.jpg" alt="" class="b" />
	</div> 
   	</td>
	<td rowspan="2">
		<img src="afbeeldingen/Over-mij_07.jpg" width="83" height="97" alt=""></td>
</tr>
<tr>
	<td>
		<img src="afbeeldingen/Over-mij_08.jpg" width="25" height="50" alt=""></td>
	<td colspan="3">
       <div class="fadehover">
	<img src="afbeeldingen/Over-mij_09.jpg" alt="" class="a" />
	<img src="afbeeldingen/Nieuw-begin-mouseover_08.jpg" alt="" class="b" />
	</div> 
           </td>
	<td colspan="2">
		<img src="afbeeldingen/Over-mij_10.jpg" width="147" height="50" alt=""></td>
	<td colspan="2">
       <div class="fadehover">
	<img src="afbeeldingen/Over-mij_11.jpg" alt="" class="a" />
	<img src="afbeeldingen/Nieuw-begin-mouseover_10.jpg" alt="" class="b" />
	</div> 
       </td>
	<td>
		<img src="afbeeldingen/Over-mij_12.jpg" width="28" height="50" alt=""></td>
</tr>
<tr>
	<td colspan="10">
		<img src="afbeeldingen/Over-mij_13.jpg" width="1000" height="349" alt=""></td>
</tr>
<tr>
	<td colspan="7" rowspan="2">
		<img src="afbeeldingen/Over-mij_14.jpg" width="574" height="962" alt=""></td>
	<td colspan="3">
		<img src="afbeeldingen/Over-mij_15.jpg" width="426" height="397" alt=""></td>
</tr>
<tr>
	<td colspan="3">
		<img src="afbeeldingen/Over-mij_16.jpg" width="426" height="565" alt=""></td>
</tr>
<tr>
	<td>
		<img src="afbeeldingen/spacer.gif" width="25" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="59" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="215" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="87" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="108" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="39" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="41" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="315" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="28" height="1" alt=""></td>
	<td>
		<img src="afbeeldingen/spacer.gif" width="83" height="1" alt=""></td>
</tr>
</table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

Wie kan mij helpen?

Alvast super bedankt! :)

Groeten,

Max

Geplaatst:

Weet iemand een oplossing? Daarvoor zou ik heel dankbaar zijn!

- Max

  • 3 weken later...
Geplaatst:

Links zonder lijn is correct. De lijn is fout, die moet weg :embarassed:

Geplaatst:

Heel erg bedankt! Hij doet het! Echt super!!

Heb ik alleen nog één probleem.. Ik kan geen tekst typen op de layout (onder de menubalk) zonder dat mijn layout compleet verschuift.. Het mooiste zou zijn als ik een apart bestand maak voor de pagina waarin ik alle tekst voor die pagina kan typen. Dan lopen de codes en de teksten niet door elkaar. Is dat mogelijk?

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.