✔ Browserweiche IE und FF

Status
Nicht offen für weitere Antworten.
S

shorty

Erfahrenes Mitglied
Hallo,

habe mich zum Test mal an CSS gewagt und bin nun auf folgendes Problem gestoßen:
Durch einen Freund habe ich gemerkt, dass der FF und der IE verschiedene Größenattribute ansprechen.

Im FF spricht man die Weite bzw. Höhe mit "min/max-width" und "min/max-height" an, im IE dagegen mit "width" und "height".

Meine Frage nun: Wie konfiguriere ich meine CSS-Datei, damit die beiden Browser eine exakte Weite und Höhe von 100% haben?

Der Link zu meiner Seite befindet sich hier: http://www.mathe-online-modul.de/v3/.

Dies ist die dazugehörige CSS-Datei:

Code: 
#mainbox {
 float: none;
 position: static;
 
<!--[if gt IE 5]> 
 width: 100%;
 height: 100%;
<![endif]-->
 
 border: 1px;
 border-color: #000;
 border-style: solid; 
}

*[id=mainbox] {
 float: none;
 position: static;

 max-width: 100%;
 max-height: 100%;
 
 border: 1px;
 border-color: #000;
 border-style: solid; 
}

Habe schon ein bißchen was über Browserweichen gelesen, steige da aber noch nicht durch. Des Weiteren fällt mir auf, dass der Rahmen breiter gemacht wird, als er in der CSS-Datei angegeben ist. Habt ihr dazu eventuell auch eine Lösung?

Danke schonmal im Vorraus.
 
Hi ..

Versuchs mal so:

Code: 
<head>
		<style>
			/* IE CSS */
			@import url(./css/ie.css);
			/* FireFox CSS */
			@import url(./css/ff.css) screen;
		</style>
</head>

Gruß
Aaron
 
shorty hat gesagt.:
Des Weiteren fällt mir auf, dass der Rahmen breiter gemacht wird, als er in der CSS-Datei angegeben ist. Habt ihr dazu eventuell auch eine Lösung?
Zum Vergrößern anklicken....
Probier's mal so:

Code: 
border-width: 1px;
border-color: #000;
border-style: solid; 

/* oder */

border: 1px solid #000;

Der Conditional Comment (= CSS-Browserweiche für IE) wird nicht in der CSS-Datei, sondern im HTML-Quelltext notiert.

HTML: 
<link rel="stylesheet" type="text/css" href="./global.css">
<link rel="stylesheet" type="text/css" href="./box.css">
<!--[if gt IE 5]> 
<style type="text/css">
#mainbox
{
width: 100%;
height: 100%;
}
</style>
<![endif]-->
 
Hi,

wobei lediglich der Vollständigkeit halber angemerkt sei, daß das natürlich nicht nur mit inline style so funktioniert.

Tip: Bastel zwei Stylesheets. Zuerst das für alle Browser, die die w3c Standards korrekt umsetzen. Naja, gut, genauer gesagt überhaupt für alle Browser, ohne den IE zu berücksichtigen. Danach mach ein zweites Stylesheet, das u.U. die gleichen Elemente formatiert, aber diesmal in der Art, wie es der IE gerne hätte. Dieses Stylesheet bindest Du in der html-Datei nach dem normalen Stylesheet ein. Diese Einbindung solltest Du dann mit diesen "conditional comments" einklammern, so daß sie nur im IE wirksam werden.

In dem zweiten Stylesheet mußt Du auch nur die Elemente neu formatieren, die im IE fehlerhaft angezeigt werden. Die anderen mußt Du nicht noch mal formatieren.
 
Ich bedanke mich vorweg für die schnellen Antworten. Bin leider noch nicht dazu gekommen, mich mit euren Antworten auseinander zu setzen. Werde mich aber jetzt mal ran setzen und einwenig rumspielen ;).

@Inspector:

Habe es jetzt mal versucht so umzusetzen, wie du beschrieben hast.

Jetzt stellt sich ein weiteres Problem dar:
Im IE wird die Ausgabe korrekt dargestellt.
Im FF wird die min-height: 100% komplett ignoriert und die min-width: 100% ist keine 100% weit, da mir jetzt ein Querscrollbalken angezeigt wird.
 
Hi,

soweit ich weiß (kann mich da allerdings irren) unterstützt der IE kein min-width, max-width, min-height oder max-height.

Bei width und height in prozentualen Größen gibt es zwischen IE und FF (w3c) einen schwerwiegenden Unterschied: Der IE bezieht diese Angabe immer auf die Fensterbreite, während der FF das auf die Breite des übergeordneten Containers bezieht.

Aber warum der FF hier einen Scrollbalken anzeigt, weiß ich auch nicht. Hast Du eine url zum nachschauen?
 
Gemäß dem Boxmodell wird der Rahmen zu der Weiten- / Höhenangabe eines Elements addiert, was die tatsächliche Element-Breite / -Höhe ergibt. Die Folge: in deinem Fall kann das DIV#mainbox horizontal und vertikal gescrollt werden, nämlich um die Gesamt-Rahmenstärke von 2px.

Um dies zu umgehen, liesse sich ein weiteres DIV#contentbox mit Rahmen und 'angepasster' Höhe in das bestehende DIV einbetten.

CSS-Code für global.css:

Code: 
html, body
{
height: 100%;
width: 100%;
}

BODY {
 background-color: #FFF;
}

HTML, BODY, DIV, P, HR, H1, H2, H3, UL, OL, SPAN, A, TABLE, TD, FORM, IMG, LI {
 margin: 0px;
 padding: 0px;

 font-family: Georgia, Times, 'Times New Roman', serif;
 color: #767254;
}
CSS-Code für box.css:

Code: 
#mainbox {
float: none;
position: static;
height: 100%;
}

#contentbox {
height: 99.5%;
border: 1px #000000 solid;
}

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mathe-Online-Modul - Testversion 3</title>

<link rel="stylesheet" type="text/css" href="./global.css">
<link rel="stylesheet" type="text/css" href="./box.css">

</head>
<body>

<div id="mainbox">
 <div id="contentbox">
 <p>test<br>
 fsdkfjlksdjfölksdjflksdföjsdjlsdflk<br>
 aksdjklsajdölkjasdljslaödjklajdlkjasdöljslka<br>
 dhsladfhlksdhfksdhkfjhsdlkfhkshfhslk
 </p>
 </div>
</div>

</body>
</html>

  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
@michaelsinterface:
Das klingt logisch, aber warum ist es dennoch so umständlich :) ?
Gibt es keine einfachere weitere Möglichkeit, die denselben Effekt hat?

Denn, wenn ich 100% Höhe verwende, muss das der Browser doch verstehen :)?

Nagut, werde aber trotzdem mal dein Beispiel verwenden. Vielen Dank.

Edit: Wenn man aber einen zweiten Kontainer baut mit der Weite 99,5%, dann ist ja nicht genau am Rand und somit wäre bei einem Design, welches am Fensterende münden soll, immernoch ein weißer Streifen zu sehen...
 
Zuletzt bearbeitet:
Stimmt, es geht auch einfacher; habe vorhin um sieben Ecken gedacht ... ;)

Code: 
html, body
{
height: 100%;
margin: 0;
padding: 0;
}

#mainbox {
float: none;
position: static;
height: 99.5%;
border: 1px solid #000;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück