IE & Mozilla Dilemma

Status
Nicht offen für weitere Antworten.
mille

mille

Erfahrenes Mitglied
Hallo!

Ich habe ein Menü für eine Webseite gebastelt. Da dieses dynamisch agieren soll und überall lauffähig sein soll hab ich dies mit PHP realisiert. Klappt auch alles ganz feini.

Nur wird das Menü im IE mit abständen zwischen den einzelnen bildern dargestellt. Es besteht aus vielen kleinen bildchen, die sich wie ein Puzzle zusammensetzen.
Im Anhang hab ich die Screens angehängt vom IE und vom Firebird.

Obwohl alle Spalten, Zeilen und Kammern der Tabelle mit expliziten Höhenangaben sind, macht der IE das falsch.

Beispiel:
<table ....cellpadding=0 etc....>
<tr>
<td height="20"><img src="..." height="20"></td>
</Tr>
<tr>
<td height="20"><img src="..." height="20"></td>
</Tr>
</table>

So ähnlich sieht die ganze HTML aus. Dies bedeutet, das untereinander 2 Bilder angezeigt werden sollen und diese absolut keinen Abstand zu einander haben. Die beiden bildchen sollen sich berühren. Die Tabelle HAT GARKEINE SPACINGS (padding/spacing alles auf 0), die bilder haben keinen Rahmen (border auf 0) und die Tabellenhöhenangaben sind auch alle richtig, trotzdem mach der schei** IE keine korrekte Darstellung.

Ich hoffe ihr könnt mir vielleicht sagen wo ran das liegt?
Gruß Basti


PS: zum anhang, links ist der Firebird Screen zusehen, rechts der IE. Beide mit GLEICHER HTML
 

Anhänge

  • fbird_screen.jpg
    fbird_screen.jpg
    29,8 KB · Aufrufe: 45
  • IE_screen.jpg
    IE_screen.jpg
    29,2 KB · Aufrufe: 46
Ich gehe mal davon aus das alle Bilder in einer TD angezeigt werden oder?
Oder machst du für jedes Bild eine neue Tabellenzelle?

Ich hatte das auch schon, damals hat ein <br> nach dem Bild wunder gewirkt. Damals war aber alles in einer Tabellenzelle.

Hast du mal den Quelltext von DEM teil?
 
Den ganzen Quelltext zu posten wäre zu krass, das ist ein Template für Smarty, aber ich hau hier mal 3 Zeilen rein, die relativ übersichtlich sind.

Sie stellen den Strich und die Menüpunkte "enjoy" "programm" und "ticket" dar. Der rest ist ziemlcih krass geschachtelt.

Code: 
  <tr height="20">
    <td width="22" height="20"><img border="0" src="gfx/menu_line{$enjoy_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "enjoy"}
	<img border="0" src="gfx/menu_font_enjoy_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=enjoy"><img border="0" src="gfx/menu_font_enjoy.jpg" height="20"></a>
	{/if}
	</td>
  </tr>
  <tr>
    <td width="22"><img border="0" src="gfx/menu_line{$programm_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "programm"}
	<img border="0" src="gfx/menu_font_programm_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=programm"><img border="0" src="gfx/menu_font_programm.jpg" height="20"></a>
	{/if}
	</td>
  </tr>
  <tr>
    <td width="22"><img border="0" src="gfx/menu_line{$ticket_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "ticket"}
	<img border="0" src="gfx/menu_font_ticket_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=ticket"><img border="0" src="gfx/menu_font_ticket.jpg" height="20"></a>
	{/if}
	</td>
  </tr>

menu_line...jpg stellt diese graue Linie vor dem Menüpunkt dar und menu_font_NAME.jpg steht für den Menüpunkt selbst als Bild - ich denk das ist einleuchtend :)

Hoffe das hilft.... !?
 
Ok, sieht ja soweit ganz gut aus. Kann es sein, dass du noch wo für TD oder so ein Padding hast?
Weill dann wäre das ein Problem mit dem IE das er die Paddingwerte dazuzählt und nicht abzählt ...
 
