✔ DIV-Höhe bei IE 6/7 und Firefox

Status
Nicht offen für weitere Antworten.
celiadee

celiadee

Mitglied
Hi Folks!

ich habe ein Problem mit den Massangeben bei der Formatierung von DIVs.

Hier mal der Link:http://www.christinaundwalter.com/index.php?seite=files/grafik

Im Firefox und Safari t alles wunder, die Anzeige ist korrekt.

Im Explorer sitzen die Linie zu weit unten und die DIVs sind nicht korrekt ausgerichtet.

Wie muss ich bitte die Massangaben schreiben, damit IE die Die DIVs korrekt ausrichtet:

Hier das Script für die Seite:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>***christinaundwalter***</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Christina Walter, Diplom-Modedesignerin, Düsseldorf, Designer, Mode, Textil, Grafik, Interior, Artwork, C.Walter, Houseware, Papeterie">
<meta name="author" content="Christina Walter">
<meta name="copyright" content="Christina Walter">
<meta name="language" content="de">
<meta name="organization" content="Christina Walter">
<meta name="description" content="Sie erhalten kreative Leistungen in den Bereichen Grafik-Design und Mode-Design.">
<meta name="revisit-after" content="5 days">
<meta name="robots" content="index, follow">
<meta name="Codierung" content="Christina Walter">
 <style type="text/css">@import url(files/format.css);</style> 
  <!--[if IE 7]>
    <style type="text/css">@import url(files/ie7.css);</style>
  <![endif]-->

  <!--[if lt IE 7]>
    <style type="text/css">@import url(files/ie6.css);</style>
  <![endif]-->
</head>

<body>
<div id="framecontent">
<div class="innertube_navi">

      <a href="http://www.christinaundwalter.com/index.php?seite=files/hello">C&amp;W</a><br>
      <a href="http://www.christinaundwalter.com/index.php?seite=files/designbuero">Designb&uuml;ro</a><br>

      <a href="http://www.christinaundwalter.com/index.php?seite=files/grafik">Grafik-Design</a><br>
      <a href="http://www.christinaundwalter.com/index.php?seite=files/mode">Mode-Design</a><br>
      <a href="http://www.christinaundwalter.com/index.php?seite=files/accessoires">Accessoires</a><br>
      <a href="http://www.christinaundwalter.com/index.php?seite=files/online">Online-Projekte</a><br>
      <a href="http://www.christinaundwalter.com/index.php?seite=files/kundenliste">Kundenliste</a><br>
      <a href="http://www.christinaundwalter.com/index.php?seite=files/impressum">Impressum</a><br>

      <a href="http://www.christinaundwalter.com/index.php?seite=files/kontakt">Kontakt</a><br>
	  
</div>
</div>


<div id="maincontent">
<div class="innertube_main">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 <style type="text/css">@import url(format.css);</style> 
  <!--[if IE 7]>
    <style type="text/css">@import url(ie7.css);</style>
  <![endif]-->

  <!--[if lt IE 7]>
    <style type="text/css">@import url(ie6.css);</style>
  <![endif]-->
</head>
<body>
<!-- seite -->
<div id="page_grafik">
<!-- überschrift -->
<div id="headline">
<img src="../pics/headline_grafik.gif">
</div>

<!-- content_1 -->

  <div id="content"> 
    <hr class="line">
    <div id="content_text">
	IN DIE ROTEN FELDER
      KOMMEN DIE TEXTE REIN</div>
	<div id="content_pic">
		IN DIE GELBEN FELDER
		KOMMEN DIE BILDER REIN
    </div>
  </div>

<!-- content_2 -->

  <div id="content"> 
    <hr class="line">
    <div id="content_text"></div>
    <div id="content_pic"></div>
  </div>

  <!-- content_3 -->
  <div id="content"> 
    <hr class="line">
    <div id="content_text"></div>

    <div id="content_pic"></div>
  </div>

<!-- content_4 -->
  <div id="content"> 
    <hr class="line">
    <div id="content_text"></div>
    <div id="content_pic"></div>
  </div>

<!-- content_5 -->

  <div id="content"> 
    <hr class="line">
    <div id="content_text"></div>
    <div id="content_pic"></div>
  </div>

<!-- content_6 -->
  <div id="content"> 
    <hr class="line">
    <div id="content_text"></div>
    <div id="content_pic"></div>

  </div>


<!-- seitenende -->		
</div>
</body>
</html>
 


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

hier das CSS für Firefox/ moderne Browser:

HTML: 
/* CSS Document */

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 142px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: black;
text-align:right;
}

#maincontent{
position: fixed;
top: 0; 
left: 142px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: black;
}

* html body{ /*IE6 hack*/
padding: 0 0 0 142px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

a:link {
	font-family: "Verdana", Arial, Helvetica;
	font-size: 11px;
	font-style: normal;
	line-height: 25px;
	font-weight: normal;
	color: #555555;
	text-decoration: none;
}
a:visited {
	font-family: "Verdana", Arial, Helvetica;
	font-size: 11px;
	font-style: normal;
	line-height: 25px;
	font-weight: normal;
	color: #555555;
	text-decoration: none;
}

a:hover {
	font-family: "Verdana", Arial, Helvetica;
	font-size: 11px;
	font-style: normal;
	line-height: 25px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
 
.innertube_navi{
	margin-top: 125px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	margin-right: 20px
	}

.innertube_main{
	margin-top: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	margin-left: 0px;
	margin-bottom: 30px;
	}


#page_basic {
	background: white;
	width:600px; 
	height:890px;
	text-align:left;
	vertical-align:top;
	}
	
#page_grafik {
	background: white;
	width:600px; 
	height:1430px;
	text-align:left;
	vertical-align:top;
	}

#headline {
	width: 600px;
	height: 112px;
	text-align:center;
	vertical-align:top;	
	}
	
#content {
	width: 600px;
	height: 216px;
	text-align:left;
	vertical-align:top;
	background-color:blue; 	
	}
	
#content_text { 
	position: absolute;
	margin-top:58px; 
	margin-left:50px; 
	width:210px; 
	height:156px; 
	background-color:red; 
}

#content_pic { 
	position: absolute;
	margin-top:41px; 
	margin-left:293px; 
	width:223px; 
	height:133px; 
	background-color:yellow; 
}


.line{ 
width: 500px;
height: 2px;
margin-top: 0px;
border-bottom:2px dotted #000000;
border-top:none;
border-left:none;
border-right:none;
}


hier das CSS für IE6 und IE7:
HTML: 
/* CSS Document */

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 142px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: black;
text-align:right;
}

#maincontent{
position: fixed;
top: 0; 
left: 142px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: black;
}

* html body{ /*IE6 hack*/
padding: 0 0 0 142px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

a:link {
	font-family: "Verdana", Arial, Helvetica;
	font-size: 11px;
	font-style: normal;
	line-height: 25px;
	font-weight: normal;
	color: #555555;
	text-decoration: none;
}
a:visited {
	font-family: "Verdana", Arial, Helvetica;
	font-size: 11px;
	font-style: normal;
	line-height: 25px;
	font-weight: normal;
	color: #555555;
	text-decoration: none;
}

a:hover {
	font-family: "Verdana", Arial, Helvetica;
	font-size: 11px;
	font-style: normal;
	line-height: 25px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}

.innertube_navi{
	margin-top: 125px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	margin-right: 20px
	}

.innertube_main{
	margin-top: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	margin-left: 0px;
	margin-bottom: 30px;
	}
 
#page_basic {
	background: white;
	width:600px; 
	height:890px;
	text-align:left;
	vertical-align:top;
	}
	
#page_grafik {
	background: white;
	width:600px; 
	height:1430px;
	text-align:left;
	vertical-align:top;
	}

#headline {
	width: 600px;
	height: 114px;
	text-align:center;
	vertical-align:top;	
	}
	
#content {
	width: 600px;
	height: 216px;
	text-align:left;
	vertical-align:top;
	background-color:blue; 	
	}
	
#content_text { 
	position: absolute;
	margin-top:58px; 
	margin-left:50px; 
	width:210px; 
	height:156px; 
	background-color:red; 
}

#content_pic { 
	position: absolute;
	margin-top:41px; 
	margin-left:293px; 
	width:223px; 
	height:133px; 
	background-color:yellow;
}

.line { 
width: 500px;
border:2px dotted #000000;
margin-left: 50 px;
}


der blaue DIV = #content
der rote DIV = #content_text
der gelbe DIV = #content_pic.

HILFE wäre super....lieben Dank

_xmouse
 
Hi,

celiadee hat gesagt.:
ich habe ein Problem mit den Massangeben bei der Formatierung von DIVs.

Im Explorer sitzen die Linie zu weit unten und die DIVs sind nicht korrekt ausgerichtet.

Wie muss ich bitte die Massangaben schreiben, damit IE die Die DIVs korrekt ausrichtet
Zum Vergrößern anklicken....

mit etwas Experimentierfreude hättest du dies auch selbst herausfinden können:

Code: 
#content_text {
        position: absolute;
        margin-top:58px;
        margin-left:50px;
        width:210px;
        height:150px;
        background-color:red;
}

.line {
width: 500px;
border:2px dotted #000000;
margin-left: 50px; /* Leerzeichen zwischen Wert- und Einheitenangabe entfernen */
}
Im übrigen muss im IE-spezifischen Stylesheet nicht der gesamte CSS-Code aus format.css wiederholt, sondern darin nur die Selektoren mit den CSS-Eigenschaften notiert werden, die für den IE angepasst werden müssen.

Desweiteren wird beim Includen kein vollständiges HTML-Gerüst in das Hauptdokument geladen, sondern nur, was sich im Dokumentkörper befindet.
 
Hallo Maik, dank Dir für Deine Antwort und die Tipps zum CSS und zum includen..;)

mit etwas Experimentierfreude hättest du dies auch selbst herausfinden können:
Zum Vergrößern anklicken....

Danke, mir war nicht klar dass das Problem bei IE darin liegt, dass er die Pixelangeben
naders interpretiert.

ich habe jetzt für #content_text und #content_pic andere Positionsangaben angegeben (im Prinzip 6Px nach oben verschoben.

für IE folgendes CSS:

Code: 
#content_text { 
	position: absolute;
	margin-top:50px; 
	margin-left:50px; 
	width:210px; 
	height:156px; 
	background-color:red; 
}

#content_pic { 
	position: absolute;
	margin-top:35px; 
	margin-left:293px; 
	width:223px; 
	height:133px; 
	background-color:yellow;
}

.line { 
width: 500px;
border:2px dotted #000000;
margin-left: 50px;
}

So sind die DIVs #content_text und #content_pic zwar innerhalb der Linien richtig ausgerichtet, aber die obere Linie sitzt zu tief bzw. der oberste DIV #content scheint ein paar Pixel höher zu sein. Siehe screenshot.

Sorry, ich schnalls nicht...:(
 

Anhänge

  • test.jpg
    test.jpg
    67,4 KB · Aufrufe: 39
hat sich erledigt, Linien lassen sich anscheinend nicht für alle Browser korrekt positionieren.

Hab das jetzt anders gelöst, und zwar mit DIVS und
"border-top: 1px solid #777777;"


Danke!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück