|
|||
Prozentangaben & Padding in FireFox/Netscape
Hallo zusammen,
ich bin über einen Link CSS4You.de auf dieses Forum gestoßen, weil ich eine Frage zu meinen Stylesheets habe. Ich habe heute einen ersten Versuch in tabellenfreim Design gestartet, der auch - halbwegs - erfolgreich war. Ich habe viele Fragen, also fange ich am besten von vorne an. Zuerst einmal habe ich das Problem, dass FireFox die Stylesheets komplett anders interpretiert als der IE. Das ist eigentlich nichts außergewöhnliches, außer das es mir dieses mal im IE logisch und im Firefox falsch vorkommt. [Zum testen verwendete Browser: I.E. 6.0 - SP1, FireFox 1.1, Netscape 7.1] Problem 1: Padding Die Div's sind über "float: left;" und "...right;" angeordnet und haben eine feste Breite und Höhe. Lege ich für einen der Container den Wert "padding" fest, führt das in FireFox und Netscape aber dazu, dass der Container um denselben Wert breiter/höher wird und mein Design zerschossen wird. Ich muss den Padding-Wert von der Breite des DIVs abziehen. Im Internet Explorer wird der Wert nicht addiert und als Resultat eine "Lücke" sichtbar, was unschön ist. Hat jemand einen Tip? Problem 2: Prozentangabe Das zweite Problem ist die Angabe der Höhe in Prozent. Alle Container liegen in einem Hauptcontainer, der die Seite mit einer Outline (-> border: 1px; color:... etc.) umschließt. Die Höhe habe ich mit 100% angegeben. Das funktioniert im IE prima, doch im FF und Netscape hängt die Linie irgendwo quer in der Landschaft. Ich kann für die Linie aber keine absolute Angabe machen, da auf den Seiten (erstellt mit Typo3) News-Module platziert sind, die eine unbestimmte Länge haben. Mit einem TD gibt's diese Probleme nicht (so war es vorher), dieser wird mit dem Inhalt gestreckt. Dies ist aktuell das größte Problem, da das ganze Konzept nur funktioniert, wenn ich diese Aufgabe löse. Die Seite findet Ihr unter folgendem Link: http://www.cupz.de Für jede Antwort bin ich dankbar. Bitte verzeiht mir Anfängerfehler, es ist wie gesagt der erste versuch ohnen Tabellen. Viele Grüße und Danke, Basti
__________________
Niemand hat das Recht, zu gehorchen |
Sponsored Links |
|
|||
Re: Prozentangaben & FireFox/Netscape
Zitat:
Zitat:
also informiere dich bitte mal über das stichwort "box model", welche abweichungen der IE hierbei gewöhnlich zeigt, und auch über das stichwort "quirks mode" bzw. "doctype switching". |
Sponsored Links |
|
|||
Wie gesagt: falsch "vorkommt", "erster Versuch", etc. pp. Du brauchst mich deshalb nicht gleich anmachen. Ich habe nichts getan, außer Fragen zu stellen.
Ich werde die entsprechenden Begriffe mal nachschlagen/recherchieren. Danke für die Hinweise. MfG, Onliner
__________________
Niemand hat das Recht, zu gehorchen |
|
|||
Hi Frankie,
wenn ich die Höhenangabe herausnehme, hat der DIV eine (geschätzte) Höhe von 250pix, dafür aber im FF und NS gleich.
__________________
Niemand hat das Recht, zu gehorchen |
|
|||
Zitat:
Zitat:
(so, und jetzt fehlt mir nur noch'n weiterer kommentar vom legman ...) |
|
|||
Re: Prozentangaben & Padding in FireFox/Netscape
Zitat:
__________________
computer artwork by subhash NEU: Photoshop Workshops \"Bildmontage\" - Teil 1 gratis! |
|
|||
@Subhash: NP, jeder hat seine Überzeugung.
@all: Also, Ich habe mir jetzt das Box-Modell durchgelesen und dabei festgestellt, dass der Bug mit der Darstellung im IE 6.0 behoben ist, solange man das Dokument ordentlich als Doctype kennzeichnet. Ich blicke jetzt auch, dass ich bei der Gesamtberechnung meiner Zeilen alles berechnen muss. Größe der Box + Padding + Margin + Border für jeden einzelnen Div. Meine Frage dazu: Die Gesamtbreite der einzelnen Zeilen habe ich jetzt so angepasst, dass ich immer den Gesamtwert 913 erhalte. Diese hängen nun in einem Div, der wirklich nur als Container dient und in dem ich die Breite der Zeile angebe. Ist die breite dann identisch mit meiner Gesamtrechnung der enthaltenen Container oder muss ich noch einmal jeweils einen Pixel für den DIV selbst addieren, obwohl dieser keine Border, Innen- oder Außenabstände auweist? <div> = width 913 oder 915? <div>width 600 + Margin right 2 + Margin left 2 + padding-left 3 + border 1 = 608</div> <div>width 300 + Margin right 0 + Margin left 2 + padding-left 2 + border 1 = 305</div> (--> = 913) </div> <div> <div>width 600 + Margin right 2 + Margin left 2 + padding-left 0 + border 0 = 604</div> <div>width 300 + Margin right 0 + Margin left 2 + padding-left 5 + padding-right 1 + border 1 = 309</div> (--> = 913) </div> <div> <div>width 140 + Margin right 2 + Margin left 2 + padding-left 2 + border 1 = 147</div> <div>width 650 + Margin right 0 + Margin left 2 + padding-left 5 + padding-right 5 + border 1 = 663</div> <div>width 100 + Margin right 0 + Margin left 2 + padding-left 0 + border 1 = 103</div> (--> = 913) </div> Greets, Onliner Sehr schmerzhaft klangen mir in diesem Sinne auch die Worte meiner Mathe-Lehrerin durch den Kopf: "Mathematik werden Sie irgendwann in Ihrem späteren Leben noch benötigen, denken Sie an mich". Nun, ich glaube jetzt es ist soweit...
__________________
Niemand hat das Recht, zu gehorchen |
|
|||
Zitat:
margin = 2 (links 2 / rechts 0) padding = 2 (links 2 / rechts 0) border = 2 (links 1 / rechts 1) => Summe 306
__________________
</ulle> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
Navigation positionieren | maybebabe | CSS | 4 | 08.04.2013 23:17 |
Dynamische Größen | Killhunter | CSS | 0 | 14.05.2011 17:56 |
Problem mit CSS Style | flo007 | CSS | 3 | 25.01.2009 18:08 |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |