IE 7 Problem

stockwerk · 10 August 2009

Hallo

Wenn was nicht funktioniert dann wieder mal beim IE oder meine ich das nur?



wenn ich ich im CSS bei #content float: left; eingebe dann kommt es beim IE7 korrekt, aber beim FF fählt der ganze Content div runter.

und wenn ich das mit diesem <!--[if IE 7]> im html schreibe funktioniert es. Ist das korrekt so? also funktionieren tut es ja :-D

HTML:

#content{
text-align: left;
min-height: 450px;
width: 800px;
border: 1px solid black;
border-color: #CCCCCC;
background: #FFFFFF url("images/menuliste.jpg") repeat-x left top;
width: 500px;
margin-top: 5px;
margin-right: 5px;
}

#content h1 {
text-align: center;
color: #FFFFFF;
font: 14px Tebuchet MS;
line-height: 22px;
}

#box {
width: 290px;
float: right;
min-height: 200px;
border: 1px solid black;
border-color: #CCCCCC;
border-style: solid;
margin-top: 5px;
background: #FFFFFF url("images/menuliste.jpg") no-repeat left top;
}

#box h2{
text-align: center;
color: #FFFFFF;
font: 14px Tebuchet MS;
line-height: 22px;
}

#boxu {
width: 290px;
float: right;
min-height: 100px;
border: 1px solid black;
border-color: #CCCCCC;
border-style: solid;
margin-top: 5px;
clear: both;
background: #FFFFFF url("images/menuliste.jpg") no-repeat left top;
}

prm · 11 August 2009

Sieht nach einem float/clear-Problem aus.
Link wäre hilfreich.
Vermutlich machts der FF richtig, nur sieht's in ihm "falsch" aus. Und der IE macht es falsch, stellt es aber "richtig" dar

xooox · 11 August 2009

Poste doch bitte beim nächsten mal deine Homepage :mrgreen:
sieht so aus als würden die 2 rechten Boxen, einfach nur so darum fliegen, die müssen aber in einen eigenen Div Container liegen.

Pack in content all deine Inhalts Boxen rein, und in rechtebox all deine Boxen die auf der rechten seite sein sollen, must deren einstellung aber dann den neuen Code anpassen :

PHP:

<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0; 
padding:0;
text-align: center;  
}
.page {
text-align: left;    
margin: 0 auto;      
width: 795px;
border: #333333 1px solid;
}
.content {
float:left; 
width:500px;
margin:0;
padding: 0;
border: #333333 1px solid;
}
.rechtebox {
width:290px;
margin-left: 505px;
border: #333333 1px solid;
}

</style>
</head>
<body>

<div class="page">
 <div class="content">
 Hier packste alle Inhalts Boxen rein
 </div>
 <div class="rechteboxe">
 Hier packste deine 2 rechten Boxen rein
 </div>
</div>

</body>
</html>

mfg.xooox

stockwerk · 11 August 2009

Die seite ist leider nur lokal.

Hier mal den kompletten Code vom HTML und CSS.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<link rel="stylesheet" href="design.css" type="text/css" />
<!--[if IE 7]>
<style>
#content {
float:left;
}
</style>
<![endif]-->
</head>
<body>
<div id="site">
 <ul id="navigation">
 <li><a href="#">Home</a></li>
 <li><a href="#">Dienstleistung</a></li>
 <li><a href="#">Kontakt</a></li>
 <li><a href="#">Über uns</a></li>
 <li><a href="#">Referenzen</a></li>
</ul>
<div id="box">
<h2> Kategorien</h2>
</div>

<div id="boxu">
<h1>Sponsoren</h1>
</div>

<div id="content">
<h1>Beiträge</h1>
<h2>Home</h2>
<p>Das wird eine schöne Website!</p>
</div>

<div id="footer"></div>
</div>
</body>
</html>

HTML:

*{
margin: 0px;
padding: 0px;
color: #FFFFFF;
}

html,body {
font: 12px Trebuchet MS, Arial;
margin: 40px;
background: #e9e4de;
}

#content h2 {
color:#FF9900;
text-align:left;
padding-left: 10px;
padding-top: 10px;
}

p {
color:#666666;
text-align:left;
padding-left: 10px;
padding-top: 10px;
}

#site {
margin: 0px auto;
background: #e9e4de;
width: 800px;
text-align: center;
}

#navigation {
width: 800px;
height: 50px;
background: url("images/menu.jpg") no-repeat;
}

#navigation li {
float: left;
list-style: none;
}

#navigation li a {
display: block;
width: 160px;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size:14px;
}

#navigation li a:hover{
color:#FF9900;
}

#content{
text-align: left;
min-height: 450px;
width: 800px;
border: 1px solid black;
border-color: #CCCCCC;
background: #FFFFFF url("images/menuliste.jpg") repeat-x left top;
width: 500px;
margin-top: 5px;
margin-right: 5px;
}

#content h1 {
text-align: center;
color: #FFFFFF;
font: 14px Tebuchet MS;
line-height: 22px;
}

#box {
width: 290px;
float: right;
min-height: 200px;
border: 1px solid black;
border-color: #CCCCCC;
border-style: solid;
margin-top: 5px;
background: #FFFFFF url("images/menuliste.jpg") no-repeat left top;
}

#box h2{
text-align: center;
color: #FFFFFF;
font: 14px Tebuchet MS;
line-height: 22px;
}

#boxu {
width: 290px;
float: right;
min-height: 100px;
border: 1px solid black;
border-color: #CCCCCC;
border-style: solid;
margin-top: 5px;
clear: both;
background: #FFFFFF url("images/menuliste.jpg") no-repeat left top;
}

#boxu h1 {
text-align: center;
color: #FFFFFF;
font: 14px Tebuchet MS;
line-height: 22px;
}

#footer {
width: 800px;
background: #666666;
height: 30px;
margin-top: 5px;
float: left;
}

prm · 11 August 2009

Da die li's gefloatet sind, solltest du nach </ul> mit

Code:

<div style="clear: both;"> </div>

clearen.

Wenn bei dir #site 800px breit ist, dann assen da nicht #content mit 800px und die Boxen mit 290px (border, margin und padding nicht berücksichtigt) rein. Reduziere somit die Breite von #content.

Verzichte bei den rechten boxen auf ndie Float-Angabe. Setze sie wie bereits vorgeschlagen in einen übergeordneten, rechts gefloateten div.
Gib dann #content einen entsprechenden rechten margin, mindestens in der Gesamtbreite des rechten Bereichs.
Hier kannst du dich etwas orientieren: Floatverhalten bei bei unterschiedlichen Browsern

stockwerk · 11 August 2009

Vielen Dank für die Hilfe die ist sehr umfangreich. Werde ich heute mal genauer durchgehen.

stockwerk · 11 August 2009

Sollte man jetzt <div id="page"> oder <div class="page"> nehmen?

stockwerk · 11 August 2009

HTML:

Pack in content all deine Inhalts Boxen rein, und in rechtebox all deine Boxen die auf der rechten seite sein sollen

wie muss ich das den genau im HTML angeben? Wenn ich mehr als eine Box habe.

xooox · 11 August 2009

Hier der komplet Brower Kompatibele Code, exclusiv gecoded by xooox ;D

PHP:

<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0; 
padding:0;
text-align: center;  
}
.page {
text-align: left;    
margin: 0 auto;      
width: 815px;
border: #333333 1px solid;
padding:5px;
}
.content {
float:left; 
width:500px;
margin:0;
padding: 5px;
border: #333333 1px solid;
}
.rechtebox {
width:290px;
margin-left: 515px;
padding:5px;
border: #333333 1px solid;
}
.inhaltsboxen{
width:500px;
height:100px;
margin-bottom:5px;
border:#FF0000 1px solid;
}
.rechteboxen{
width:290px;
height:100px;
margin-bottom:5px;
border:#FF0000 1px solid;
}

</style>
</head>
<body>

<div class="page">
 <div class="content">
  <div class="inhaltsboxen">Erste Box</div>
  <div class="inhaltsboxen">ZweiteBox</div>
  <div class="inhaltsboxen">DritteBox</div>
    Hier packste alle Inhalts Boxen rein
 </div>
 <div class="rechtebox">
  <div class="rechteboxen">Erste Box</div>
  <div class="rechteboxen">ZweiteBox</div>
  <div class="rechteboxen">DritteBox</div>
   Hier packste deine 2 rechten Boxen rein
 </div>
