Joomla, CSS Anpassung für IE

wurstbrot32 · #1 (**permalink**) 07.11.2013, 10:59

Hi,

ich verwende ein Template, das rudimentär im IE 8 laufen soll. Dort gibt es ein einfaches Suchformular mit DropDown listen (2 Div's nebeneinander). Im IE werden diese beiden Boxen jedoch untereinander angezeigt. Egal was ich in der relevanten theme.css ändere, passiert nichts im IE 8, lediglich in allen anderen Browsern. Ich hab die relevanten Codestellen mal aufgeführt (dank Firebug):

HTML-Code:

.uk-grid:before,
.uk-grid:after {
  white-space: pre-wrap;
  content: " ";
  display: block;
}
.uk-grid:after {
  clear: both;
}
.uk-grid {
  margin: 0 0 0 -20px;
  padding: 0;
  list-style: none;
}
.uk-grid + .uk-grid {
  margin-top: 20px;
}
.uk-grid > [class*='uk-width-'] {
  margin: 0;
  padding-left: 20px;
  float: left;
  display:inline;
}
.uk-grid > [class*='uk-width-'] > :last-child {
  margin-bottom: 0;
}
.uk-grid > .uk-grid-margin {
  margin-top: 20px;
}
.uk-grid-divider:not(:empty) {
  margin-left: -20px;
  margin-right: -20px;
}
.uk-grid-divider:not(:empty) > [class*='uk-width-'] {
  padding-left:  20px;
  padding-right: 20px;
}
.uk-grid-divider:not(:empty) > [class*='uk-width-1-']:not(.uk-width-1-1):nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-2-']:nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-3-']:nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-4-']:nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-5-']:nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-6-']:nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-7-']:nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-8-']:nth-child(n+2),
.uk-grid-divider:not(:empty) > [class*='uk-width-9-']:nth-child(n+2) {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .uk-grid-divider:not(:empty) > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }
}
@media (min-width: 840px) {
  .uk-grid-divider:not(:empty) > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }
}

