Wirkt overflow:hidden nur horizontal?

Scoon · 02. März 2007

Hallo,

durch die unterschiedlichen größen eines IFrames im IE und im FF habe ich für den Body der HTML-Datei die Anweisung overflow:hidden vergeben. Leider zeigt der IE immer noch den vertikalen Scrollbalken an. Wirkt overflow:hidden etwa nur horizontal?

Alternativ wäre es natürlich noch besser zu wissen, wie ich die unterschiedlichen Maße zwischen IE und FF gebacken bekomme. Wie bekomme ich die Iframes gleich groß?

Scoon

Itgive · 02. März 2007

Ich glaub das der IE immer die scrollleiste hat wobei ich ihn net oft verwende...
overflow:hidden; müsst aber trozdem klappen.

Code:

Alternativ wäre es natürlich noch besser zu wissen, wie ich die unterschiedlichen Maße zwischen IE und FF gebacken bekomme. Wie bekomme ich die Iframes gleich groß?

unterschiedliche browser zeigen manchmal unterschiedliches an...
wenn es unterschiedlich aussieht kannst du ja unterschiedliche styles verwenden:
für die ganze seite:

PHP:

<style type="text/css">
.frame{meine einstellung}
</style>

für ie

PHP:

<!--[if lt IE 7]>
<style type="text/css">
.frame{meine einstellung}
</style>
<![endif]-->

Scoon · 02. März 2007

Ich habe mit dieser Anweisung noch nie gearbeitet und verstehe ihre Funktionsweise auch nicht ganz. Müsstest Du nicht noch den Pfad für die Alternative css-Datei angeben? Aber selbst wenn ich das mach, zeigt der Browser plötzlich gar nichts mehr an.

Code:

<!--[if lt IE 7]>
<style type="text/css"> <style type="text/css">@import url(duddels_ie.css);</style>
<iframe src="html/start.html" width="656" height="100%" name="con" cellpadding="0" cellspacing="0" scrolling="auto">
</iframe>
  <![endif]-->

Itgive · 03. März 2007

ne das iframe separat:

PHP:

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

<iframe src="html/start.html" width="656" height="100%" name="con" cellpadding="0" cellspacing="0" scrolling="auto" id="iframe">
</iframe>

Scoon · 07. März 2007

Habe ich probiert. Funktioniert leider auch nicht.

slosd · 07. März 2007

Das ist hier genauer beschrieben:
SELFHTML: Stylesheets / CSS-basierte Layouts / Browserweichen

bine · 08. März 2007

Du könntest der Seite im iframe eine feste Breite zuweisen, die schmaler als der iframe ist.

Oder du bringst den IE in den Quirks-Modus.

oder mit overflow ginge das per overflow-x:hidden was aber nicht valide ist.

Scoon · 08. März 2007

@sLost
Danke, das habe ich mir bereits angesehen und es danach ausprobiert. Leider ohne Erfolg.

@bine
Das mit der Fensterbreite hatte ich so als Notlösung erst einmal eingestellt, aber es kann nicht die Endgültige Variante darstellen. Ich denke mal im Quirksmodus ist die Seite bereits (siehe Code unten). overflow:hidden ist bereits eingestellt, er ignoriert es halt bloß in der vertikalen Ausdehnung.

