Zoom Problem in Google Chrome und Opera.

Spider

Hallo alle zusammen,

Bin neu hier da ich mit meinem Latein am Ende bin, versuche ich mal ob mir hier die Profis helfen können.

Habe einen Stil erstellt der folgender maßen aufgestellt ist.Siehe Code unten.
Fehler:Die Bilder Clices, haben einen Rahmen beim Zoomen mit Chrome und Opera.!!!!!!!!!!!!
IE und Firefox ohne Fehler.

Ich hoffe das Ihr mir Helfen könnt...irgenwas mach ich falsch...

W3C Valide ohne Fehler
link zum Board: http://testboard4.my-pixel.eu/

Ich versuche schon seit Tagen eine Lösung zu finden bin am Rande des Wahnsinns...

Bitte helft mir ich dreh durch............

HTML:

HTML

<div id="header"><div id="page">	<a id="top"></a>
<table class="space"> <tr><td><div class="header_02"></div></td><td><div class="header_03"></div></td> </tr>     </table>
    <table class="space">        <tr>            <td>                <div class="header_06">                </div>            </td>
            <td>                <div class="header_07">                </div>            </td>        </tr>    </table>		
<table class="space"> <tr><td><div class="header_08"></div></td><td><div class="header_09"></div></td><td><div class="header_10"></div></td></tr>     </table>
<table class="space"> <tr><td><div class="header_11"></div></td><td><div class="header_12"></div></td> </tr>     </table>
<table class="space"> <tr><td><div class="header_13"></div></td><td><div class="header_14"></div></td><td><div class="header_15"></div></td></tr>     </table>
<table class="space"> <tr><td><div class="header_17"></div></td><td><div class="header_18"></div></td> </tr>     </table>
<table class="space"> <tr>  <td class="leiste_links"></td>    <td class="main"> <div id="topmenu"></div>

Css:

Code

table.space {  border:0px;
  border-spacing: 0px 0px;
  }
td {
  border:0px;
  }




.tabularBoxTitle > header {
padding: 6px 10px;
background-image: url(@{style_image_path}tabular.jpg);
border-bottom: 1px solid #AA4D00;
}




#header {
min-width: 1046px; 
max-width: 30%;
height: 100%;
background:    #e3e3e3;
width: width 0px;
margin: 0 auto;
}












.userPanel > div > .searchBar > form input[type='search'] {
height: 30px;
color: #000000;
margin: 0px 0px;
text-shadow: 0px -1px 0px transparent;
width: 200px;
border-radius: 0px;
background-image: url(@{style_image_path}tabular.jpg);
padding: 3px 10px 3px 24px;
}




.userPanel {
height: 34px;
padding-left:10px;
padding-right: 10px;
border-radius: 6px 6px 0px 0px;
z-index: 200;
position:relative;
background-image: url(@{style_image_path}tabular.jpg);
}




.mainMenu {
background-image: url(@{style_image_path}top_bg.jpg);
border-top: 1px solid #AA4D00;
}




.mainMenu > ul > li > a {
background-image: url(@{style_image_path}top_bg.jpg);
border-right: 1px solid #AA4D00;
box-shadow: 0px 0px 1px #AA4D00 inset;	




}




.navigationFooter {
margin-top: -1px;
background-image: url(@{style_image_path}tabular.jpg);
border-top: 1px solid #AA4D00;
border-bottom: 1px solid #171717;
}








Css-Bilder.......




 .header_02{
 background: url("../images/mp-autumn/header_02.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 width: 527px;
 height: 52px;




}
.header_03 {
 background: url("../images/mp-autumn/header_03.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 52px;
 width: 519px;




}
.header_06 {
 background: url("../images/mp-autumn/header_06.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 width: 528px;
 height: 72px;
}




.header_07 {
 background: url("../images/mp-autumn/header_07.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 72px;
 width: 518px;




}
.header_08 {
 background: url("../images/mp-autumn/header_08.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 99px;
 width: 258px;









}
.header_09 {
 background: url("../images/mp-autumn/header_09.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 99px;
 width: 533px;

}
.header_10 {
 background: url("../images/mp-autumn/header_10.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 99px;
 width: 255px;








}




.header_11 {
 background: url("../images/mp-autumn/header_11.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 85px;
 width: 529px;
}




.header_12 {
 background: url("../images/mp-autumn/header_12.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 85px;
 width: 517px;
}
.header_13 {
 background: url("../images/mp-autumn/header_13.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 33px;
 width: 181px;
}
.header_14 {
 background: url("../images/mp-autumn/header_14.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 33px;
 width: 704px;
}
.header_15 {
 background: url("../images/mp-autumn/header_15.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 33px;
 width: 161px;
}
.header_17 {
 background: url("../images/mp-autumn/header_17.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 31px;
 width: 532px;
}




.header_18 {
 background: url("../images/mp-autumn/header_18.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 31px;
 width: 514px;
}
.leiste_rechts {
 background: url("../images/mp-autumn/leiste_rechts.jpg");
 background-repeat: repeat-y;
 background-position: top right;
 width: 68px;
}




.leiste_links {
 background: url("../images/mp-autumn/leiste_links.jpg");
 background-repeat: repeat-y;
 background-position: top left;
 width: 69px;
}
















.header_46 {
 background: url("../images/mp-autumn/header_46.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 78px;
 width: 525px;
}








.header_47 {
 background: url("../images/mp-autumn/header_47.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 78px;
 width: 521px;
}




.header_48 {
 background: url("../images/mp-autumn/header_48.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 20px;
 width: 452px;
}




.header_49 {
 background: url("../images/mp-autumn/header_49.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 20px;
 width: 140px;
}




.header_50 {
 background: url("../images/mp-autumn/header_50.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 20px;
 width: 454px;
}




.header_51 {
 background: url("../images/mp-autumn/header_51.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 26px;
 width: 441px;
}




.header_52 {
 background: url("../images/mp-autumn/header_52.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 26px;
 width: 176px;
}




.header_53 {
 background: url("../images/mp-autumn/header_53.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 26px;
 width: 429px;
}




.header_54 {
 background: url("../images/mp-autumn/header_54.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 51px;
 width: 549px;
}




.header_55 {
 background: url("../images/mp-autumn/header_55.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 margin: 0px auto; 
 padding: 0 0 0 0;
 height: 51px;
 width: 497px;
}








.obenmitte {
 background: url("../images/mp-autumn/obenmitte.jpg");
 background-repeat: repeat-x;
 background-position: bottom;
 height: 20px;
}




.obenlinks {
 background: url("../images/mp-autumn/obenlinks.jpg");
 background-repeat: no-repeat;
 background-position: bottom left;
 padding-left: 38px;
 height: 20px;
}




.obenrechts {
 background: url("../images/mp-autumn/obenrechts.jpg");
 background-repeat: no-repeat;
 background-position: bottom right;
 padding-right: 40px;
 height: 20px;
}




.untenrechts {
 background: url("../images/mp-autumn/untenrechts.jpg");
 background-repeat: no-repeat;
 background-position: top right;
 padding-right: 42px;
 height: 20px;
}




.untenlinks {
 background: url("../images/mp-autumn/untenlinks.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 padding-left: 41px;
 height: 20px;
 margin: -7px auto 15px auto;
}




.untenmitte {
 background:url("../images/mp-autumn/untenmitte.jpg");
 background-repeat: repeat-x;
 background-position: top;
 height: 20px;
}








.obenlinks {
margin: 10px auto -15px auto;
}
.untenmitte {
margin: 6px auto -15px auto;
}

Alles anzeigen

Vielen Dank für eure Hilfe

eg45

Warum machst du denn alles mit Tabellen? Das ist doch Steinzeitmäßig?

- - - Aktualisiert - - -

Hast du border-collapse: collapse drin?

Spider

HI

Nein kein border-collapse..

Steinzeit jo genau wie ich halt...lol
kann es so aber halt auch nicht so Spitze...wie mann sehen kann.

Du meinst alles über Css?
Bin ich Parallel am Testen.

Doch stellt sich mir die Frage mag ja veraltet sein, doch ist es deshalb Nicht realisierbar?
oder gar nicht Richtig?

Wenn es für mein Problem am Ende keine Lösung geben Sollte, dann müsste ich ja alles in Css machen, doch ob ich das noch in meine Birne bekomme ka...lol

MFG

Vielen Dank

Arne Drews

Hallo,

Hast Du einen Link zu der Seite, da kann man das evtl. besser analysieren.

Gruß Arne

AnyKey

Ja.

Das HTML-Konstrukt macht es so nicht gerade übersichtlich und wartungsfreundlich.

Übrigens arbeitest Du ja bereits schon mit CSS und das find ich ja schon mal .

Für Layouts benötigt man heute keine Tabellen mehr. Die Div-Blöcke kannst Du auch so positionieren, wie Du sie haben willst.

Es ist schwer es sich abzugewöhnen, wenn man sich erstmal jahrelang daran gewöhnt hat.

Aber wenn Du die Idee mit dem tabellarischem Layout erst einmal über Bord geworfen hast, wirst Du es in Deinem Leben nicht wieder aufgreifen!

Zur Frage:

Welche Bilder sind denn genau betroffen?

Also intuitiv würde ich sagen, dass es u.a. die Backgrounds von MainMenu sind, da Du denen auch einen Border zugewiesen hast.

MrMurphy

Hallo

Zitat

Hast Du einen Link zu der Seite, da kann man das evtl. besser analysieren.

Hat er doch:

http://testboard4.my-pixel.eu/

Zitat

doch ist es deshalb Nicht realisierbar?

Nur realisierbar von Leuten, die sich mit der falschen Verwendung von Tabellen auskennen. Das sind aber nicht die Profis, die Tabellen halt nur korrekt anwenden.

Du benötigst also Webseitenersteller, die ihrerseits Tabellen zum Layouten mißbrauchen und sich deshalb mit eigentlich unsinnigen Lösungen auskennen.

Da Tabellen nur zum Anzeigen von Tabellendaten gedacht sind verhalten sie sich anders als andere Container. Wenn du für dein Problem eine Lösung suchst musst du also ein Spezialist in der falschen Anwendung vom Tabellenlayout werden. Und damit leben, dass dir deine eigentlich unsinnigen Lösungen bei Browserupdates jederzeit um die Ohren fliegen können. Die Browserersteller gehen schließlich von einer korrekten Anwendung von HTML und CSS aus. Ob das für dich wirklich Sinn macht?

Wenn du bei deinem grafiklastigen Layout bleiben willst solltest du nur eine Grafik verwenden (dem silberfarbenen Bereich), den Farbverlauf im Hintergrund mittels CSS realisieren und die Inhalte per CSS auf der Grafik plazieren. Das ist viel einfacher zu realisieren und zugleich benutzerfreundlicher.

Gruss

MrMurphy

Arne Drews

Zitat von MrMurphy

Hat er doch:

Upsi... Hab' ich gar nicht gesehen, sorry...

Ok, Spider:
Wenn ich die Werte für die Breiten der Elemente anpasse sieht es auch im Chrome gut aus.
Das ist aber, so wie es aufgebaut ist eher mühselig und fragwürdig, ob das über das ganze Dokument machbar ist.

Wie bereits erwähnt, solltest Du Dich vom Tabellen-Layout trennen.
Tabellen machen da Sinn, wo Du etwas tabellarisch anzeigen willst, bspw. eine Mitgliederliste o.ä.

Für das Layouting sind die schon lange out.
Du bekommst bessere Lösungen mit Containern und CSS.

Gruß Arne

Spider

Hi

Dachte ich mir schon....
Na da mach ich mich doch gleich mal ran...

Vielen Dank

Gruss

Zoom Problem in Google Chrome und Opera.

Tags

Benutzer online in diesem Thema