Page 1 of 1

[CSS box model] Chrome zickt

Posted: Tue 20. Nov 2012, 15:22
by no remorse
Hallo

Folgendes Problem ist kein phpwcms Problem, jedoch hoffe ich, dass mir trotzdem einer helfen bzw. einen Tipp geben kann :wink:

Ich bin gerade dabei, eine Vorlage zu erstellen, welche 12 Boxen beinhaltet.

CSS:

Code: Select all

.minibox {
	
   float:left;
	position:relative;
	width:148px;
	height:139px;
	margin:5px; /* margin:5px 13px 5px 5px; */
	background:#111 url(/static/img/progress.gif) no-repeat center center;
	border:1px solid #B5FF00;
	/*box-shadow:0 1px 2px rgba(181, 255, 0, 1);*/
}

.container {
    margin: 0px auto 0;
    width: 960px;
    color: #fff;
    background-color:#000;
    min-height:304px;
}
Die 12 Boxen werden mir im iExplorer und Firefox nebeneinander angezeigt jedoch nicht im Chrome.

Hier zwei Bilder:
Image
Image

Im obigen Code habe ich die Platzhaler weg gelassen und nur der Quellcode eingefügt. Das Problem liegt wohl bei

Code: Select all

margin:5px; /* margin:5px 13px 5px 5px; */
oder muss ich da eine 6-spaltige Tabelle einfügen, damit alles ordentlich aussieht?

Verzeiht mir meine Bescheidenheit.

lg

Re: [CSS box model] Chrome zickt

Posted: Tue 20. Nov 2012, 17:38
by nameless1
gibts was live fürn firebug?

Re: [CSS box model] Chrome zickt

Posted: Tue 20. Nov 2012, 18:43
by Oliver Georgi
1) was soll die min-height? wegen der floats? Bitte mal mit clearfix beschäftigen: http://nicolasgallagher.com/micro-clearfix-hack/
2) .container mit position:relative versorgen und mal fixe Breite rausnehmen und prüfen was dann bei Browserweitenänderung passiert
3) den boxen ein vertical-align: top mitgeben

Re: [CSS box model] Chrome zickt

Posted: Wed 21. Nov 2012, 11:02
by no remorse
Hallo

Ich hab mal versucht, die Vorschläge umzusetzen. Es schaut nun schon besser aus:

http://www.feuerwehr-vaduz.li/index.php ... 52,0,0,1,0

Gibts da eventuell noch einen Trick, wie man die Boxen (140x140) gleichmäßig auf der Fläche (960) verteilt oder hilft da nur einen Taschenrechner --> exaktes ausrechnen der Abstände?

mfg

Re: [CSS box model] Chrome zickt

Posted: Wed 21. Nov 2012, 11:17
by Oliver Georgi
die leeren Clear Divs unbedingt vermeiden. Das ist nicht mehr nötig und nicht zu empfehlen, vollkommen überflüssig und unschön. Einfach meinem Hinweis folgen.

Für den Rest muss man sich mit Responsive CSS beschäftigen. Solange Du mit Pixel-festen Breiten arbeitest kommst Du um das Ausrechnen nicht herum.