.uk-grid-divider:empty {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.uk-grid > [class*='uk-width-'] > .uk-panel + .uk-panel {
  margin-top: 20px;
}
@media (min-width: 1220px) {
  .uk-grid:not(.uk-grid-preserve) {
    margin-left: -30px;
  }
  .uk-grid:not(.uk-grid-preserve) > [class*='uk-width-'] {
    padding-left: 30px;
  }
  .uk-grid:not(.uk-grid-preserve) + .uk-grid {
    margin-top: 30px;
  }
  .uk-grid:not(.uk-grid-preserve) > .uk-grid-margin {
    margin-top: 30px;
  }
  .uk-grid:not(.uk-grid-preserve) > [class*='uk-width-'] > .uk-panel + .uk-panel {
    margin-top: 30px;
  }
  .uk-grid-divider:not(.uk-grid-preserve):not(:empty) {
    margin-left: -30px;
    margin-right: -30px;
  }
  .uk-grid-divider:not(.uk-grid-preserve):not(:empty) > [class*='uk-width-'] {
    padding-left: 30px;
    padding-right: 30px;
  }
  .uk-grid-divider:not(.uk-grid-preserve):empty {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
[class*='uk-width-'] {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
.uk-width-1-1 {
  width: 100%;
}
.uk-width-1-2,
.uk-width-2-4,
.uk-width-3-6,
.uk-width-5-10 {
  width: 50%;
}
.uk-width-1-3,
.uk-width-2-6 {
  width: 33.333%;
}
.uk-width-2-3,
.uk-width-4-6 {
  width: 66.666%;
}
.uk-width-1-4 {
  width: 25%;
}
.uk-width-3-4 {
  width: 75%;
}
.uk-width-1-5,
.uk-width-2-10 {
  width: 20%;
}
.uk-width-2-5,
.uk-width-4-10 {
  width: 40%;
}
.uk-width-3-5,
.uk-width-6-10 {
  width: 60%;
}
.uk-width-4-5,
.uk-width-8-10 {
  width: 80%;
}
.uk-width-1-6 {
  width: 16.666%;
}
.uk-width-5-6 {
  width: 83.333%;
}
.uk-width-1-10 {
  width: 10%;
}
.uk-width-3-10 {
  width: 30%;
}
.uk-width-7-10 {
  width: 70%;
}
.uk-width-9-10 {
  width: 90%;
}
@media (min-width: 768px) {
  .uk-width-medium-1-1 {
    width: 100%;
  }
  .uk-width-medium-1-2,
  .uk-width-medium-2-4,
  .uk-width-medium-3-6,
  .uk-width-medium-5-10 {
    width: 50%;
  }
  .uk-width-medium-1-3,
  .uk-width-medium-2-6 {
    width: 33.333%;
  }
  .uk-width-medium-2-3,
  .uk-width-medium-4-6 {
    width: 66.666%;
  }
  .uk-width-medium-1-4 {
    width: 25%;
  }
  .uk-width-medium-3-4 {
    width: 75%;
  }
  .uk-width-medium-1-5,
  .uk-width-medium-2-10 {
    width: 20%;
  }
  .uk-width-medium-2-5,
  .uk-width-medium-4-10 {
    width: 40%;
  }
  .uk-width-medium-3-5,
  .uk-width-medium-6-10 {
    width: 60%;
  }
  .uk-width-medium-4-5,
  .uk-width-medium-8-10 {
    width: 80%;
  }
  .uk-width-medium-1-6 {
    width: 16.666%;
  }
  .uk-width-medium-5-6 {
    width: 83.333%;
  }
  .uk-width-medium-1-10 {
    width: 10%;
  }
  .uk-width-medium-3-10 {
    width: 30%;
  }
  .uk-width-medium-7-10 {
    width: 70%;
  }
  .uk-width-medium-9-10 {
    width: 90%;
  }
}

der float:left Befehl, die @media usw scheinen nicht übernommen zu werden. Geht mir wirklich nur darum, das die beiden Div's (heißen beide uk-width-medium-1-2) nebeneinander stehen.
Ergänzend: um die beiden uk-width-medium-1-2 befindet sich ein dvi mit dem Namen uk-grid und in den beiden Div (die nebeneinander sollen) gibt es mehrere div's, die die Class uk-form-row nutzen
Vielen Dank für Tipps und Anregungen.

mfg wurstbrot32

Thielo · #2 (**permalink**) 07.11.2013, 11:08

Dir ist bewusst, dass der IE8 keine Media Queries kennt?

Can I use... Support tables for HTML5, CSS3, etc

wurstbrot32 · #3 (**permalink**) 07.11.2013, 11:10

Hi,

ja. So steht es im Template leider! Kann ich den CSS Code anpassen entsprechend? Hab schon gesehen es gibt JS Bibliotheken, die man z.B. einbinden kann o.ä. Ich habe momentan nur die Möglichkeit, genau diese CSS Datei zu ändern

mfg wurstbrot32

P.S. Danke für den Link, ich schau mir das gerade an. Wenn Du Codeverbesserungen/-vorschläge hast, kannst du mir die natürlich gerne mitteilen

wurstbrot32 · #4 (**permalink**) 07.11.2013, 11:36

Anscheinend liegt es an folgenden CSS Zeilen (weiter eingegrenzt):

HTML-Code:

@media (min-width: 768px) {
  .uk-grid-divider:not(:empty) > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }
}
@media (min-width: 840px) {
  .uk-grid-divider:not(:empty) > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }
}

diese müsste ich nur IE 8 kompatible bekommen. Bin noch an dem Link dran, aber so 100% bin ich noch nicht durchgestiegen.

mfg wurstbrot32

netinja · #5 (**permalink**) 07.11.2013, 12:13

Hallo,
Kannst du mal einen Link dazu posten?
Ohne das, wird es ein bisschen schwierig, das Problem nach zu vollziehen.

wurstbrot32 · #6 (**permalink**) 07.11.2013, 13:06

Hi,

link kann ich nicht posten und ist ein geschützer Bereich, aber die relevanten Ansichten + Codeausschnitte:

Ansicht im IE 8 (ich hab die div Boxen nochmal umrandet)

Ansicht im Firefox (firebug):

Danke.

mfg wurstbrot32

netinja · #7 (**permalink**) 07.11.2013, 13:25

Zitat:

Zitat von wurstbrot32

Hi,

link kann ich nicht posten und ist ein geschützer Bereich, aber die relevanten Ansichten + Codeausschnitte:

Hierbei müsste man sich ja das relevante markup aus deinem Screenshot abschreiben und dann zu einer lauffähigen Datei zusammensetzen und ergänzen.
Erstelle du das doch bitte.

wurstbrot32 · #8 (**permalink**) 07.11.2013, 13:37

Hi,

meinst du das hier?

HTML-Code:

            <fieldset>
                <legend>Fahrzeugsuche</legend>
                <div class="uk-grid">
                                        <div class="uk-width-medium-1-2">
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="filter_marke">Hersteller</label>
                            <div class="uk-form-controls">
                                <select id="filter_marke" class="uk-form-width-medium" name="filter_marke">
                                    <option value="">alle</option>
                                    <option value="abarth">Abarth</option><option value="alfa_romeo">Alfa Romeo</option><option value="bmw" selected>BMW</option><option value="citroen">Citroen</option><option value="dacia">Dacia</option><option value="fiat">Fiat</option><option value="ford">Ford</option><option value="honda">Honda</option><option value="hyundai">Hyundai</option><option value="isuzu">Isuzu</option><option value="iveco">Iveco</option><option value="jeep">Jeep</option><option value="kia">Kia</option><option value="lancia">Lancia</option><option value="mazda">Mazda</option><option value="mercedes_benz">Mercedes Benz</option><option value="nissan">Nissan</option><option value="peugeot">Peugeot</option><option value="renault">Renault</option><option value="seat">Seat</option><option value="toyota">Toyota</option><option value="trapo">Fiat Professional</option><option value="vw">VW</option>                                </select>
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="filter_modell">Modell</label>
                            <div class="uk-form-controls">
                                <select id="filter_modell" class="uk-form-width-medium" name="filter_modell">
                                    <option value="">alle</option>
                                    <option value="116">116</option>                                </select>
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="filter_kraftstoff">Kraftstoff</label>
                            <div class="uk-form-controls">
                                <select id="filter_kraftstoff" class="uk-form-width-medium" name="filter_kraftstoff">
                                    <option value="">alle</option>
                                    <option value="Benzin">Benzin</option>                                </select>
                            </div>
                        </div>
                    </div>
                                                            <div class="uk-width-medium-1-2">
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="filter_km_von">KM-Stand</label>
                            <div class="uk-form-controls uk-form-controls-text">
                                <select id="filter_km_von" class="uk-form-width-mini" name="filter_km_von">
                                    <option value="">von</option>
                                                                     </select>
                                <select id="filter_km_bis" class="uk-form-width-mini" name="filter_km_bis">
                                    <option value="">bis</option>
                                                                     </select>
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="filter_webpreis_von">Preis</label>
                            <div class="uk-form-controls uk-form-controls-text">
                                <select id="filter_webpreis_von" class="uk-form-width-mini" name="filter_webpreis_von">
                                    <option value="">von</option>

                                                                    </select>
                                <select id="filter_webpreis_bis" class="uk-form-width-mini" name="filter_webpreis_bis">
                                    <option value="">bis</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="uk-form-row">
                            <label class="uk-form-label" for="filter_ez_von">Erstzulassung</label>
                            <div class="uk-form-controls uk-form-controls-text">
                                <select id="filter_ez_von" class="uk-form-width-mini" name="filter_ez_von">
                                    <option value="">von</option>
                                                                    </select>
                                <select id="filter_ez_bis" class="uk-form-width-mini" name="filter_ez_bis">
                                    <option value="">bis</option>
                                                                    </select>
                            </div>
                        </div>
                    </div>
                                    </div>
                <div class="uk-form-row uk-margin-top">
                    <input class="uk-button" type="submit" value="Suchen">
                    <input id="Leeren" class="uk-button" type="reset" value="Leeren">
                </div>
            </fieldset>

mfg wurstbrot32

wurstbrot32 · #9 (**permalink**) 07.11.2013, 15:03

Geschafft! Folgende JS Datei hat mir geholfen (falls jemand dasselbe Problem hat):

https://github.com/scottjehl/Respond

einfach im Header einbinden. Jetzt sieht es fast perfekt aus!

Danke für die Hilfe ansonsten!

EDIT: wie kann ich diesen Beitrag als erledigt markieren?

mfg wurstbrot32

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Inspiration - Sammlung von Links	emti	Ressourcen	8	01.12.2009 18:02
Joomla CSS Problem bei Navi	Sonja_l	CSS	0	11.02.2009 17:19
joomla, der ie und css	darius	Barrierefreiheit	8	19.06.2007 13:22
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39