css interpretation IE, FF, Opera unterschiedlich ?
tacitus7
- browser
Hallo,
bin neu hier im Forum, aber kenne SELFHTML schon viele Jahre.
Haber den ganzen Vormittag heute versucht herauszufinden, wieso Opera 10, IE 8 und FF 3.5 (alle unter Windows Vista) folgende css-formatierte Seite (bei mir) unterschiedlich darstellen - aber ohne Erfolg.
Die Seite (stark vereinfacht gegenüber der Seite, die ich tatsächlich darstellen will), zeigt aber auch in dieser Form den Fehler, dass FF 3.5
die Rechtecke (png-Bilder mit 330px × 116px bzw. 117px x 85px Größe) verkleinert darstellt, während IE und Opera das nicht tun.
(Der über die rechte Maustaste in allen drei Browser verfügbare Eintrag "Eigenschaften" sagt mir aber in allen drei Fällen, dass die Bilder die korrekten Pixelgrößen haben. (Aber vielleicht bezieht sich das nicht auf die Größe der Darstellung, sondern auf die png-Datei).
logotest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome to the Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import "basic1.css";</style>
</head>
<body>
<div class='logou'>
<img src='img/bluerect.png' alt='' />
</div>
<div class='logom'>
<img src='img/orangerect.png' alt='' />
</div>
</body>
</html>
Der css-Code ist hier:
basic1.css
body, div, td, th, h2, h3, h4 {
font-family: arial,verdana,sans-serif;
font-size: 16px;
}
body {
background: #ECECEC;
padding: 10px;
margin: 0;
}
img {
border:none;
}
div.logou {
border: none;
position: relative;
float:left;
}
div.logom {
border: none;
position: relative;
float:right;
}
FireBug 1.4.2
behauptet aber (Layout), dass <body> eine Breite von 1093x0 (+10px margin) habe, wobei die 10px margin ja so im css stehen, aber dem <body> gar keine Breite zugewiesen wurde.
Die tatsächliche Größe des Browserfensters (ohne Scrollbalken und Bedienungselemente) ist aber - in allen drei Browsern - 1012x712 (gemessen) und sollte auch so sein, weil ich das Fenster mittels
function localstart()
{
var winTest = window.open('logotest.php','TEST','toolbar=1,resizable=1,location=0,directories=0,status=0,menubar=0,scrollbars=1,left=0,top=0,width=1012,height=712');
}
geöffnet habe.
Hat jemand eine Idee, was FF zu dieser eigenmächtigen Skalierung veranlassen könnte? Eine Einstellung, die ich vielleicht im Browser versehentlich falsch gewählt habe? Oder wie erklären sich die Unterschiede sonst?
(Selbstverständlich habe ich den Browser-Cache geleert, ohne dass der Fehler dadurch beeinflusst wurde.)
Gruß
tacitus7
Moin
Die Seite (stark vereinfacht gegenüber der Seite, die ich tatsächlich darstellen will), zeigt aber auch in dieser Form den Fehler, dass FF 3.5
die Rechtecke (png-Bilder mit 330px × 116px bzw. 117px x 85px Größe) verkleinert darstellt, während IE und Opera das nicht tun.
Da drück mal STRG und 0. Dann wird deine Seite wahrscheinlich auch im FF richtig dargestellt. Alternativ unter "Ansicht"->"Zoom"->"Normal" zu finden.
<div class='logou'>
<img src='img/bluerect.png' alt='' />
</div><div class='logom'>
<img src='img/orangerect.png' alt='' />
</div>
Warum in 3 Teufelsnamen bastelst du hier DIV-Container drum? Du kannst die Bilder auch direkt verwenden und ansprechen, sowie per CSS verändern.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
Moin
Die Seite (stark vereinfacht gegenüber der Seite, die ich tatsächlich darstellen will), zeigt aber auch in dieser Form den Fehler, dass FF 3.5
die Rechtecke (png-Bilder mit 330px × 116px bzw. 117px x 85px Größe) verkleinert darstellt, während IE und Opera das nicht tun.Da drück mal STRG und 0. Dann wird deine Seite wahrscheinlich auch im FF richtig dargestellt. Alternativ unter "Ansicht"->"Zoom"->"Normal" zu finden.
<div class='logou'>
<img src='img/bluerect.png' alt='' />
</div><div class='logom'>
<img src='img/orangerect.png' alt='' />
</div>
>
> Warum in 3 Teufelsnamen bastelst du hier DIV-Container drum? Du kannst die Bilder auch direkt verwenden und ansprechen, sowie per CSS verändern.
>
>
> Gruß Bobby
>
Danke, Bobby für die Hilfe. "STRG-0" hat's tatsächlich gebracht. Kannst du mir auch noch erklären, warum ich das machen muss?
Hat der FF diese Verkleinerung als irgendeine Standardeinstellung? Oder an welcher Stelle hab ich das versehentlich "ver"stellt?
Normalerweise tu ich sowas in keinem Browser. Und muss ich jetzt jedem, der meine (zukünftige) Seite mit dem FF ansieht, erstmal mitteilen, er möge doch "STRG-0" drücken?
Die div-Container haben schon ihren Sinn - natürlich nicht in dem eingestellten Beispiel. Der wirkliche Code meiner Seite ist weitaus komplizierter, und da brauch ich die.
Gruß
tacitus7
Moin
Als erstes, möchte ich dich freundlichst bitten TOFU zu unterlassen und nur relevante Textteile zu zitieren.
Kannst du mir auch noch erklären, warum ich das machen muss?
STRG und "0" setzt die Zoom-Funktion des FF auf "Normal" zurück.
Hat der FF diese Verkleinerung als irgendeine Standardeinstellung? Oder an welcher Stelle hab ich das versehentlich "ver"stellt?
Der FF hat eine Zoom-Funktion integriert. Standardmäßig ist der Zoom auf "Normal" gestellt. Mit STRG und "+" kannst du den Inhalt vergrößern und mit STRG und "-" wieder verkleinern. Wahrscheinlich hast du aus Versehen STRG und "-" gedrückt.
Und muss ich jetzt jedem, der meine (zukünftige) Seite mit dem FF ansieht, erstmal mitteilen, er möge doch "STRG-0" drücken?
Nein, da dies von der Webseite nicht beeinflusst werden kann. Das ist ein reines Browserfeature und kann auf alle Webseiten angewendet werden. Du bist mit deiner Seite keine Ausnahme.
Die div-Container haben schon ihren Sinn - natürlich nicht in dem eingestellten Beispiel. Der wirkliche Code meiner Seite ist weitaus komplizierter, und da brauch ich die.
Das würde ich erst beim Betrachten und Auswerten des letztendlichen Codes entscheiden ob dies sinnvoll ist. Im Moment sehen diese überflüssig aus.
Gruß Bobby