✔ Bekomme falsche Darstellung im IE nicht weg!

Status
Nicht offen für weitere Antworten.
T

Trash

Erfahrenes Mitglied
Hallo,
ich glaub langsam nerv ich schon!

Ich habe 2 Bilder hochgeladen:
http://www.room21.de/ff.jpg
-> so solls aussehen! Das tut es im Firefox!


http://www.room21.de/ie.jpg
-> so siehts im IE aus!

Online zu bewundern unter:
http://www.room21.de/dba/

Also der lila Strich rechts neben dem Menü soll weg!

In der CSS Datei hab ich herausgefunden, dass wenn ich bei .content die margin-left von 203px auf 200 setze, stimmts im IE, aber im FF nicht mehr. Es muss eigentlich auch 203 sein, weil eine Grafik (logo) 203 breite hat!

Hier nun mal der HTML und CSS Code. Ich hoffe, dass dies mein letztes Problem mit dieser Site ist!

.css
Code: 
/* CSS Datei */

html {
height: 100%;
}

body
{
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#000000;
 background-color:#FF5FFF;
 margin:0px;
 padding:0px;
 height:98%;
	
}


a:link, a:visited, a:active, a:hover
{
  text-decoration:none;
  font-weight:bold;
  color:#FFFFFF;
  font-size:12px;
  background-color:transparent;
}

/* Header */

/*Header repeat-teil*/

.header_repeat {
height:113px;
padding:0px;
background-image:url(../images/header_repeat.gif);
background-repeat:repeat-x;
margin-left:21px;
margin-top:0px;
width:70%;
color:#000000;
background-color:#FFFFFF;

}


/*linkes passendes Stück*/
.header_left {
width:100%;
height:113px;
padding:0px;
background-image:url(../images/header_left.gif);
background-repeat:no-repeat;
margin:0px;
color:#000000;
background-color:#FFFFFF;
}

/*linkes Menü*/



/*left repeat-teil*/


/*
.left_repeat {
width:203px;
padding:0px;
margin-left:0px;
margin-right:0px;
background-image:url(../images/left_repeat.gif);
background-repeat:repeat-y;
height:70%;
color:#000000;
background-color:#FFFFFF;
}*/

.left_repeat {
height:70%;
width:203px;
padding:0px;
margin:0px;
background-image:url(../images/left_repeat.gif);
background-repeat:repeat-y;
min-height: 70%;
color:#000000;
background-color:#FFFFFF;
}

/*
* html .left_repeat { /* Für IE */ /*
height: 70%;
}*/



/* left-div-class für oberes puzzleteil*/
.left_oben {
width:203px;
padding:0px;
margin-left:0px;
margin-right:0px !important;
margin-right: -3px;
float:left;
height:100%;
color:#000000;
background-color:#FFFFFF;
}

/*left-untere ecke*/
.left_unten {
background-image:url(../images/left_kante_unten.gif);
background-repeat:no-repeat;
width:123px;
height:144px;
color:#000000;
background-color:#FFFFFF;
}


.content {
height:100%;
color:#000000;
background-color:#FFFF5F;
margin-left:203px;

}

.content_headline {
height:50px;
width:500px;
background-image:url(../images/content_headline.gif);
background-repeat:no-repeat;
text-align:left;
padding-left:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#000000;
background-color:#FFFFFF;
}

.left_menupunkt {
height:22px;
width:123px;
background-image:url(../images/left_button.gif);
background-repeat:no-repeat;
text-align:left;
padding-left:15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
background-color:transparent;
}


.headline_start {
height:50px;
width:3px;
background-image:url(../images/headline_start.gif);
background-repeat:no-repeat;
}

.headline_repeat {
margin-left:3px;
height:50px;
width:90%;
background-image:url(../images/headline_repeat.gif);
background-repeat:repeat-x;
padding-left:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
}

.headline_end {
height:50px;
width:36px;
background-image:url(../images/headline_end.gif);
background-repeat:no-repeat;
}

.footer_start {
height:34px;
width:28px;
background-image:url(../images/footer_start.gif);
background-repeat:no-repeat;
}

.footer_repeat {
height:34px;
width:90%;
background-image:url(../images/footer_repeat.gif);
background-repeat:repeat-x;
margin:0px;
padding-top:3px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
}

.footer_end {
height:34px;
width:21px;
background-image:url(../images/footer_end.gif);
background-repeat:no-repeat;
}


/* CSS Datei Ende */

.html
HTML: 
<body>
<div class="left_oben">
        <div class="left_repeat">
                 <img src="images/logo.gif" style="width:203px; height:214px;margin-left:0px;padding:0px;" alt="Logo" />


                <div class="left_menupunkt">Einführung</div>
                <div class="left_menupunkt"><a href="inc/dsl_uebung.xml" target="inhalt">DDL</a></div>
                <div class="left_menupunkt">DQL</div>
                <div class="left_menupunkt">DML</div>
                <div class="left_menupunkt">DCL</div>

        </div>
        <div class="left_unten"></div>
</div>

<div class="content">
        <div class="header_left">
                <div class="header_repeat">
                        <img src="images/header_end.gif" style="float:right;width:84px; height:113px;padding:0px;margin:0px;" alt="Logo" />
               
                         </div>
     </div>



        <table border="0" cellpadding="0" cellspacing="0" width="60%" height="80%">
                <tr>
                        <td>

                        </td>
                </tr>
                <tr>
                        <td height="100%">
                        <!-- INHALT --->
                        <!--
<iframe frameborder="0" name="inhalt" style="width:100%;height:100%;" src="inc/start.html" scrolling="no"> 
Ihr Browser unterstützt leider keine iFrames!
</iframe>-->
                        
                        
                        <!-- ENDE INHALT ENDE --->
                        </td>
                </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                        <td class="footer_start"></td>
                        <td class="footer_repeat">Internet Grundlagen I05a 2006 | SQL | CP, TH, TT</td>
                        <td class="footer_end"></td>
                </tr>
        </table>

</div>

</body>

Vielen Dank an Euch!
 
Trash hat gesagt.:
Also der lila Strich rechts neben dem Menü soll weg!

In der CSS Datei hab ich herausgefunden, dass wenn ich bei .content die margin-left von 203px auf 200 setze, stimmts im IE, aber im FF nicht mehr. Es muss eigentlich auch 203 sein, weil eine Grafik (logo) 203 breite hat!
Zum Vergrößern anklicken....
In deinem Thread Firefox zeigt vertikale Leiste nicht an, der sich auch mit diesem Layout befasste, hatte ich für das DIV .content folgende margin-Regel angewendet:

Code: 
.content {
height:100%;
color:#000000;
background-color:#FFFFFF;
margin-left:203px !important; /* Für nicht-IE-Browser */
margin-left:200px; /* Für IE */
}
um den "3px-Gap-Bug", der im IE bei floatenden Boxen auftritt, zu beheben und so diese Lücke zu schliessen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück