✔ Firefox zeigt falsche breite an...

Status
Nicht offen für weitere Antworten.
Lyn555

Lyn555

Mitglied
Hi,

Mal wieder ein typisches "im Firefox funktioniert es aber nicht im IE" (oder anderstrum) Problem.

Es geht um diese Webseite:
http://www.multidimensionstudio.com/dach/

Da ich noch nicht so fit in CSS bin habe ich mir ein Layout von Intensivstation downgeloaded und modifiziert.

Nun habe ich das Problem das der IE eine kleine Spalte zwischen Menü und Inhalt anzeigt wobei der Firefox keine Probleme damit hat.

Das andere Problem ist das der Firefox mein Inhalt Bereich zu klein anzeigt der IE aber korrekt.

Ich poste mal die kompellten Codes. Hoffentlich wird euch nicht schwindelig.


Code: 
<!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>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
<title>Villa Dante Restaurante Mexico D.F.</title>
<link rel="shortcut icon" href="http://monorom.com/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.style2 {font-size: 14px}
-->
</style>
</head>
<body>
 <!-- Basic template by monorom at www.intensivstation.coh -->

<div id="container">
	<div id="banner" >

	  <table width=" 99%" border="0">
        <tr>
          <td width="22%"><img src="img/logo.gif" width="187" height="57" /></td>
          <td width="58%"> <div align="center"> 
            <p>IMPERMIALISANTES Y PINTURAS </p>
            <p>PREFABRICADOS * ACRILLICOS * ASFALTICOS <br />
            </p>
          </div></td>

          <td width="20%">Tel.  03375 - 295 271<br />
          Fax  03375 - 295 272</td>
        </tr>
      </table>
  </div><!-- end banner -->
	<div id="mainnavi" > </div>
	<!-- end mainnavi -->

  <div id="left">
    <ul id="left">
      <li><a href="#">Incio</a></li>
      <li><a href="#">Nuestra Compania </a></li>
      <li><a href="#">Servicios </a></li>
      <li><a href="#">Productos</a></li>
      <li><a href="#">Clientes</a></li>

      <li><a href="#">Al-Koat </a></li>
      <li><a href="#">Imperilisantes</a></li>
      <li><a href="#">Pinturas</a></li>
      <li><a href="#">Precios</a></li>
      <li><a href="#">Contact</a></li>
      <li></li>

      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    </li>
  </div> 
  <div id="content">

    <div align="center"></div>
    <h1>Gmax your Partner for Roofs </h1>
      <h2 align="left"><img style="float: right; margin-right: 4px; " src="img/pic.jpg" width="286" height="189" alt="IMPERMIALISANTES Mexico D.F." />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis </p>
  </div>
	<div id="footer"> 
	  <div align="right"><a href="#">Contacto</a> | <a href="#">Enlaces</a> | <a href="#">MDS</a> Copyright by Gimax S.A. Mexico D.F. </div>

	</div>
</div>
</body>


Und hier das CSS...

Code: 
/* *** css by miss monorom www.intensivstation.ch *** */

/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */



body {

	background-color: #E8E8E8;

	font-size: 0.8em;

	font-family: "Arial", Times, serif;

	color:#000;

	padding:0;

	margin:0;

}

a {color: #000;}

a:visited {color:#333;}

a:hover {color: #000000;}

a:active { color:#000000;}





h1 {

	font-size: 16px; 

	font-weight: normal;

	color:#000;

 }



h2 {

	font-size: 12px;

	font-weight: normal;

}







/* ----------container zentriert das layout-------------- */

#container {

	width: 70em;

	border: 1px solid #000;

	margin: 40px auto;

	padding: 0;

	background-color: #990000;

}



/* ----------banner for logo-------------- */

#banner {

	margin-top:0;

	padding-top:0;

	background-color: #F7F7F7;

}

#banner p{

	margin-left: 0em;

	padding: 0px;

}

#mainnavi {

	margin: 0;

	padding: 0;

	background-color: #FAFAE7;

}



#mainnavi p{

	margin-left: 0em;

	padding: 0 0px;

}



/* -----------------Inhalt--------------------- */

#content {

	

	height: 400px;

	width: 733px;

	overflow:auto;

	background-color: #ffffff;

	padding: 0;

	margin: 0 0 0 0em;

	background-image:url(img/bgcontentneu.gif);

	background-repeat:no-repeat;

}



p, pre {

	padding: 0 20px 15px 25px;

	margin:0;

}

pre, code { font-size: 1.2em;}



h1 {

	padding: 15px 25px;

	margin:0;

}

h2 {

	padding: 5px 25px;

	margin:0;

}



.gross {

	width: 5.71em;

	height: 1.07em;}



/* --------------left navigavtion------------- */

#left {

	float: left;

	color:#FFFFFF;

	width: 150px;

	margin: 0;

	padding:0px 0 0 0;

	color:#000;

	list-style: none;



	}

	

	#left li a {

color: #fff;

font: normal 11px/24px verdana, arial, tahoma, sans-serif;

display: block;

width: 150px;

height: 25px;

background-color: #000;

border-bottom: 1px solid #fff;

padding-left: 10px;

text-decoration: none;

}



#left li a:hover {

background-color: #F7F7F7;

color:#000;

}



/* -----------footer--------------------------- */

#footer {

	clear: left;

	background-color: #ffffff;

	padding: 0;

	margin: 0;

	background-color: #990000;

	background-image: url(img/bg-footer-corner.gif);

	background-position:bottom;

	color:#FFFFFF;

	

	}


Ich hoffe mir kann jemand helfen... Vielen Dank schonmal im vorauss!
 
Hi,

nimm mal folgende Änderungen im Stylesheet vor, um den "3px-Gap-Bug" im IE zu beheben:

Code: 
#content {
        height: 400px;
        /*width: 733px;*/ /* auskommentiert = deaktiviert */
        overflow:auto;
        background-color: #ffffff;
        padding: 0;
        margin: 0 0 0 0 !important;
        margin: 0 0 0 -3px;
        background-image:url(img/bgcontentneu.gif);
        background-repeat:no-repeat;
}

#leftCol {
        float: left;
        color:#FFFFFF;
        width: 150px;
        margin-right: 0 !important;
        margin-right: -3px;
        padding:0px 0 0 0;
        color:#000;
        }
Netter Nebeneffekt: durch die Herausnahme der Breitenangabe für das DIV content löst sich die falsche Breitendarstellung im Firefox von selbst.

Wie du siehst, habe ich den ursprünglichen ID-Selektor #left in #leftCol umbenannt, da eine ID im Dokument eindeutig sein muss, sie in deinem Markup aber zweimal aufgerufen wird - aus

Code: 
<div id="left">
    <ul id="left">
          ...
    </ul>
    </li>
</div>
wird beispielsweise

Code: 
<div id="leftCol">
    <ul id="leftMenu">
          ...
    </ul>
</div>
Und das weitere dazugehörige Stylesheet lautet:

Code: 
#leftMenu {
        margin: 0;
        padding: 0;
        list-style: none;
        }

#leftMenu li a {
        color: #fff;
        font: normal 11px/24px verdana, arial, tahoma, sans-serif;
        display: block;
        width: 150px;
        height: 25px;
        background-color: #000;
        border-bottom: 1px solid #fff;
        padding-left: 10px;
        text-decoration: none;
        }

#leftMenu li a:hover {
        background-color: #F7F7F7;
        color:#000;
        }
 
Tausen Dank für deine Mühe!
Alles hat hervoragend geklapt...bis auf das die Spalte zwischen Menü und Inhalt nicht verschwunden ist.

Nochmals Vielen Dank
 
Hi,

bei mir ist die Lücke nicht mehr vorhanden:
 

Anhänge

  • demo_Lyn555.jpg
    demo_Lyn555.jpg
    119,5 KB · Aufrufe: 18
Ich habe alles noch einmal von vorne gemacht dan hat es geklappt.

Danke nochmals für deine geniale Hilfestellung!

Ich mache mal zu da alles wunderbar funktioniert hat.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück