css unterschied im ie und ff

Alles, was PHP betrifft, kann hier besprochen werden.

css unterschied im ie und ff

Postby newby » 29. June 2009 16:33

hallo,

ich habe mir mit hilfe von css eine Seite mit einem Header, links darunter ein Menu und recht vom Menu ein Content-Bereich gemacht. Das Menu hat links einen Seitenabstand von 20px und eine Breite von 200px. Der Content-Bereich hat einen Seitenabstand von 220px und ist im FF direkt neben dem Menu. Der Ie stellt das ganze ein bisschen anders dar, er verschiebt das Menu ein Stück nach recht und zwischen Menu und Content ist ein kleiner Streifen weiß. Die beiden Browser scheinen Pixelangaben verschieden zu interpretieren. Wie schaffe ich es, dass die Seite in beiden Browsern gleich aussieht?

Hier noch der Code zum selber angucken:

index.html
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>
 
  <link href="style.css" rel="stylesheet" type="text/css" />
 
  <body>
  <div class="header"><img src="logo.png" height="150"></div>
  <div class="navigation"></div>
  <div class="content"></div>
   
  </body>
</html>


style.css
Code: Select all
body {
/*background-color: #FFFF00;*/
min-width: 990px;
min-height: 600px;
}

div.header {
 height: 150px;
 margin-left: 20px;
 margin-right: 20px;
 margin-top: 10px;
 padding-left: 5px;
 background-color: #FF9000;
 }
 
div.navigation {
  width: 200px;
  height: 700px;
  margin-left: 20px;
  background-image: URL("menu.png");
  float: left;
  }
 
 div.content {
  height: 700px;
  margin-left: 220px;
  margin-right: 20px;
  background-color: #FFFF00;
  }
newby
 
Posts: 105
Joined: 16. July 2006 10:53

Re: css unterschied im ie und ff

Postby Xardas der Dunkle » 29. June 2009 19:25

Könntest du vllt die Bilder zur Verfügung stellen?
Ich habe es jetzt im Firefox und in 2 verschiedenen IEs getestet und es sieht relativ gleich aus.

http://www.x-scripter.com/~dominik/screen-a.png Firefox 3.5
http://www.x-scripter.com/~dominik/screen-b.png Internet Zerstörer 7
http://www.x-scripter.com/~dominik/screen-c.png Internet Zerstörer 6

Zudem ist es allgemein bekannt das der IE ähm ... scheiße ist :lol:
User avatar
Xardas der Dunkle
 
Posts: 482
Joined: 09. March 2008 19:40
Location: /var/www

Re: css unterschied im ie und ff

Postby newby » 30. June 2009 05:58

das header bild ist unwichtig, das menu bild ist ein 1 Pixel hoher Farbverlauf von orange nach gelb, genau wie das menu 200px breit. kannst einfach anstatt background-image background-color nehmen, dann müsste man das auch sehen.
Das der Ie total dumm ist weiß ich, aber es benutzen ihn leider noch über 50% der Surfer. :o
newby
 
Posts: 105
Joined: 16. July 2006 10:53

Re: css unterschied im ie und ff

Postby Nobbie » 30. June 2009 10:17

1) Was hat das mit PHP zu tun?
2) Ist das auch kein IE Problem (ausnahmsweise), sondern ein Anwenderfehler. Nimm das Attribut "height=150" aus dem <img> Tag und es sieht in allen Browsern gleich aus. Die Linie entsteht durch den Platzhalter für das (fehlende) Bild, welches durch die Höhe 150 genau so hoch ist wie die header-Box, und IE malt dann eben die ganze Box aus (mit dem "fehlenden" Bild), wobei die weiße Linie nur ein Rahmen ist.

Getestet mit IE8.
Nobbie
 
Posts: 8761
Joined: 09. March 2008 13:04

Re: css unterschied im ie und ff

Postby newby » 30. June 2009 12:21

Das hat nichts mit PHP zu tun, wusste nicht in welches Forum ich das posten sollte und hab hier was mit css gesehen.

Es geht überhaupt nicht um den header, der funktioniert komplett in beiden Browsern. Das Problem: das menu und der header haben beide einen left-margin von 20px. Im Firefox sind die auch direkt untereinander, im ie ist die navigation ein bisschen nach rechts eingerückt.
newby
 
Posts: 105
Joined: 16. July 2006 10:53

Re: css unterschied im ie und ff

Postby martin04 » 03. July 2009 18:34

Ja, da gibt es immer wieder, teilweise gravierende Unterschiede. Da haben wir uns immer wieder die Haare gerauft. Nicht mal die verschiedenen Browser der Firma Winzigweich sind gleich in der Darstellung. Das ist ja das Kreuz.
Die Lösung ist hier durchaus mit einer CSS-Browserweiche zu finden. Google mal danach.
Es sieht dann ungefähr so aus...

Code: Select all
[size=85]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>CSS-basiertes Layout</title>
  <link rel="stylesheet" type="text/css" href="basis.css">

  <style type="text/css">@import url(modern_ohne_ie.css) all;</style>

  <!--[if IE]>
    <style type="text/css">@import url(ie.css);</style>
  <![endif]-->

  <!--[if IE 6]>
    <style type="text/css">@import url(ie6.css);</style>
  <![endif]-->
   .....

</head>
<body>
  <!-- HTML-Quelltext -->
</body>[/size]
</html>

Für jeden Browser dann ein anderes Stylesheet laden. Dann gehts.
martin04
 
Posts: 3
Joined: 02. July 2009 13:46

Re: css unterschied im ie und ff

Postby Xardas der Dunkle » 03. July 2009 19:06

Wenn man sauber arbeitet brauch man so einen Rotz nicht.
Ggf. mal eine Weiche für den 6er, weil dieser z.B. keine transparenten PNGs unterstützt.
Ich könnte mir die Haare raufen wenn ich diese CSS-Files sehe die fast nur aus Browserweichen bestehen.
User avatar
Xardas der Dunkle
 
Posts: 482
Joined: 09. March 2008 19:40
Location: /var/www

Re: css unterschied im ie und ff

Postby glitzi85 » 03. July 2009 19:29

Xardas der Dunkle wrote:Wenn man sauber arbeitet brauch man so einen Rotz nicht.

Full Ack!

Xardas der Dunkle wrote:Ggf. mal eine Weiche für den 6er, weil dieser z.B. keine transparenten PNGs unterstützt.

Der IE6 kann transparente PNGs. Er kann nur keine Alpha-Transparenz.

mfg glitzi
User avatar
glitzi85
 
Posts: 1920
Joined: 05. March 2004 23:26
Location: Dahoim

Re: css unterschied im ie und ff

Postby newby » 04. July 2009 10:12

ich werd mal nach browserweichen gucken, hab das früher immer mit javascript gemacht, war aber ziemlich unschön.
Ich hab nochmal bei google gesucht, kann es sein, dass das div-tag eine einrückung oder sowas macht?
newby
 
Posts: 105
Joined: 16. July 2006 10:53

Re: css unterschied im ie und ff

Postby Nobbie » 04. July 2009 11:40

>Ich hab nochmal bei google gesucht, kann es sein, dass das div-tag eine einrückung oder sowas macht?

Es ist möglich, dass die einzelnen Tags bei verschiedenen Browsern für die CSS Attribute (insbesondere padding, margin usw.) unterschiedliche Defaultwerte haben (wenn sie nicht explizit gesetzt werden). Deswegen empfehle ich grundsätzlich, bei solchen Problemen alle Tags vorzudefinieren (padding: 0px; usw.).

Ich habe übrigens im IE8 (leider habe ich keinen anderen IE mehr hier) nicht das von Dir geschilderte Problem, die Einrückungen sind übereinstimmend.
Nobbie
 
Posts: 8761
Joined: 09. March 2008 13:04

Re: css unterschied im ie und ff

Postby glitzi85 » 04. July 2009 15:32

Nobbie wrote:Es ist möglich, dass die einzelnen Tags bei verschiedenen Browsern für die CSS Attribute (insbesondere padding, margin usw.) unterschiedliche Defaultwerte haben (wenn sie nicht explizit gesetzt werden). Deswegen empfehle ich grundsätzlich, bei solchen Problemen alle Tags vorzudefinieren (padding: 0px; usw.).

Wieder volle Zustimmung. Ich fange bei allen Webseiten als erstes mal an ein Standard-CSS-File zu erstellen, wo ganz oben das hier reinkommt:

Code: Select all
* {
 margin:0;
 padding:0;
 font-size:1em;
}


Die Hardcore-Variante ist dann noch die Schriftart zu normalisieren (kein Fett, kein Kursiv usw.). Besonders für Anfänger zu empfehlen. Da lernt man dann nämlich gleich die wichtigste Regel: HTML ist NICHT für Formatierungen zuständig.

mfg glitzi
User avatar
glitzi85
 
Posts: 1920
Joined: 05. March 2004 23:26
Location: Dahoim


Return to PHP

Who is online

Users browsing this forum: No registered users and 3 guests