nicht angemeldet
iFrame passt sich erst nach bewegen der Maus an (IE7)
Hallöchen und ein Frohes neues Jahr!
ich wurde damit beauftragt unserer Intranetseite ein neues Design zu verpassen.
Um die Seite dynamisch zu gestalten habe ich einen iFrame (ich weiß, der ist ganz doll bääh aber es gibt hier leider keine andere Möglichkeit...) eingebaut. Um den Iframe liegt ein Div da Firefox mir den Iframe immer unter das Menü geschoben hat. In IE und FF funktioniert es jetzt so wie es soll.
Im IE7 habe ich nun leider ein anderes Problem, das aber auch ohne den Div auftritt.
Wenn ich auf einen Link klicke, der den iFrame verändert zieht sich der iFrame enorm in die Breite und aus dem Bild her raus. Sobald ich aber mit der Maus von dem Link runter gehe passt sich der iFrame dem Rest an.
Hier mal die index.htm und die dazu gehörigen Styles:
<html>
<head>
<title>---</title>
<link rel="stylesheet" type="text/css" href="css/content.css">
</head>
<body>
<div id="logo">
<div id="bild"> </div>
</div>
<div id="wrapper">
<div id="headline">
<div id="img"></div>
</div>
<div id="mainheading">
<nobr>
<a href="---" title="---" target="_blank">---</a>
<a href="---" title="---" target="_blank">---</a>
</nobr>
</div>
<div id="underheading">
<nobr>
<a href="---" title="---" target="_blank">---</a>
<a href="---" title="---" target="_blank">---</a>
<a href="---" title="---" target="_blank">---</a>
</nobr>
</div>
<div id="bredcrumpnav">
<nobr>
<a class="bredcrump" href="---" target="content" title="---">---</a>
<a class="bredcrump" href="---" target="content" title="---">---</a>
</nobr>
</div>
</div>
<div id="trenner"> </div>
<div id="menue">
<ul id="nav">
<li><a href="aktuelles.htm" target="content">Aktuelles</a>
<li><a href="info.htm" target="content">Info Center</a>
<li><a href="software.htm" target="content">Software & Programme</a>
<li><a href="hinweise.htm" target="content">Hinweise der Systemverwaltung</a>
<li><a href="bedienungsanleitung.htm" target="content">Bedienungsanleitung</a>
<li><a href="links.htm" target="content">Links</a>
</ul>
<div class="untermenue">
<ul id="nav">
<li><a href="---" title="---">---</a></li>
<li><a href="---" title="---">---</a></li>
</ul>
</div>
<div class="untermenue">
<ul id="nav">
<li><a href="---" title="---" target="content">---</a></li>
</ul>
</div>
</div>
<div id="content2">
<iframe name="content" frameborder="0" src="aktuelles.htm"></iframe>
</div>
</body>
</html>
html {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:rgb(0,0,0);
height:95%%;
width:100%;
font-size:100.01%;
margin:0;
padding:0;
}
body {
font-size:0.8em;
background-color: rgb(255,255,255);
min-height:101%;
position:relative;
margin:0;
padding:0;
}
iframe {
height:80%;
width:100%;
padding-top:0,5em;
}
#logo {
float:left;
width:13.125em;
}
#bild {
background-image:url("../images/logo.jpg");
background-repeat:no-repeat;
width:9.141em;
height:8.75em;
margin-top:1.15em;
margin-left:3.375em;
}
#wrapper {
width:auto;
padding:0;
margin:0 0 0 14.975em;
color:rgb(255,255,255);
}
#headline {
width:auto;
padding:0;
margin:0 0 0.375em 0;
color:black;
}
#img {
color:black;
margin:0 0 0 1.0em;
width:auto;
height:4.70em;
background-image:url("../images/bildmotiv.jpg");
background-repeat:no-repeat;
background-color:rgb(204,204,204);
}
#mainheading {
background-color:rgb(204,204,204);
width:auto;
padding:0.25em 0.25em 0.375em 1.2em;
margin:0 0 0.375em 0;
}
#underheading {
background-color:rgb(204,204,204);
width:auto;
padding:0.25em 0.25em 0.375em 1.2em;
margin:0 0 0.375em 0;
}
#bredcrumpnav {
margin:0;
padding:0.25em 0.25em 0.375em 1.2em;
color:rgb(255,255,255);
text-align:left;
background-color:rgb(102,102,102);
font-weight:bold;
}
#trenner {
clear:both;
width:auto;
line-height:0.375em;
margin:0 0 0 -15.125em;
}
#content2 {
width:auto;
padding:0,5em 0,5em 0 0;
margin:0 0 0 11em;
/* background:white;*/
color:rgb(0,0,0);
}
#menue {
float:left;
width:191px;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
width: 191px; /* Width of Menu */
background-color:rgb(204,204,204); /* IE6 Bug */
color: black;
border-bottom:1px solid white;
}
ul#nav li {
position: relative;
list-style: none;
display: block;
}
ul#nav li a {
display: block;
font-weight : bold;
text-decoration: none;
color: black;
padding:0.35em 0.35em 0.35em 0.5em;
line-height:1.5em;
border:1px solid white;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li {
float: left;
height: 1%;
}
* html ul#nav li a {
height: 1%;
}
/* End */
ul#nav ul {
position: absolute;
display: none;
left: 190px; /* Set 1px less than menu width */
top: 0;
}
ul#nav li ul li a {
padding: 20px 50px;
}
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.sfhover ul ul, ul#nav li.sfhover ul ul ul {
display: none;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, ul#nav li.sfhover ul, ul#nav li li.sfhover ul, ul#nav li li li.sfhover ul {
display: block;
}
ul#nav li.hover {
background: rgb(255,161,0);
}
ul#nav li a:hover {
color: black;
background: rgb(255,161,0);
}
/* 1. Untermenue */
#nav ul.menu1 {
list-style:none;
}
#nav .menu1 li a {
background-color:rgb(204,204,204);
text-decoration:none;
font-weight:normal;
font-size:0.8em;
padding:0.2em 0.35em 0.2em 0.5em;
border-bottom:0;
}
#nav .menu1 li a:hover {
color: white;
background-color:rgb(102,102,102);
}
/*2. Untermenue */
#nav ul.menu2 {
list-style:none;
font-weight:normal;
}
#nav .menu2 li a {
background-color:rgb(204,204,204);
text-decoration:none;
}
#nav .menu2 li a:hover {
color:white;
background-color:rgb(153,153,153);
}
.untermenue{
background-color:rgb(204,204,204);
border-right:1px solid white;
margin-top:1.5em;
padding-top:0em;
padding-bottom:0em;
}
Ich hoffe ihr habt einen Tipp für mich ;)
Grüße
Merlin
P.S. Da ich nicht so die Ahnung von CSS habe (bisher mussten Tabellen für das Design herhalten), habe ich den Stylesheet und den Grundaufbau aus einer Vorlage genommen und für meine Zwecke angepasst.
P.P.S. Gehört das nun zum Themenbereich Browser, CSS, Design/Layout oder doch Html?!
-
Lieber Merlin,
ich vermute mal, dass sich die relative Breite des <iframe> auf sein Elternelement bezieht, welches ja width:auto hat...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallöchen,
wie war das noch gleich mit dem Wald und den Bäumen ;)
Ich hab an allen Werten rumgespielt aber nicht an dem width:auto ...
Jetzt muss ich nur noch die anderen Kleinigkeiten ausbügeln.Danke Felix!
-