Antworten zum Thema „Textdarstellung von Div in IE anders als in Firefox“

Darkwing-dave · 01.11.2006

Hab eine Div-Box gemacht und Text hinein geschrieben... jetzt sieht das im IE ganz anders aus als im Firefox... Kann mir einer sagen, wo ich welchen Fehler mache? (Seh vor lauter Bäumen den Wald nicht mehr....)

Hier Bild:
http://www.myimg.de/?img=ieffe46.jpg

(Die Div-Box heisst contact..)

Hier Quelltext:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="..." />
<meta name="description" content="...." />
<meta name="keywords" content="....." />
<style type="text/css"><!--
body 
{
font-family:Verdana, Arial, sans-serif;
font-size:100.1%;
background-color:black;
text-align:center;
margin-top:20px;
}
h1 {font-size:1.4em;color:#000000;margin-bottom:0px;}
h2 {font-size:1.2em;color:#000000;}
h3 {font-size:1.0em;color:#000000;}
h6 {font-size:0.6em;color:#eeeeee;font-weight:lighter;}

a:link, a:visited, a:active, a:hover
	{ 
	text-decoration:underline;
	font-weight:normal;
	color:#ff0000;
	font-size:0.7em;
	}
a:active, a:hover
	{ 
	color:#009999;
	}
a.menu 	{
	display:block;
	padding:3px;
	border-top:1px solid #000;
	background-color:#737994;
	text-align:left;
	color:#eeeeee;
	text-decoration:none;
	 }
a.menu:link, a.menu:visited
	{ 
	color:#eeeeee;
	background-color:#737994;
	text-decoration:none;
	font-weight:bold;
	}
a.menu:active, a.menu:hover
	{ 
	color:#737994;
	font-weight:bold;
	background-color:#eeeeee;
	}

#container
{
width:740px;
height: 530px;
margin: 0px auto;
text-align:left;
background-color:#cccccc;
border:1px solid #000000;
}
#title {
	height:80px;
	border-bottom:1px solid #000;
	background-image: url(bilder/banner.jpg);
	background-repeat: no-repeat;
}

#left {
background-color:#cccccc;
width:145px;
height:430px;
float:left;
margin-top:10px;
margin-left:8px;
}
	.menutitle{
	font-weight:bold;
	text-align:left;
	margin:0px;
	padding:2px;
	}
	.menucontainer {
	border:1px solid #000;
	background-color:#7b7d8e;
	width:125px;
	margin:10px;
	}

#content {
border:1px solid #000000;
background-color:#eeeeee;
width:auto;
height:430px;
float:left;
margin:10px 10px 10px 10px;
}

#contact {
border:1px solid #000;
background-color:#7b7d8e;
width:124px;
margin-top:80px;
margin-left:10px;
margin-right:0px;
padding:1px;
}

//--></style>
<title>Wiesehoeckli Flumserberg</title>
</head>
<body>
<div id="container">
  <div id="title"> 
 </div>

 <div id="left">
  <div class="menucontainer">
   <p class="menutitle">Menu</p>
   [url="#"]Wieseh&ckli[/url]
   [url="#"]Preise/Anfahrt[/url]
   [url="#"]Reservation[/url]
   [url="#"]Aktivit&ten[/url]
   [url="#"]aktuelles Wetter[/url]
   [url="#"]Gallerie[/url]
   [url="#"]Links[/url]
  </div>

<div id="contact">
<h6>Zeile 1

Zeile 2

Zeile 3

Zeile 4
</h6>


</p>
<h6>Zeile 5 nach Abstand



</p>
Zeile 6 nach Abstand

Zeile 7</h6>
</div>

 </div>

 <div id="content">
<iframe src="iframe1.htm" name="iframe" scrolling="auto" allowtransparency="true" width="545" height="430" margin="10" boder="0"></iframe>
</div>
 <br style="clear:both;" />
</div>
</body>
</html>

BlackIronHeart · 01.11.2006

der text in der box wird im FF mittig dargestellt.
<grübel>
müsste nun selber schaun wie man den text
innerhalb der box dazu bewegen könnte
links/oben zu beginnen.
bei tabellen gibt es den ( wenn auch unschönen ) <tr valign="top">

bin in html nicht sonderlich bewandert
aber vielleicht reicht es ja als denkanstoss?

[edit]
du könntest aber auch die grösse der box anpassen

[edit2]
öhm...ich probier grad auch mal ein wenig mit dem code rum.
das verhalten ist echt ein wenig eigenartig...
liegt wohl am <h6>? *mal weiter rumprobiert

[edit3]

Code:

<div id="contact">
Zeile 1

Zeile 2

Zeile 3

Zeile 4



</p>
<h6>Zeile 5 nach Abstand



</p>
Zeile 6 nach Abstand

Zeile 7</h6>
</div>

erzeugt diese verschiebung nicht mehr...

Quaese · 01.11.2006

Hi,

zeichne mal die Überschriften (H6) innerhalb des Elementes #contact mit CSS so aus, dass sie keinen oberen Abstand (innen und außen) besitzen.

Code:

#contact h6{ margin-top: 0; padding-top: 0;}

Vielleicht hilft das weiter.

Ciao
Quaese

sanji · 01.11.2006

hi,

ich habe momentan ein sehr ähnliches Problem mit einer contentbox. der abstand des textes zum oberen rand des div is irgendwie zu groß ...

Wahrscheinlich gibts für beide Probleme die gleiche Lösung also schließe ich mich diesenm Thread einfach mal an

[klick fürs bildchen]

Code:

<div style="position:absolute; top:224px; left:156px; width:496px; height:21px; background-image:url(images/content_box_head.jpg); padding:2px;">
                 	<h1> This is just a test heading !
                         </h1>
                 </div>
              
                 <div style="position:absolute; top:245px; left:156px; width:494px; height:250px; border:1px solid #bababa; background-color:#efefef; padding:2px;">
                 	

Lorem ipsum nam quodsi (habs mal abgekürzt...)
                         </p>
                 </div>

Der code is noch bissl naja durcheinander, aber doch verständlich denk ich...

mfg, sanji

EDIT: wie schnell das hier mit dem support doch immer geht. ich schreibe noch fröhlich meine code und schon findet der Quaese die richtige Lösung. Also mir hats geholfen, DANKE !

BlackIronHeart · 01.11.2006

Quaese schrieb:
Hi,

zeichne mal die Überschriften (H6) innerhalb des Elementes #contact mit CSS so aus, dass sie keinen oberen Abstand (innen und außen) besitzen.

Code:

#contact h6{ margin-top: 0; padding-top: 0;}

Vielleicht hilft das weiter.

Ciao
Quaese

yep...auch bei dem anderen code hats geholfen

Darkwing-dave · 01.11.2006

Quaese schrieb:
Code:

#contact h6{ margin-top: 0; padding-top: 0;}

Vielen Dank Quase!!!
habe einfach bei der definition von h6 noch margin + padding mit 0-Wert angehängt...
Jetzt wirds endlich bei beiden richtig dargestellt!!! !!--)