✔ Iframe problem im IE

[layla]

Hi!

Ich hab ein Iframe in ein div eingebaut. Firefox zeigts normal an. Bei IE ist das Iframe zu groß und steht über mein Design raus. Wäre nett wenn mir wer helfen könnte.

  <div id="content"> 
   <iframe src="http://www.edu.uni-klu.ac.at/~dtschisc/homepage/gbuch" width="455" height="640" name="f" frameborder="0" scrolling="auto"> </iframe> 
    </div>

	#content{
		margin-left: 244px;
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 10px;
			background: transparent url(Bilder/pension_03.gif) no-repeat;
	font-family: verdana;
	font-size: 10pt;
	}

Hab schon probiert das margin-left zu ändern bringt aber nix. Im Firefox passts so perfekt.

 

[Maik]

Ich kann keinen Unterschied feststellen, wenn ich den Code in eine (leere) Testseite einbaue.

In allen Browsern ist das iframe-Element 455*640 Pixel groß.

• Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000

 

[layla]

Komisch, bei mir hauts nicht hin.
Habs dann auf einem andern Pc getest da schaut alles wieder ganz anders aus. So als würde das css nicht gehen.

 

[Maik]

Wenn die Seite auf drei Systemen unterschiedlich dargestellt wird, solltest Du besser den kompletten HTML- und CSS-Code zeigen, oder einen Link zu der Seite nennen, damit man sich von der Situation ein Gesamtbild machen kann.

 

[layla]

Das Problem kannst du dir hier ansehen.

 

[franz007]

Kann nichts erkennen.

PS:
Der Schatten der Schrift beim oberen Anfahrtsplan ist sehr störend.

 

[Maik]

@ franzspam: der iFrame überlappt (im IE) auf der rechten Seite den grauen Rahmen.

@ layla: der iFrame wird nicht, wie von Dir vermutet, grösser dargestellt, sondern befindet sich durch die CSS-Eigenschaft float:right am rechten Rand des DIV#wrapper. Der graue Rahmen in der dazugehörigen Hintergrundgrafik ist aber um 10 Pixel eingerückt.

Hier der korrigierte CSS-Code:

body
{
background: #FFB05C;
margin: 0;
padding:0;
text-align: center;
}

#wrapper
{
background: url(Bilder/bg.gif) repeat-y;
text-align: left;
width: 720px;
margin: 0 auto;
}

#header
{
width: 720px;
height:208px;
/*background: transparent url(Bilder/pension_01.jpg) no-repeat;*/
}

#nav
{
width:244px;
height:459px;
background:transparent url(Bilder/pension_02.jpg) no-repeat;
float: left;
padding-top: 95px;
}

div.menue
{
background: url(Bilder/button.gif) no-repeat;
width:173px;
height:30px;
margin-left:57px;
}

div.menue a
{
padding-left:40px;
padding-top:4px;
display:block;
text-decoration:none;
}

div.menue a:link, div.menue a:visited
{
font-family: verdana;
font-size: 13pt;
text-decoration:none;
color: #000000;
}

div.menue a:hover
{
color:white;
}

div.menue a:active
{
color:black;
}

#content
{
float:right;
background: transparent url(Bilder/pension_03.gif) no-repeat;
font-family: verdana;
font-size: 10pt;
margin: 0 14px 0 0; /* Außenabstand oben rechts unten links */
padding: 0;
}

#footer
{
clear: both;
width: 720px;
height:54px;
background: transparent url(Bilder/pension_04.gif) no-repeat;
}

h1 { font-size: 18pt; }
A:link { font-family: verdana; font-size: 10pt; text-decoration:none; color: #E4831B;}
A:hover{ font-family: verdana; font-size: 10pt; text-decoration:none; color:#fe8606;}
A:active{font-family: verdana; font-size: 10pt; text-decoration:none; color:#fe8606;}
A:visited{ font-family: verdana; font-size: 10pt; text-decoration:none; color:#bd7325;}
table{font-family: verdana; font-size: 8pt; border-collapse:collapse; empty-cells:hide; }
td { border:1px solid black; }

 

[layla]

Danke, für den Code.

Für den Schatten kann ich nix hab die Karte so bekommen, wurde von der alten Homepage übernommen.

Geht leider nicht mit margin 0.