Also ich hab die ganze datei mal durchsucht. Alle Paddings und SPacings die ich in dem Tempalte habe beinhalten ausschließlich den Wert 0. Auch alle Höhenangaben hab ich per HAnd noch mal reingeschrieben, da ich einem WYSIWYG Programm darin nicht so recht vertraue ;).

Blöd nur, das der ........ IE da rumspinnt :S.

Achso ja, es ist korrekt, die Bilder stehen ausschließlich in den TDs oder arber in weiteren Tabellen, die in ein TD eingefügt sind. Quasi verschachtelt. ich Hau eifnach mal den ganzen Quelltext rein, ich hoffe du/ihr kommt damit zu rande ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
{literal}
<style type="text/css">
<!--
body {
	background-color: #000000;
}
-->
</style>
{/literal}
</head>

<body>
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="139" colspan="2"><a href="{$self}"><img border="0" src="gfx/menu_logo.jpg"></a>
    </td>
    <td width="11" rowspan="12" valign="top">
	<!-- Start bei Hoehe von 101, da Banner und Startlinie 107px Platz einnehmen -->
      <table width="11" height="101" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="bottom"><img border="0" src="gfx/menu_arrow.jpg" width="11" height="11"></td>
      </tr>
    </table></td>
  </tr>
  <tr height="52">
	  <td width="20" height="52" 
	  
	  					 {if $smarty.get.link}
						 	background="gfx/menu_line_start_active.jpg"
						 {else}
							background="gfx/menu_line_start.jpg"
						 {/if}
						 
		valign="top"><img border="0" src="gfx/menu_spacer.jpg" width="22" height="3"></td>
	<td width="119">&nbsp;</td>
  </tr>
  <tr>
    <td width="22 "height="{$club_size}">
	
		<table width="22" height="{$club_size}" border="0" cellpadding="0" cellspacing="0">
		  <tr>
			<td height="20">
			{if $club_open == true}
			<a href="{$self}"><img src="gfx/menu_line_minus{$club_add}.jpg" width="22" height="20" border="0"></a>
			{else}
			<a href="{$self}?link=club"><img src="gfx/menu_line_plus{$club_add}.jpg" width="22" height="20" border="0"></a>
			{/if}
			</td>
		  </tr>
		  
		  {if $club_size > 20}
		  <tr>
			<td height="60" background="gfx/menu_line_1px{$1px_add}.jpg">&nbsp;</td>
		  </tr>
		  {/if}
		</table>
	
	</td>
    <td height="{$club_size}">
	{if $club_open == true}
	<a href="{$self}"><img border="0" src="gfx/menu_font_club_active.jpg" height="20"></a><br>
		  <table width="140" height="60" border="0" cellpadding="0" cellspacing="0">
			<tr>
			  <td width="22" height="20"><img border="0" src="gfx/menu_line{$concept_add}.jpg" height="20"></td>
			  <td height="20">
			 	{if $smarty.get.sub_a == "concept"}
				<img border="0" src="gfx/menu_font_club-concept_active.jpg" height="20">
				{else}	
				<a href="{$self}?link=club&sub_a=concept"><img border="0" src="gfx/menu_font_club-concept.jpg" height="20"></a>
				{/if}
			</td>
			</tr>
			<tr>
			  <td width="22" height="20"><img border="0" src="gfx/menu_line{$history_add}.jpg" height="20"></td>
			  <td height="20">
			  	{if $smarty.get.sub_a == "history"}
				<img border="0" src="gfx/menu_font_club-history_active.jpg" height="20">
				{else}	
				<a href="{$self}?link=club&sub_a=history"><img border="0" src="gfx/menu_font_club-history.jpg" height="20"></a>
				{/if}
			  </td>
			</tr>
			<tr>
			  <td width="22" height="20"><img border="0" src="gfx/menu_line_end{$djs_add}.jpg" height="20"></td>
			  <td height="20">
			  {if $smarty.get.sub_a == "djs"}
				<img border="0" src="gfx/menu_font_club-djs_active.jpg" height="20">
				{else}	
				<a href="{$self}?link=club&sub_a=djs"><img border="0" src="gfx/menu_font_club-djs.jpg" height="20"></a>
				{/if}
			  </td>
			</tr>
		  </table>
	{else}	
	<a href="{$self}?link=club&sub_a=concept"><img border="0" src="gfx/menu_font_club.jpg" height="20"></a>
	{/if}
	  </td>
  </tr>
  <tr height="20">
    <td width="22" height="20"><img border="0" src="gfx/menu_line{$enjoy_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "enjoy"}
	<img border="0" src="gfx/menu_font_enjoy_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=enjoy"><img border="0" src="gfx/menu_font_enjoy.jpg" height="20"></a>
	{/if}
	</td>
  </tr>
  <tr>
    <td width="22"><img border="0" src="gfx/menu_line{$programm_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "programm"}
	<img border="0" src="gfx/menu_font_programm_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=programm"><img border="0" src="gfx/menu_font_programm.jpg" height="20"></a>
	{/if}
	</td>
  </tr>
  <tr>
    <td width="22"><img border="0" src="gfx/menu_line{$ticket_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "ticket"}
	<img border="0" src="gfx/menu_font_ticket_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=ticket"><img border="0" src="gfx/menu_font_ticket.jpg" height="20"></a>
	{/if}
	</td>
  </tr>
  <tr>
    <td width="22">	
	
		<table width="22" height="{$getthere_size}" border="0" cellpadding="0" cellspacing="0">
		  <tr>
			<td height="20">
			{if $getthere_open == true}
			<a href="{$self}"><img src="gfx/menu_line_minus{$getthere_add}.jpg" width="22" height="20" border="0"></a>
			{else}
			<a href="{$self}?link=getthere&sub_a=national"><img border="0" src="gfx/menu_line_plus{$getthere_add}.jpg" width="22" height="20"></a>
			{/if}
			</td>
		  </tr>
		  
		  {if $getthere_size > 20}
		  <tr>
			<td height="80" background="gfx/menu_line_1px{$1px_add}.jpg">&nbsp;</td>
		  </tr>
		  {/if}
		</table>
	
	</td>
	<td height="{$getthere_size}">
	{if $getthere_open == true}
	<a href="{$self}"><img border="0" src="gfx/menu_font_getthere_active.jpg" height="20"></a><br>
	
	<table width="140" height="80" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="22" height="20"><img border="0" src="gfx/menu_line{$national_add}.jpg" height="20"></td>
          <td height="20">
		 		{if $smarty.get.sub_a == "national"}
				<img border="0" src="gfx/menu_font_getthere-national_active.jpg" height="20">
				{else}	
				<a href="{$self}?link=getthere&sub_a=national"><img border="0" src="gfx/menu_font_getthere-national.jpg" height="20"></a>
				{/if}
		  </td>
        </tr>
        <tr>
          <td width="22" height="20"><img border="0" src="gfx/menu_line{$regional_add}.jpg" height="20"></td>
          <td height="20">
		  		{if $smarty.get.sub_a == "regional"}
				<img border="0" src="gfx/menu_font_getthere-regional_active.jpg" height="20">
				{else}	
				<a href="{$self}?link=getthere&sub_a=regional"><img border="0" src="gfx/menu_font_getthere-regional.jpg" height="20"></a>
				{/if}
		  </td>
        </tr>
        <tr>
          <td width="22" height="20"><img border="0" src="gfx/menu_line{$local_add}.jpg" height="20"></td>
          <td height="20">
				{if $smarty.get.sub_a == "local"}
				<img border="0" src="gfx/menu_font_getthere-local_active.jpg" height="20">
				{else}	
				<a href="{$self}?link=getthere&sub_a=local"><img border="0" src="gfx/menu_font_getthere-local.jpg" height="20"></a>
				{/if}
		  </td>
        </tr>
        <tr>
          <td height="20"><img border="0" src="gfx/menu_line_end{$location_add}.jpg" height="20"></td>
          <td height="20">
				 {if $smarty.get.sub_a == "location"}
				<img border="0" src="gfx/menu_font_getthere-location_active.jpg" height="20">
				{else}	
				<a href="{$self}?link=getthere&sub_a=location"><img border="0" src="gfx/menu_font_getthere-location.jpg" height="20"></a>
				{/if}
		  </td>
        </tr>
      </table>
	  
	{else}	
	<a href="{$self}?link=getthere&sub_a=national"><img border="0" src="gfx/menu_font_getthere.jpg" height="20"></a>
	{/if}
	 </td>
  </tr>
  <tr>
    <td width="22"><img border="0" src="gfx/menu_line{$partner_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "partner"}
	<img border="0" src="gfx/menu_font_partner_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=partner"><img border="0" src="gfx/menu_font_partner.jpg" height="20"></a>
	{/if}
	</td>
  </tr>
  <tr>
    <td width="22"><img border="0" src="gfx/menu_line{$gbook_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "gbook"}
	<img border="0" src="gfx/menu_font_gbook_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=gbook"><img border="0" src="gfx/menu_font_gbook.jpg" height="20"></a>
	{/if}
	</td>
  </tr>
  <tr>
    <td width="22" valign="top">	  
	
		<table width="22" height="{$basics_size}" border="0" cellpadding="0" cellspacing="0">
			  <tr>
				<td height="20">
				{if $basics_open == true}
					<a href="{$self}"><img src="gfx/menu_line_minus{$basics_add}.jpg" width="22" height="20" border="0"></a>
				{else}
					<a href="{$self}?link=basics&sub_a=architecture&sub_b=electric"><img src="gfx/menu_line_plus{$basics_add}.jpg" width="22" height="20" border="0"></a>
				{/if}
			</td>
		  </tr>
		  
		  {if $basics_size > 20}
		  <tr>
			<td height="100%" background="gfx/menu_line_1px{$1px_add}.jpg">&nbsp;</td>
		  </tr>
		  {/if}
		</table>
		
	</td>
    <td height="{$basics_size}">
	{if $basics_open == true}
	<a href="{$self}"><img border="0" src="gfx/menu_font_basics_active.jpg" height="20"></a><br>
	
	<table width="{$basics_size}" height="60" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="22" height="20">
		  
			  <table width="22" height="{$architecture_size}" border="0" cellpadding="0" cellspacing="0">
				<tr>
				  <td height="20">
				 	 {if $architecture_open == true}
						<a href="{$self}"><img src="gfx/menu_line_minus{$architecture_add}.jpg" width="22" height="20" border="0"></a>
					 {else}
						<a href="{$self}?link=basics&sub_a=architecture&sub_b=electric"><img border="0" src="gfx/menu_line_plus{$architecture_add}.jpg" height="20"></a>
					 {/if}
					</td>
				  </tr>
				  
				  {if $architecture_size > 20}
				  <tr>
					<td height="100%" background="gfx/menu_line_1px{$1px_add}.jpg">&nbsp;</td>
				  </tr>
				  {/if}
			  </table>
		  
		  </td>
          <td height="{$architecture_size}">
		 			 {if $smarty.get.sub_a == "architecture"}
						<img border="0" src="gfx/menu_font_basics-architecture_active.jpg" height="20"><br>
						<table width="140" height="60" border="0" cellpadding="0" cellspacing="0">
						  <tr>
							<td width="22" height="20"><img border="0" src="gfx/menu_line{$electric_add}.jpg" height="20"></td>
							<td height="20">
							 {if $smarty.get.sub_b == "electric"}
								<img border="0" src="gfx/menu_font_basics-architecture-electric_active.jpg" height="20">
							 {else}	
								<a href="{$self}?link=basics&sub_a=architecture&sub_b=electric"><img border="0" src="gfx/menu_font_basics-architecture-electric.jpg" height="20"></a>
							 {/if}	
							</td>
						  </tr>
						  <tr>
							<td width="22" height="20"><img border="0" src="gfx/menu_line{$dimensions_add}.jpg" height="20"></td>
							<td height="20">
							{if $smarty.get.sub_b == "dimensions"}
								<img border="0" src="gfx/menu_font_basics-architecture-dimensions_active.jpg" height="20">
							 {else}	
								<a href="{$self}?link=basics&sub_a=architecture&sub_b=dimensions"><img border="0" src="gfx/menu_font_basics-architecture-dimensions.jpg" height="20"></a>
							 {/if}
							</td>
						  </tr>
						  <tr>
							<td width="22" height="20"><img border="0" src="gfx/menu_line_end{$3d_add}.jpg" height="20"></td>
							<td height="20">
							{if $smarty.get.sub_b == "3d"}
								<img border="0" src="gfx/menu_font_basics-architecture-3d_active.jpg" height="20">
							 {else}	
								<a href="{$self}?link=basics&sub_a=architecture&sub_b=3d"><img border="0" src="gfx/menu_font_basics-architecture-3d.jpg" height="20"></a>
							 {/if}
							</td>
						  </tr>
						</table>
					{else}	
						<a href="{$self}?link=basics&sub_a=architecture&sub_b=electric"><img border="0" src="gfx/menu_font_basics-architecture.jpg" height="20"></a>
					{/if}		
		</td>
        </tr>
        <tr>
          <td width="22" height="20"><img border="0" src="gfx/menu_line{$decoration_add}.jpg" height="20"></td>
          <td height="20">
		  	 {if $smarty.get.sub_a == "decoration"}
						<img border="0" src="gfx/menu_font_basics-decoration_active.jpg" height="20">
		 	 {else}	
				<a href="{$self}?link=basics&sub_a=decoration"><img border="0" src="gfx/menu_font_basics-decoration.jpg" height="20"></a>
			 {/if}	
		  </td>
        </tr>
        <tr>
          <td width="22" height="20"><img border="0" src="gfx/menu_line_end{$catering_add}.jpg" height="20"></td>
          <td height="20">
		   {if $smarty.get.sub_a == "catering"}
						<img border="0" src="gfx/menu_font_basics-catering_active.jpg" height="20">
		 	 {else}	
				<a href="{$self}?link=basics&sub_a=catering"><img border="0" src="gfx/menu_font_basics-catering.jpg" height="20"></a>
			 {/if}
		  </td>
        </tr>
      </table>
	  
	{else}	
	<a href="{$self}?link=basics&sub_a=architecture&sub_b=electric"><img border="0" src="gfx/menu_font_basics.jpg" height="20"></a>
	{/if}	
     </td>
  </tr>
  <tr>
    <td width="22"><img border="0" src="gfx/menu_line_end{$contact_add}.jpg" height="20"></td>
    <td height="20">
	{if $smarty.get.link == "contact"}
	<img border="0" src="gfx/menu_font_contact_active.jpg" height="20">
	{else}	
	<a href="{$self}?link=contact"><img border="0" src="gfx/menu_font_contact.jpg" height="20"></a>
	{/if}	
	</td>
  </tr>
</table>
</body>
</html>
 
Mir wurde geholfen, und zwar ovn worka.

Das Problem ist schlicht und ergreifend lächerlich!

in meinen Tabellen hatte ich nach den Bildern Zeilenumbrüche oder Leerzeichen, welche die Darstellung versauten - es lebe der IE

ich hatte es beispielsweise so:
<table><tr>
<td>
<img ....>
</td>
</tr>
</table>

Da aber nach <img ....> ein zeilenumbruch steht, geht das nicht, es sollte korrekt so heißen, dann ist die Darstellung auch perfekto

<table><tr>
<td><img ....></td> <!--- der entscheidende Fakt -->
</tr>
</table>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück