Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Unterschiedliches Layout bei Browsern
| geschrieben von Shaddow am 01.06.2009 - 12:26 |
| Hi hab derzeit das Prob, dass meine Website im Opera und IE relativ gleich aussieht, der Firefox aber einige Images anders darstellt: http://www.stayinaction.de/ Direkt die Startseite wird korrekt im Opera und IE dargestellt. Der Firefox positioniert die Bilder anders. Laut SelfHTML sollte das aber so gehen. Hab auch die vorgeschlagenen Stylesheets von SelfHTML schon getestet, um die Positionierung zu erwirken. Dann allerdings funktioniert es in gar keinem Browser mehr. Hoffe, der ein oder andere Css crack kann mir helfen ;) Merci |
| geschrieben von Danny am 01.06.2009 - 14:09 |
| Hallo Shaddow, hier mal ein paar Sachen die mir aufgefallen sind, ob es letzendlich mit deinem Problem zu tun hat kann ich dir so pauschal nicht sagen. Die CSS ID #headContent wird im Code mehreren Elementen zugeordnet. Darüber sehen Browser zwar in der Regeln hinweg, richtig ist es allerdings trotzdem nicht. Die height: 100% Angabe in #mainContent ist meines Erachtens unlogisch. Das würde bedeuten, dass dieser Container die selbe Höhe wie sein Eltern Element (div#headContent) besitzt. Da aber in diesem Eltern Element noch #header, #horizontal_seperator, usw. stecken kann #mainContent gar nicht so hoch sein wie #headContent. Wozu brauchst du diese height: 100% Angaben ? In der Regel möchte man damit eh andere Effekte erzielen als der Browser es auch tut (z.B. ist ja height: 100% maximal die Bildschirmhöhe... Sobald man eine Seite vertikal scrollen kann fangen die Probleme an, weil man nicht mehr in den 100% liegt) So nun zu deinem eigentlichen Problem. Um die beiden Bilder bzw allgemein zwei Elemente nebeneinander anzuzeigen würde ich dir eher zum CSS Attribut float:left raten. Aber trotzdem würde es wahrscehinlich noch falsch dargestellt werden. Tasten wir uns von "oben" heran. #sheet ist 950px breit und somit auch #mainContent. Darin hast du den Container #mainContentCenter der auf jeder Seite einen Rahmen von einem Pixel hat. Da das ganze ja in die 950px des Elternelementes reinpassen muss, kann #mainContentCenter auch nur noch 948px + 2px Rahmen (rechts und links) breit sein. Das zieht sich bis zu den Bildern die mit ihren 600px + 350px = 950px > 948px ncihtmehr nebeneinander passen. Viele Grüße Danny |
| geschrieben von Shaddow am 01.06.2009 - 16:29 |
| Hey das mit den 100% klingt logisch, habe mal alle rausgemacht  Was mir vorhin auch aufgefallen ist, was du auch selbst angesprochen hast: maincontent liegt im headcontent Eigentlich unlogisch, denn das sollte auf der gleichen Ebene wie headcontent liegen. Da hatte ich ein </div> vergessen. Hab das mal eingefügt. Interessant war auch, dass dennoch alle stylesheets richtig geladen wurden, auch wenn sie ".. div#sheet div#mainContent div#xyz" hießen und nicht "..div#sheet div#headContent div#mainContent div#xyz", wie sie ja nach der struktur, die ich vorher hatte, hätten heißen müssen Zu dem Problem: Danke Das wars ;) |
| geschrieben von Danny am 01.06.2009 - 16:35 |
| Als Tipp empfehle ich im Firefox das Plugin Firebug bzw. im Opera ist es als "Entwicklerwerzeuge" schon mit drin. Damit lassen sich unter anderem die Umrisse und die gerenderten Breiten der Container anzeigen. Auch sehr nützlich z.B. die wirklich ausgewerteten CSS Attribute ... gerade im Bezug wenn man allgemeine Angaben in einem Speziellen Fall überschreiben will, sieht man welche nun wirklich ausgewertet werden. Und noch ziemlich viel mehr .. |