Hier mal der komplette HTML-Code (wenn ich das als HTML-Code im Eingabefenster hier im Forum deklariere, ignoriert er die Seitenumbrüche.

):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="author" content="Johannes">
<meta name="keywords" content="Duddels, Animation, 3D, Computer, Kinder, Filme">
<base target="con">
<link href="lib/duddels.css" rel="stylesheet" type="text/css">
<!--[if gte IE 5.5]>
    <style type="text/css">@import url(""../libduddels_ie.css");</style>
  <![endif]-->
</head>

<body style="padding:0px; margin:0px;">

<div class="duddel0">
<img src="../img/duddels.gif" alt="Duddels" usemap="#duddels" border="0">
<map name="duddels">
    <area shape="poly" coords="240,245,438,217,446,277,247,305" href="html/start.html" alt="Start">
 </map>
</div> 

<div class="duddel1"><img src="img/anna.gif" border="0" alt="anna"></div>
<div class="duddel2"><img src="img/fritz.gif" border="0" alt="fritz"></div>
<div class="duddel3"><img src="img/max.gif" border="0" alt="max"></div>
<div class="duddel4"><img src="img/olga.gif" border="0" alt="olga"></div>
<div class="duddel5"><img src="img/sven.gif" border="0" alt="sven"></div>

<table class="table">
<tr>
<td class="box1" width="80"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box3"> </td>
<td class="box4"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
</tr>
<tr>
<td class="box3"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
</tr>
<tr>
<td class="box1"> </td>

<td class="linkbox" rowspan="3">
<a href="html/willkommen1.html">Duddels</a><br>
<a href="html/produktion1.html">Produktion</a><br>
<a href="html/folgen.html">Folgen</a><br>
<a href="html/download.html">Download</a><br><p><br><p>
<a href="html/kontakt.html">Kontakt</a></p>
</td>

<td class="textbox" rowspan="4" colspan="8">

<iframe src="html/start.html" class="iframe" name="con" scrolling="no">
</iframe>


</td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box1"> </td>
</tr>
<tr>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
</tr>
<tr>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box1"> </td>
</tr>
<tr>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
</tr>
<tr>
<td class="box2"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
</tr>
<tr>
<td class="box1"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
<td class="box1"> </td>
<td class="box2"> </td>
<td class="box1"> </td>
<td class="box1"> </td>
<td class="box3"> </td>
</tr>
</table>
<span style="padding-left:880px;">© WFP Audio-Video-Produktionen</span>

</body>

</html>

...und die CSS-Datei:

Code:

body				{color: #ffffff; font-size: 10pt; line-height:1.8em; background-color: #3A4D98; 
				text-align:left; font-family:Helvetica,Arial,Sans-serif; margin:0px; padding:20px 30px 0px 30px; }

.table			{border-collapse:collapse; border:2px solid #0D325A; table-layout:fixed;}
.box1			{width:80px; height:80px; border:1px solid #0D325A; background:#477AC8; } 
.box2			{width:80px; height:80px; border:1px solid #0D325A; background:#3C61AF; }
.box3			{width:80px; height:80px; border:1px solid #0D325A; background:#478AC8; }
.box4			{width:80px; height:80px; border:1px solid #0D325A; background:#6F9FE7; }

.duddel0		{position:absolute; top:35px; left:220px; width:340px; height:60px; z-index:1;}
.duddel1		{position:absolute; top:135px; left:885px; width:52px; height:52px; z-index:1; border:1px solid #ffffff; background:#0D325A; text-align:center; padding:4px;}
.duddel2		{position:absolute; top:215px; left:885px; width:52px; height:52px; z-index:1; border:1px solid #ffffff; background:#0D325A; text-align:center; padding:4px;}
.duddel3		{position:absolute; top:295px; left:885px; width:52px; height:52px; z-index:1; border:1px solid #ffffff; background:#0D325A; text-align:center; padding:4px;}
.duddel4		{position:absolute; top:375px; left:885px; width:52px; height:52px; z-index:1; border:1px solid #ffffff; background:#0D325A; text-align:center; padding:4px;}
.duddel5		{position:absolute; top:455px; left:885px; width:52px; height:52px; z-index:1; border:1px solid #ffffff; background:#0D325A; text-align:center; padding:4px;}

.linkbox		{width:80px; height:80px; border:1px solid #0D325A; background:#6F9FE7; text-align:right; vertical-align:top; padding:40px 5px 0px 0px; }
.textbox		{width:640px; height:320px; border:2px solid #0D325A; background-image:url(img/textbox.gif); background-repeat:repeat; }
.text			{background-image:url(img/textbox.gif); background-repeat:repeat; }
.iframe			{width:656px; height:100%; padding:0px; border-spacing:0px; overflow:hidden;}

.bottom			{vertical-align:bottom;}

a:link 			{text-decoration:none; color: #FFFFFF;}
a:active 		{text-decoration:none; color: #C8DCF8; font-size:11pt;}
a:visited 		{text-decoration:none; color: #FFFFFF; }
a:hover 			{text-decoration:none; color: #1EFF00; font-size:11pt;}

html, body		{scrollbar-face-color:#24456E;
					scrollbar-shadow-color:#1D3149;
					scrollbar-highlight-color:#9EC9F1;
					scrollbar-3dlight-color:#FFFFFF;
					scrollbar-darkshadow-color:#000000;
					scrollbar-track-color:#6EA6DA;
					scrollbar-arrow-color:#6EA6DA;
				}

bine · 08. März 2007

overflow-x: hidden; in den body

Scoon · 08. März 2007

Ich hatte es so verstanden, dass overflow für das Element gilt, in dem es steht. In diesem Fall also für den iFrame. Und müsste es nicht zumindest overflow-y heißen, da es sich ja um die vertikale Scrollleiste handelt? Summa Summarum müsst die Angabe von x oder y eigentlich egal sein, da das Argument "overflow:" für beide gilt. Doch selbst wenn ich es in den body setze funktioniert es nicht. Einzig wenn ich scrolling auf "no" setze, verschwindet der Balken. Das ist jedoch nicht das Ziel!

Außerdem bereitet mir die Breite des Fensters noch so einige Probleme. Da der Conditional Comment nicht funktioniert, habe ich es über "width:100%" versucht, was beim Firefox zur Sprengung des Rahmens führt...

... und im IE lässt er den Bereich für die Scrollleiste frei.

Verwende ich feste numerische Werte, haut es bei einem der Beiden Ansichten nicht hin. Gibt es irgend eine Lösung für dieses Dilemma?

Scoon

bine · 08. März 2007

uups sorry ich bin grad bisschen unkonzentriert.
scrolling="no" im iframe

Scoon · 08. März 2007

Bin gerade ein wenig verwirrt. Scrolling "no" berhindert doch das Scrollen, was ein Problem wird, wenn ich mal scrolen will. Und wieso funktioniert das Argument overflow nicht? Habe ich es falsch angewandt, oder ist das ein Bug?

Wirkt overflow:hidden nur horizontal?

Scoon

New member

Itgive

New member

Scoon

New member

Itgive

New member

Scoon

New member

slosd

Guest

bine

Lounge-Member

Scoon

New member

bine

Lounge-Member

Scoon

New member

bine

Lounge-Member

Scoon

New member