|
|||
bitte um Hilfe zu flexiblem layout
Hallo Forum,
ich habe ein flexibles Layout gebastelt - Total Validator sagt 0 Fehler - und es klappt im FF3.6.8, IE 7 und 8 (und mit ganz kleinem Fehler IE 6) sowie Opera10.61. Chrome und Safari haben ein Problem: mein rechter Rand wird nach innen geschoben und verkürzt den Inhalt-div. Kann mir bitte jemand helfen, das Problem zu lösen? Mein CSS (normal): Code:
body { font: 100.01% Arial, Verdana, Helvetica, sans-serif; background: #e7fcef; margin: 0; padding: 0; text-align: center; color: #000000; } body, html { height: 100%; } #container { width: 90%; background: url(images/bg_content.jpg) top left repeat-y; margin: 0 auto; border: 1px solid #000000; text-align: left; overflow: hidden; border: 2px solid #00f; min-width: 1024px; } #header { width: 100%; position: static; background: url(images/header_neu.jpg) top left no-repeat; padding: 0; height: 130px; text-align: right; overflow: hidden; margin-right: 40px; z-index: 1; } #bild { position: static; z-index: 2; } #header h1 { margin: 0; padding: 40px 0 0 50px; visibility: hidden; } #navigation { position: relative; margin-top: -86px; margin-bottom: 10px; height: 70px; z-index: 9; text-align: right; } #navigation ul { position: static; height: 70px; list-style: none; margin: 0px 45px 0 0; padding: 0; z-index: 10; } #navigation ul li { position: static; width: 100px; height: 70px; display: block; float: right; list-style: none; margin: 0; margin-right: 5px; padding: 0; background: #ff0; line-height: 70px; border: 1px solid 090; z-index: 11; } #navigation ul li a { display: block; float: left; width: 100px; height: 70px; margin: 0 0 0 1px; padding: 3px 10px; text-align: center; background: #eee; color: #000; text-decoration: none; position: static; left: 15px; line-height: 70px; z-index: 12; } #navigation ul li a:hover { background: #369; color: #fff; } #navigation ul li a.active, #navigation ul li a.active:hover { color: #fff; background: #000; font-weight: bold; } #navigation ul li a span { display:block; } #sidebar { float: left; width: 365px; background: url(images/bg_links.jpg) top left repeat-y; padding: 1em 1em 0 1em; } #left { padding: 0 2em 0 3.5em; } #sidebar #left h2 { font-size: 0.9em; font-weight: bold; padding-left: 15px; display: inline; } #sidebar #left p.holz { margin-top: 3px; margin-left: 50px; font-style: italic; color: #090; } #content { position: static; margin-left: 365px; margin: 0px 0px -20px 365px; padding: 0 2em 0 0; background: #cef6dd url(images/rand_rechts.jpg) top right repeat-y; overflow: hidden; } #content h1 { font-size: 1.2em; margin-top: 1em; } #content h2 { font-size: 1em; } #footer { height: 40px; padding: 0 0 0 10px; background: url(images/bg_footer.jpg) no-repeat; text-align: left; } #footerbild { position:relative; width: 709px; float: right; background: url(images/footer_rechts.jpg) top right no-repeat; } #impressum { position: absolute; margin-top: -140px; margin-left: 80px; font-size: 0.8em; text-align: left; } #footer p { margin: 0; padding: 10px 0; } #footerright { width: 100%; height: 40px; margin-top: 0px; text-align: right; background: url(images/footer_rechts.jpg) top right no-repeat; } Code:
#content { postion: static; margin-bottom: 0px; padding-bottom: 10px; } Vielen Dank für Eure Hilfe thorpi |
Sponsored Links |
|
|||
overflow:hidden ohne Breite mit Margins neben einem Float gehört zu den Dingen, die man nicht machen sollte, wenn man browserübergreifend konsistente Darstellung will.
Nimm overflow weg bei #content.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Hallo fricca, danke schon mal.
Safari packt es jetzt, Chrome noch nicht. Jetzt gibt es dafür bei den anderen noch kleine weiße Stellen ohne Inhalt - aber die könnte ich vielleicht auch noch wegbekommen (durch probieren, denke ich). Oder ich muss eben auf den Rand mit Schatten verzichten - dann muss ich nicht so viel mit den divs und bild links und rechts fummeln? Gruß thorpi |
|
|||
Suchfunktion: "collapsing margins"
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Das hab ich mir ausgedruckt und werde es mir zu Gemüte führen.
Aber ob das für den Chrome hilft weiß ich erst mal nicht. Chrome-Besucher machen auf meiner Seite ca. 3% aus - kann ich vielleicht vernachlässigen. Aber ist einer dabei, der etwas von mir will - pustekuchen. Trotzdem erst mal Danke. thorpi |
|
|||
Was ist denn in Chrome? Ich sehe kein Problem -- zumindest kein anderes als in FF und Safari.
Wenn du immer noch den rechten Abstand haben solltest dann leer mal den Cache.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Problem gelöst:
Hinweis von fricca zum overflow, Code:
* { margin: 0; padding: 0; } Vielen Dank nochmal thorpi |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauch Hilfe - mein Layout zerreißts beim Zoomen | Sakul | CSS | 3 | 18.03.2011 05:35 |
Bitte um Layout hilfe | gunnar_hst | CSS | 0 | 20.06.2010 15:57 |
Layout selbst coden - Hilfe ! | kgsbm | CSS | 3 | 25.03.2008 20:25 |
Brauche Hilfe beim 2-Spaltigen Layout | Kaimane | CSS | 1 | 15.08.2007 01:10 |
Hilfe 3 Spaltiges Layout mit 100% höhe | sydios | CSS | 12 | 15.06.2007 04:51 |