</div>

</body>
</html>

Wie du siehst, brauchst du für die Inhalts Boxen nur eine CSS und kannst sie genau wie die Rechteboxen so oft Duplizieren wie du willst, durch Margin-Buttum halten allen den gewüntschen abstand zur nächsten Box, must jetzt nur noch in der CSS die beiden Boxen nach deinen alten Design anpassen.

mfg.xooox

stockwerk · 11 August 2009

HAMMER!!! ;Jump Danke vielmals.

xooox · 11 August 2009

stockwerk schrieb:
HAMMER!!! ;Jump Danke vielmals.

Kein Problem :mrgreen::razz:

stockwerk · 11 August 2009

Also mus jede Box noch in eine grosse Box eingewickelt werden?! Wie würde man jetzt am besten die Navigation erstellen oben. ein div mit dem Namen Navigation und in dieser ein div mit dem Namen topmenu indem dann auch das schwarze Menü bild und die Links kommen?

xooox · 11 August 2009

Must nicht zwingent 2 boxen machen, reicht auch wen du der Navi die nötigen eigenschaften gibst:mrgreen:

rapid10 · 11 August 2009

Die Navigation ist eine Liste daher verwendest du den <ul>-Tag.

stockwerk · 11 August 2009

Ok aber bei den unteren schon wie ich das im Bild gezeichnet habe?

xooox · 11 August 2009

PHP:

<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0; 
padding:0;
text-align: center;  
}
.page {
text-align: left;    
margin: 0 auto;      
width: 815px;
border: #333333 1px solid;
padding:5px;
}
.content {
float:left; 
width:500px;
margin:0;
padding: 5px;
border: #333333 1px solid;
}
.rechtebox {
width:290px;
margin-left: 515px;
padding:5px;
border: #333333 1px solid;
}
.inhaltsboxen{
width:500px;
height:100px;
margin-bottom:5px;
border:#FF0000 1px solid;
}
.rechteboxen{
width:290px;
height:100px;
margin-bottom:5px;
border:#FF0000 1px solid;
}
.navigation{
width:810px;
height:50px;
margin-bottom:5px;
border: #333333 1px solid;
}

</style>
</head>
<body>

<div class="page">
 <div class="navigation">Menü bla bla bla</div> 
 <div class="content">
  <div class="inhaltsboxen">Erste Box</div>
  <div class="inhaltsboxen">ZweiteBox</div>
  <div class="inhaltsboxen">DritteBox</div>
    Hier packste alle Inhalts Boxen rein
 </div>
 <div class="rechtebox">
  <div class="rechteboxen">Erste Box</div>
  <div class="rechteboxen">ZweiteBox</div>
  <div class="rechteboxen">DritteBox</div>
   Hier packste deine 2 rechten Boxen rein
 </div>
</div>

</body>
</html>

Die angaben sind zwar nur so dahingeklatscht, aber du machst das schon :mrgreen:

Edit: Für den fall das du <ul> benutzt brauchste den Div natürlich nicht und machst an der stelle den <ul> hin mit den gleichen angaben wie jetzt der Div .

Der IE7 hat grad noch Probleme warte eine sec. ich änder das grad ab

stockwerk · 11 August 2009

Welche Probleme? Also bei mir sieht es im FF und im IE7 gleich aus

rapid10 · 12 August 2009

Ich empfehle für eine Navigation <ul> zu nehmen. Dient auch der Barrierefreiheit.

stockwerk · 12 August 2009

Also du meinst die Navigation nicht mit <div id="Navigation"></div> sonderns
<ul id="Navigation"></ul>

xooox · 12 August 2009

stockwerk schrieb:
Welche Probleme? Also bei mir sieht es im FF und im IE7 gleich aus

Sehe in meinen IE eine verzerung der anordnung, kann mir aber beim besten willen nicht erklären warum die da ist :? das 1 Jahr pause macht sich bemerkbar :mrgreen:

Also du meinst die Navigation nicht mit <div id="Navigation"></div> sonderns
<ul id="Navigation"></ul>

Ja genau das meint er, du kannst deiner Navigation die gleichen werte geben wie sie der Div momentan hat, darum wäre der Div in diesen fall sinnlos.

IE 7 Problem

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied