Problem mit Darstellung im IE und Firefox

Carpabilly · 19.06.2009

Hallo Boardgemeinde,

zu allererst mal Hallo, bin neu hier und befinde mich in einer Ausbildung zum Fachinformatiker - Anwendungsentwicklung (1.Lehrjahr)

Von meinem Chef hab ich die Aufgabe bekommen, eine Website für einen Fußballverein zu programmieren, soweit so gut.
Hat auch alles recht gut geklappt.

Standartmäßig nutze ich Opera, wo die Seite auch korrekt dargestellt wird.

Der IE macht mir nach 'float' einen Abstand von 3 px.

Hab schon reichlich gegoogelt und der Fehler ist als "3 Pixel Bug" bekannt.

das ganze könnte ich mit margin-right:-3px; lösen,

doch später soll zwischen den beiden Elementen wieder 1 Pixel Abstand sein

Wenn ich im Code margin-right:-2px; mache, dann hab ich zwar dann den richtigen 1 Pixel Abstand zwischen den Elementen, doch nur im IE

Mozilla und Opera passt dann wieder nicht mehr!

Ich hoffe ihr wisst was ich meine

Hier mal mein Code:

Code:

<html>
<head>
<title></title>

</head>
<style type="text/css">

body
{
  background: #F0F1FB;
}

/*
#frame_left
{
  background-image: url(frame_left.jpg);
  background-repeat:repeat-x;
  height:195px;
  margin-right:1px;
  margin-left:auto;
  float:left;
  width:100px;
}

#frame_right
{
  background-image: url(frame_right.jpg);
  background-repeat:repeat-x;
  height:195px;
  margin-top:64px;
  float:right;
  margin-right:auto;
  width:100px;
}
*/

#above_logo_left
{
  background:#2A2B40;
  width:412px;
  height:42px;
}

#logo_left
{
  background-image: url(logo_left.jpg);
  background:#000000;
  width:412px;
  height:195px;

}

#logo_right
{
  background-image: url(logo_right.jpg);
  background:#000000;
  width:267px;
  height:259px;
  float:left;
}

#logo_right_right_top
{
  background:#F0F1FB;
  width:48px;
  height:21px;
}

#logo_right_right
{
  background:#2A2B40;
  width:48px;
  height:238px;
}


/*-- Contentbereiche --*/
#content_left_top
{
  background: #A3A8AF;
  width:412px;
  min-height:144px;
  height:auto !important;  /* für moderne Browser */
  height:144px;  /*für den IE */
}

#content_left_bottom
{
  background: #53567F;
  width:412px;
  min-height:267px;
  height:auto !important;  /* für moderne Browser */
  height:267px;  /*für den IE */
}

#content_right
{
  background: #2A2B40;
  width:316px;
  min-height:446px;
  height:auto !important;  /* für moderne Browser */
  height:446px;  /*für den IE */
  position:relative;
}


/*-- Navigationsleiste oben --*/
#nav_top_1
{
  background: #53567F;
  width:85px;
  height:33px;
  float:left;
}

#nav_top_1:hover
{
  background: #2A2B40;
  width:85px;
  height:33px;
  float:left;
}


#nav_top_2
{
  background: #53567F;
  width:119px;
  height:33px;
  float:left;
}

#nav_top_2:hover
{
  background: #2A2B40;
  width:119px;
  height:33px;
  float:left;
}

#nav_top_3
{
  background: #53567F;
  width:97px;
  height:33px;
  float:left;
}

#nav_top_3:hover
{
  background: #2A2B40;
  width:97px;
  height:33px;
  float:left;
}

#nav_top_4
{
  background: #53567F;
  width:108px;
  height:33px;
}

#nav_top_4:hover
{
  background: #2A2B40;
  width:108px;
  height:33px;
}


/*-- Navigationsleiste unten --*/
#nav_bottom_1
{
  background: #53567F;
  width:158px;
  height:32px;
  float:left;
}

#nav_bottom_1:hover
{
  background: #2A2B40;
  width:158px;
  height:32px;
  float:left;
}

#nav_bottom_2
{
  background: #53567F;
  width:157px;
  height:32px;
}

#nav_bottom_2:hover
{
  background: #2A2B40;
  width:157px;
  height:32px;
}


/*-- Rahmen und Ausrichtungen --*/
#rahmen_komplett
{
 
}


#rahmen_links
{
  margin-top:21px;
  float:left;
}

#rahmen_rechts
{
  float:left;
}

#center 
{
  margin-left: auto;
  margin-right: auto;
}

</style>
<body>
<div id="center">
<!--<div id="frame_left"></div>-->
    <div id="rahmen_komplett">

      <div id="rahmen_links">
        <div id="above_logo_left"></div>
        <div id="logo_left"></div>
        <div id="nav_top_1"></div>
        <div id="nav_top_2"></div>
        <div id="nav_top_3"></div>
        <div id="nav_top_4"></div>
        <div id="content_left_top"></div>
        <div id="content_left_bottom"></div>
      </div>

      <div id="rahmen_rechts">
        <div id="logo_right"></div>
        <div id="logo_right_right_top"></div>
        <div id="logo_right_right"></div>
        <div id="content_right"></div>
        <div id="nav_bottom_1"></div>
        <div id="nav_bottom_2"></div>
      </div> 

    </div> 
<!--<div id="frame_right"></div>-->
</div>
</body>
</html>

Gruß Carpabilly

Carpabilly · 19.06.2009

AW: Problem mit Darstellung im IE und Firefox

Hier noch mal ein Bild, wies am Ende mal ausschaunen soll:

bluenote · 19.06.2009

AW: Problem mit Darstellung im IE und Firefox

Ohne jetzt tief in Deinen Code eingestiegen zu sein:

Erstelle für den IE ein Extra-Stylesheet und weise es per Conditional Comments dem IE zu.
Wenn ich es richtig sehe sollen die 1Px breiten Rahmen durch die Abstände erzeugt werden? Verabschiede Dich von dieser Idee. Weise den Elementen eine 1Px Border zu und setze die Abstände auf Null. Das sollte besser gehen.
Setze Dich mit einem guten CSS Framework wie z.B. YAML auseinander. Lerne wie dort die Bugs des IE umgangen werden. Und nicht zuletzt: sieh Dir den Code von gut gestalteten Seiten an. Du kannst daraus nur lernen.

Jens

Carpabilly · 19.06.2009

AW: Problem mit Darstellung im IE und Firefox

hab das Problem gerade selbst gelöst

margin-right:1px;{margin-right:-2px;}

Schattenspringer · 19.06.2009

AW: Problem mit Darstellung im IE und Firefox

.. wegen den paddings und margins bei den verschiedenen browsern - das problem ist, dass jeder browser über ein eigenes browser css verfügt, welches ein paar elemente "von natur aus" ein wenig anders, als der andere darstellt - das betrifft vor allem die abstände von überschriften, absätzen etc.
also sollte man als erstes immer sowas in der eigenen css auf 0 stellen, damit man selbst pixelgenau (!) entscheiden kann, wo jedes element der webseite steht
noch mal ne frage an dich:gibt es einen bestimmten grund, wieso du frames verwendest?

gruss
schattenspringer

Carpabilly · 22.06.2009

AW: Problem mit Darstellung im IE und Firefox

Hi, ich verwende keine Frames!

Die Bezeichnung Frame ist in meinem Code nur die Bezeichnung für 2 Div Container

Carpabilly · 22.06.2009

AW: Problem mit Darstellung im IE und Firefox

Opera macht vorbildlich alles richtig!

Der IE auch fast, da funktioniert nur 'hover' nicht aber da bin ich gerade dabei das Problem zu lösen.

Aber wenn man sich die Seite im FF anschaut, dann passt wieder gar nichts.
Abstände nach passen nicht ganz zusammen, nach float werden Divs nicht angezeigt etc.

habt ihr ein paar Tipps für mich um das ganze zu lösen?

Hab auch schon die Suchfunktion benutzt.

Mittige Ausrichtung klappt auch nicht.

Code:

<html>
<head>
<title></title>

</head>
<style type="text/css">

body
{
  background: #F0F1FB;
  
}

/*
#frame_left
{
  background-image: url(frame_left.jpg);
  background-repeat:repeat-x;
  height:195px;
  margin-right:1px;
  margin-left:auto;
  float:left;
  width:100px;
}

#frame_right
{
  background-image: url(frame_right.jpg);
  background-repeat:repeat-x;
  height:195px;
  margin-top:64px;
  float:right;
  margin-right:auto;
  width:100px;
}
*/

#above_logo_left
{
  background:#2A2B40;
  width:412px;
  height:42px;
  margin-bottom:1px;
  margin-right:1px;
}

#logo_left
{
  background-image: url(logo_left.jpg);
  width:412px;
  height:195px;
  margin-bottom:1px;
}

#logo_right
{
  background-image: url(logo_right.jpg);
  width:267px;
  height:259px;
  float:left;
  margin-right:1px;{margin-right:-2px;}
}

#logo_right_right_top
{
  background:#F0F1FB;
  width:48px;
  height:21px;
}

#logo_right_right
{
  background:#2A2B40;
  width:48px;
  height:238px;
  margin-bottom:1px;
}


/*-- Contentbereiche --*/
#content_left_top
{
  background: #A3A8AF;
  width:412px;
  min-height:144px;
  height:auto !important;  /* für moderne Browser */
  height:144px;  /*für den IE */
  margin-bottom:1px;
}

#content_left_bottom
{
  background: #53567F;
  width:412px;
  min-height:267px;
  height:auto !important;  /* für moderne Browser */
  height:267px;  /*für den IE */
}

#content_right
{
  background: #2A2B40;
  width:316px;
  min-height:446px;
  height:auto !important;  /* für moderne Browser */
  height:446px;  /*für den IE */
  position:relative;
  margin-bottom:1px;
}


/*-- Navigationsleiste oben --*/
#nav_top_1
{
  background: #53567F;
  width:85px;
  height:33px;
  float:left;
  margin-right:1px;
  margin-bottom:1px;
}

#nav_top_1:hover
{
  background: #2A2B40;
  width:85px;
  height:33px;
  float:left;
  margin-right:1px;
  margin-bottom:1px;
}


#nav_top_2
{
  background: #53567F;
  width:119px;
  height:33px;
  float:left;
  margin-right:1px;
  margin-bottom:1px;
}

#nav_top_2:hover
{
  background: #2A2B40;
  width:119px;
  height:33px;
  float:left;
  margin-right:1px;
  margin-bottom:1px;
}

#nav_top_3
{
  background: #53567F;
  width:97px;
  height:33px;
  float:left;
  margin-bottom:1px;
  margin-right:1px;{margin-right:-2px;}
}

#nav_top_3:hover
{
  background: #2A2B40;
  width:97px;
  height:33px;
  float:left;
  margin-bottom:1px;
  margin-right:1px;{margin-right:-2px;}
  
}

#nav_top_4
{
  background: #53567F;
  width:108px;
  height:33px;
  margin-bottom:1px;
}

#nav_top_4:hover
{
  background: #2A2B40;
  width:108px;
  height:33px;
  margin-bottom:1px;
}


/*-- Navigationsleiste unten --*/
#nav_bottom_1
{
  background: #53567F;
  width:158px;
  height:32px;
  float:left;
  margin-right:1px;{margin-right:-2px;}
}

#nav_bottom_1:hover
{
  background: #2A2B40;
  width:158px;
  height:32px;
  float:left;
  margin-right:1px;{margin-right:-2px;}
}

#nav_bottom_2
{
  background: #53567F;
  width:157px;
  height:32px;
}

#nav_bottom_2:hover
{
  background: #2A2B40;
  width:157px;
  height:32px;
}


/*-- Rahmen und Ausrichtungen --*/
#rahmen_komplett
{
 
}

#rahmen_links
{
  margin-top:21px;
  float:left;
}

#rahmen_rechts
{
  float:left;
}

#center 
{
  margin-left: auto;
  margin-right: auto;
}

</style>
<body>
<div id="center">
<!--<div id="frame_left"></div>-->
    <div id="rahmen_komplett">

      <div id="rahmen_links">
        <div id="above_logo_left"></div>
        <div id="logo_left"></div>
        <div id="nav_top_1"></div>
        <div id="nav_top_2"></div>
        <div id="nav_top_3"></div>
        <div id="nav_top_4"></div>
        <div id="content_left_top"></div>
        <div id="content_left_bottom"></div>
      </div>

      <div id="rahmen_rechts">
        <div id="logo_right"></div>
        <div id="logo_right_right_top"></div>
        <div id="logo_right_right"></div>
        <div id="content_right"></div>
        <div id="nav_bottom_1"></div>
        <div id="nav_bottom_2"></div>
      </div> 

    </div> 
<!--<div id="frame_right"></div>-->
</div>
</body>
</html>

Gruß Carpabilly

sloshed · 22.06.2009

AW: Problem mit Darstellung im IE und Firefox

Hey,

so neben bei, du hast deine Styleangabe im Document falsch platziert. Die Style-angaben kommen in den Head Bereich und nicht zwischen Head und Body

HTML:

<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>