[CSS] IE/FF Anzeigeproblem

ottscho · 5 September 2006

Hallo,

ich versuche gerade ein Design mit css umtzusetzen. Im FF sieht es ganz gut aus, aber im IE zerhaut es mir.

FF:

IE:

mein stylesheet so aus:

Code:

body {
	background-position:top center;
    color:#010000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    margin-top:50px;
}

#big {
	background-color: #c1c1c1;
	margin:0 auto;
	width:670px;
    height:480px;
}
#image {
	background-image: url(images/bild.jpg);
	margin:0;
	padding:0;
	width: 60px;
    height: 480px;
    float: left;
    border: solid 1px #FFFFFF;
}

#header {
    background-image: url(images/header.jpg);
    width: 608px;
    height: 60px;
    margin-left: 60px;
    border-top: solid 1px #000000;
    border-right: solid 1px #000000;
}

#inlay {
  	width:608px;
    height:390px;
    margin-left: 60px;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
}

#content {
    background-color: #D5D5D5;
    width: 568px;
    height: 350px;
    border: solid 1px #FFFFFF;
    margin-top: 18px;
    margin-left: 18px;
    float:left;
}

li {
	display:block;
	list-style-type:none;
	margin:0;
	padding:0;
}

ul {
	display:block;
	list-style-type:none;
	padding:0;
    margin:12px 0px 0px 18px;
    float:left;
}

#topbuttons {
    vertical-align: middle;
    width: 608px;
    height: 30px;
    margin-left: 60px;
    border-right: solid 1px #000000;
}

#topbuttons li.style1{
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	float:left;
	height:16px;
	text-align:center;
	width:113px;
}

#topbuttons li.style2{
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	float:left;
	height:16px;
	text-align:center;
	width:113px;
}

und noch die index:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" href="style.css">
<title>{$title}</title>
</head>
<body>
 <div id="big">
  <div id="image">
  </div>
   <div id="header">
   </div>
    <div id="topbuttons">
      <ul>
        <li class="style1">Unternehmen</li>
        <li class="style1">Leistungen</li>
        <li class="style1">Immobilien</li>
        <li class="style1">Kontakt</li>
        <li class="style2">Impressum</li>
      </ul>
     </div>
    <div id="inlay">
      <div id="content">
      </div>
     </div>
 </div>
</body>
</html>

Kann mir bitte jmd helfen, und sagen wo sich der Fehler für IE befindet?
Vielen Dank

mfg
ottscho

ZeroCCC · 5 September 2006

irgendwo ist da nen pixel zuviel desweggen bricht der ie das ganze um... mach einfach das hindergrundbild in big rein und fertig.

ottscho · 5 September 2006

wie meinst du das mit dem Bild?
das Bild als <img> in den big-div?

steh gerade auf dem schlauch, sry

theHacker · 5 September 2006

Evtl. kannst du es zusammenfassen :think:

Code:

#big { 
  background: #c1c1c1 url('images/bild.jpg') no-repeat; 
}

*grade zu faul zum ausprobieren bin :biggrin:

*

Ansonsten ein leerer Div, der nur ein Hintergrundbild hat, kannst auch direkt mit'm <img> machen.

ottscho · 5 September 2006

nun ist noch ein Problem dazu gekommen.

so soll das fertige Design nun aussehen:

im IE sieht es leider so aus:

einmal hab ich das Problem mit dem schwarzen Rand. und einmal Eben mit dem Img links. Hat jmd eine idee?

Hier nochmal der geänderte css:

Code:

body {
	background-position:top center;
    color:#000000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    margin-top:50px;
    text-align: center;
 }
 
#position {
    margin: auto;
    width: 670px;
    text-align:left;
}

#rahmen {
    border-top: solid 4px #000000;
    border-bottom: solid 4px #000000;
    border-left: solid 4px #000000;
	margin:0px 0px 0px 0px;
	width:62px;
    height:482px;
}

#big {
	background-color: #c1c1c1;
	margin:0 auto;
	width:670px;
    height:480px;
}


#image {
	background-image: url(images/bild.jpg);
	margin:0;
	padding:0;
	width: 60px;
    height: 480px;
    float: left;
    border: solid 1px #FFFFFF;
}

#header {
    background-image: url(images/header.jpg);
    width: 608px;
    height: 60px;
    margin-left: 60px;
    border-top: solid 1px #000000;
    border-right: solid 1px #000000;
}

#inlay {
  	width:608px;
    height:390px;
    margin-left: 60px;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
}

#content {
    background-color: #D5D5D5;
    width: 568px;
    height: 350px;
    border: solid 1px #FFFFFF;
    margin-top: 18px;
    margin-left: 18px;
    float:left;
}

li {
	display:block;
	list-style-type:none;
	margin:0;
	padding:0;
}

ul {
	display:block;
	list-style-type:none;
	padding:0;
    margin:12px 0px 0px 18px;
    float:left;
}

#topbuttons {
    vertical-align: middle;
    width: 608px;
    height: 30px;
    margin-left: 60px;
    border-right: solid 1px #000000;
}

#topbuttons li.style1{
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	float:left;
	height:16px;
	text-align:center;
	width:113px;
}

#topbuttons li.style2{
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	float:left;
	height:16px;
	text-align:center;
	width:113px;
}

#topbuttons a {
	color:#000000;
	display:block;
	font-size:12px;
	height:16px;
	text-decoration: none;
	width:auto;
	vertical-align: middle;
}

#topbuttons a:hover {
	color:#000000;
	background-color:#D5D5D5;
	display:block;
	font-size:12px;
	font-weight:bold;
	height:16px;
	text-decoration: none;
	width:auto;
	vertical-align: middle;
}

@Hacker
kann ich bei deiner Methode auch einen Border für das Bild angeben? Ich brauche da einen 1 px Großen Border. siehe Desgin im FF.

theHacker · 5 September 2006

ottscho schrieb:
@Hacker
kann ich bei deiner Methode auch einen Border für das Bild angeben? Ich brauche da einen 1 px Großen Border. siehe Desgin im FF.

Nein.
Einen einzelnen Hintergrund kannst du nicht einrahmen, sondern wenn, dann nur komplett außen rum und das willst du ja nicht.
In dem Fall musst du dann doch mit einem <img>-Tag arbeiten.

ottscho · 5 September 2006

theHacker schrieb:
Nein.
Einen einzelnen Hintergrund kannst du nicht einrahmen, sondern wenn, dann nur komplett außen rum und das willst du ja nicht.
In dem Fall musst du dann doch mit einem <img>-Tag arbeiten.

ok, habe es nun verstanden. aber wie soll ich es auf der linken Seite machen, mit dem dicken schrwarzen Rahmen. bis jetzt hab ich es so, dass ich ein div habe mit 60px breite und dann oben, links und unten den Rahmen einblende. in der div, habe ich eine andere div, mit der breite von 600px. im ff geht es wiederum und im ie zieht er mir den schwarzen balken auf dier komplette breite des inneren divs mit 600px. wie kann ich das lösen?

ich hoffe ihr habt verstanden, was ich meine.

ottscho · 5 September 2006

so, ich habe nun das Layout so wie ich es haben möchte.
Im FF sieht es gut aus und im IE noch nicht ganz. Kommt der IE mit dern Angaben von margin nicht wirklich klar? habe Probleme mit der Positionierung.
Hier mein Quelltext der css:

Code:

body {
	background-position:top center;
    color:#000000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    margin-top:50px;
    text-align: center;
 }
 
#position {
    margin: auto;
    width: 678px;
    height: 489px;
    text-align:left;
    border: solid 1px #000000;
}

#rahmen {
    border-top: solid 4px #000000;
    border-bottom: solid 4px #000000;
    border-left: solid 4px #000000;
	margin:0px 0px 0px 0px;
	width:62px;
    height:482px;
    float: left;
}

#image {
	background-image: url(images/bild.jpg);
	margin:0 auto;
	padding:0;
	width: 60px;
    height: 480px;
    float: left;
    border: solid 1px #FFFFFF;
}

#header {
    background-image: url(images/header.jpg);
    width: 608px;
    height: 60px;
    margin-left: 65px;
    margin-top: 4px;
    border-top: solid 1px #000000;
    border-right: solid 1px #000000;
}

#inlay {
  	width:613px;
    height:390px;
    margin-left: 60px;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
    background-color: #c1c1c1;
}

#content {
    background-color: #D5D5D5;
    width: 568px;
    height: 350px;
    border: solid 1px #FFFFFF;
    margin-top: 18px;
    margin-left: 18px;
    float:left;
}

li {
	display:block;
	list-style-type:none;
	margin:0;
	padding:0;
}

ul {
	display:block;
	list-style-type:none;
	padding:0;
    margin:12px 0px 0px 18px;
    float:left;
}

#topbuttons {
    background-color: #c1c1c1;
    vertical-align: middle;
    width: 613px;
    height: 30px;
    margin-left: 60px;
    border-right: solid 1px #000000;
}

#topbuttons li.style1{
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	float:left;
	height:16px;
	text-align:center;
	width:113px;
}

#topbuttons li.style2{
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	float:left;
	height:16px;
	text-align:center;
	width:113px;
}

#topbuttons a {
	color:#000000;
	display:block;
	font-size:12px;
	height:16px;
	text-decoration: none;
	width:auto;
	vertical-align: middle;
}

#topbuttons a:hover {
	color:#000000;
	background-color:#D5D5D5;
	display:block;
	font-size:12px;
	font-weight:bold;
	height:16px;
	text-decoration: none;
	width:auto;
	vertical-align: middle;
}

und so sieht die index datei aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" href="style.css">
<title>{$title}</title>
</head>
<body>
<div id="position">
 <div id="rahmen">
    <div id="image">
    </div>
 </div>
 <div id="header">
   </div>
 <div id="topbuttons">
    <ul>
        <li class="style1"><a href="index.php?m=unternehmen">Unternehmen</a></li>
        <li class="style1"><a href="index.php?m=leistungen">Leistungen</a></li>
        <li class="style1"><a href="index.php?m=immobilien">Immobilien</a></li>
        <li class="style1"><a href="index.php?m=kontakt">Kontakt</a></li>
        <li class="style2"><a href="index.php?m=impressum">Impressum</a></li>
      </ul>
 </div>
 <div id="inlay">
    <div id="content">
    </div>
 </div>
</div>
<div align="right">Fried. Ernst Benzing 2006</div>
</div>
</body>
</html>

wie bekomme ich es hin, dass der IE die Positionierung richtig macht.

Danke für eure Hilfe.

Gruß
ottscho

[CSS] IE/FF Anzeigeproblem

ottscho

Well-known member

ZeroCCC

wasn das?

ottscho

Well-known member

theHacker

sieht vor lauter Ads den Content nicht mehr

ottscho

Well-known member

theHacker

sieht vor lauter Ads den Content nicht mehr

ottscho

Well-known member

ottscho

Well-known member