• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

zwei kleine fragen wegen divs und IE

F

franz86

Neues Mitglied
hallo,
ich will oben ein header erstellen, welcher ein div sein soll, wie kann ich die größe am besten regulieren?

versucht habe ich folgendes:
#header {
border: 2px solid #000;
background-image: url(banner.png);
width: 820px;
height: 86px;
color: #FFF;
margin-bottom: 15px;
}

klappt auch ganz gut, nur der IE zeigt etwa 3-4 pixel weniger height an, als der FF, wahrscheinlich berechnet der FF den border einfach mit.

dann wollte ich ganz unten ein menü erstellen, also im grunde genommen nur textlinks, jedoch schaff ich es einfach nicht im div den text nach unten auszurichten.

und noch eine frage, hab ich jetzt ein text im div und setzte padding-left ein, vergrößert sich auch die width um die größes des padding-left beim FF.
 
Zuletzt bearbeitet:
ich hab jetzt verstanden, dass unsinniger weise das css-box-modell im firefox, bzw sogar offiziell das padding sowie der border zum width/height hinzufügt, warum auch immer...???
wie krieg ich das jetzt einheitlich hin, zwischen IE und FF, hab schon eine menge gegoogelt, jedoch fand ich noch keine zufriedenstellende und funktionierende css-valide lösung.

warum macht man es den webmastern so schwer, mit solchen schikanen?

notfalls würde ich halt wieder das gewohnte tabellen-layout nehmen, das macht wenigstens das was man ihm sagt.
 
Jeder Browser hat unterschiedliche Default-Werte für jedes Element vordefiniert, zum Beispiel für margin und padding.

Um dies bei DIVs zu reaktivieren, kannst du diesen CSS-Code benutzen:
Code: 
div{
    margin: 0;
    padding: 0;
}
Um alle Elemente zurückzusetzen, kannst du den Selektor "div" mit "*" ersetzen.

Die Maße eines Elements setzt sich zusammen aus width (bzw. height), padding und border. Siehe Boxmodell.

LG
 
@vitus

* {
margin: 0;
padding: 0;
}
Zum Vergrößern anklicken....

sollte sowieso standardmäßig in jedem css als erstes drin stehen.

Würde padding ein element nicht vergrößern, so hätte es fast den selben Effekt wie ein margin.
Zum Vergrößern anklicken....
nein, da margin immer außerhalb des rahmens stattfinden müsste.

für mich ist es nach wie vor nicht nachvollziehbar.

die problematik mit tabellen ist mir bekannt, aber css ist im grunde genommen auch viel gepfusche, wenn man sich so manchen quellcode anschaut und was für umwege gemacht werden müssen um ans ziel zu kommen.


welche möglichkeit bleibt mir jetzt, die width auch als einheitliche width bei ff und ie umzusetzen? dabei sollte padding und border beachtet werden, die beim ff den width einfach vergrößern.
 
FF handelt nach wie vor richtig. Ohne den gesamten betroffenen Quellcode (am besten Link zu Seite, da wir dann unserer Werkzeuge zum Einsatz bringen können) lässt sich nicht mehr viel aussagen.

P.S. Vielleicht kommst du mit Tabellen vorerst schneller an's Ziel, doch was, wenn das Design überarbeitet werden muss? Shoot.
 
Vermutlich fehlt der Seite ein standardkonformer Doctype.
Mit einem solchen stellt auch der IE das CSS-Boxmodell korrekt dar (von wenigen Bugs, die hier nicht zutreffen einmal abgesehen).
 
ff handelt sicherlich nur w3c-konform.
aber ob das aktuelle handling mit width und height logisch ist bzw. sinn macht, steht auf einem anderen blatt.
vermutlich nicht, sonst hätte man nicht bei css3 einen neuen code eingeführt, der die sache richtig behandeln soll "box-sizing"
damit dürften dann alle aktuellen probleme und umwege zur vergangenheit gehören.

@prm

nein es läuft alles wie es soll, nachdem ich gelesen habe, wie IE und FF das box-model handled

das problem ist aber, dass ich eine einheitliche lösung für beide browser brauch, da gibts zwar spezielle ie-hacks/fixes, aber dann ist der code natürlich nicht mehr css-valide.


ich bin mal so modern gewesen und hab es jetzt einfach mit folgendem realisiert:
Code: 
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
IE zeigt es ja ohnehin schon korrekt an und nutzer von anderen browsern, haben sicherlich mindestens eine programmversion, die jünger als 1-2 jahre alt ist, also dürfte es keine probleme geben.


bitte gibt mir jetzt nur noch ein vorschlag wie ich den text unten zentrieren kann in einer box, alternativ würde ich einfach eine zweite box drunter setzen
 
Zuletzt bearbeitet:
franz86 schrieb:
das problem ist aber, dass ich eine einheitliche lösung für beide browser brauch, da gibts zwar spezielle ie-hacks/fixes, aber dann ist der code natürlich nicht mehr css-valide.
Zum Vergrößern anklicken....

Wenn du einen Stadardkonformen Doctype verwendest stellen es beide Browser gleich dar.
Der IE zeigt es nicht korrekt sondern falsch an.

The Internet Explorer box model bug is a software bug in the implementation of Cascading Style Sheets in earlier versions of Microsoft Internet Explorer. Internet Explorer 6 and newer are not affected in their standards-compliant mode, but for compatibility reasons, the bug is still present when a page is rendered in "quirks mode"
Zum Vergrößern anklicken....
Gruss
Elroy
 
zunächst einmal frohe weihnachten euch allen

@elroy,
ich habe doch geschrieben, dass der FF das boxmodel W3C-konform behandelt im gegensatz zum IE, dennoch macht es der IE vom sinn her logischer, auch wenn er dabei die W3C-konformität verletzt.

->

Wikipedia.org schrieb:
Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach. Peter-Paul Koch gives the example of a physical box, whose dimensions always refer to the box itself, including potential padding, but never its content. He says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content. Bernie Zimmermann says that the Internet Explorer box model is closer to the definition of cell dimensions and padding used in the HTML table model.

The W3C has included a "box-sizing" property in CSS3. When box-sizing: border-box; is specified for an element, any padding or border of the element is drawn inside the specified width and height, "as commonly implemented by legacy HTML user agents". Internet Explorer 8, Opera 7.0 and later, and Konqueror 3.3.2 and later support the CSS3 box-sizing property. Gecko-based browsers such as Mozilla Firefox support the same functionality using a proprietary "-moz-box-sizing" property, and WebKit browsers such as Apple Safari and Google Chrome support it as a proprietary "-webkit-box-sizing" property.
Zum Vergrößern anklicken....

letzteres habe ich angewandt, was mir tausend mal besser erschien als irgendwelche ie-hacks.
 
Hallo.

Und ich habe dir geschreiben das du weder irgendwelche IE-hacks noch CSS-hacks brauchst da der IE das Boxmodel genau so W3C-konform darstellt wie der FF.

Wenn das bei dir nicht der Fall ist dann ist dein Code falsch und mit deinen CSS-hacks hast du zwar die Auswirkungen aber nicht die Ursache bekämpft.

Gruss
Elroy
 
@vitus

das validieren ist ohnehin klar.

probiert habe ich es mit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

und IE8

leider ohne erfolg, jedoch sollte es so bei dem IE6 klappen
 
Da wir dir deinen Quelltext nicht entlocken konnten, möchte ich mit einem nach deiner Beschreibung erzeugten HTML-Dokument beweisen, dass die elemente in FF und in IE gleich groß sind.
Verwendeter Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0 none;
            }
            #header{
                border: 2px solid #333333;
                background: #999999;
                width: 820px;
                height: 86px;
                color: #ffffff;
                margin: 10px auto 0;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>&Uuml;berschrift - Header</h1>
        </div>
    </body>
</html>
Die Browserfenster von IE und FF wurden verkleinert und nebeneinander gesetzt, sodass das Header-Element auf einer Höhe liegt (links: FF; rechts: IE). Screenshot zeigt eine gleiche Größe:
ieffvergleich.png


War das, worauf du hinaus wolltest?
 
vermutlich reden wir aneinander vorbei, da ich es nicht mit dem internet explorer 9 probieren konnte.

ich weiß jedoch, dass bei xhtml 1.1 - strict es z.b. mit dem IE8 fehlerfrei klappt, aber nicht mit 6 und/oder 7.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben