XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   3 Column Float IE,FF,Opera hui, Safari, Konq. Pfui.... (http://xhtmlforum.de/showthread.php?t=35605)

dablake 29.05.2005 12:28

3 Column Float IE,FF,Opera hui, Safari, Konq. Pfui....
 
Hallo zusammen, hatte folgendes Problem schonmal in nem anderen forum geposted, deshalb ist es in englisch....

Prinzipiell geht es um folgendes:

3 Column CSS Design, welches unter Internet Explorer, Mozilla, Firefox, Opera so aussieht wie es beabsichtigt war und leider unter Safari und Konqueror total rumzickt.

So isses ok[ in IE, FF und OP....

und das macht leider der safari draus....



//_______________________________ Original Post_____________________________


Hi there, i have quit some troubles getting a 3 columns css layout working properly under Safari and Konqueror.

In IE, Firefox and Opera it works fine,

in Safari an Konq the Middle and right are moved below the left one.

Here is how the site should look right.

Hereis how safari mess it up.

Here is the basic layout of the site:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<link rel="stylesheet" href="layout_all.css" media="screen">
<link rel="stylesheet" href="layout_01.css" media="screen">
</head>

<body>
<div class="wrapper">

<div class="top">/// HOLDS THE LOGO PIC ///</div>

<div class="outer">
    <div class="inner">
          <div class="menu">/// MENU ///</div>
          <div class="center">/// USUALLY JUST HOLDS ANOTHER PIC ///</div>
          <div class="right">/// HOLDS TEXT ///</div>
          <div class="clear">/// JUST GETS RID OF FLOAT ///</div>
    </div>

</div>

<div class="bottom">/// WELL, BOTTOM ///</div>
<div id="language">/// POSITIONED ABSOLUTLY; FUX UP AS WELL ///</div>
</body>

</html>

And here the CSS:

CSS-FILE: LAYOUT_ALL (sometimes i differ the look (just 2 cols, thats why the CSS is seperated in 2 files...))
Code:

.wrapper
{
min-width: 400px;
border: 1px solid white; margin: 0 -1px;
width: 760px;
  margin-right : auto;
  margin-left : auto;
  margin-top : 25px;

}
.top {
height: 145px;
width:  760px;


}

.bottom {

background-color: #000;
width: 760px;
height: 50px;
}

.menu {
        width: 150px;              /* left column width */
        margin-left: -150px;      /* _negative_ left column width */
        height: 300px;
        float: left; position: relative; z-index: 4;
        font-weight: 900;
        font-size: 175%;
        line-height: 25px;
        text-indent: -35px;
        overflow: visible;
        background: #fff;
}


.right {
        height: 300px;
        background: #fff;
        float: left; position: relative; z-index: 5;
        padding: 0px 15px 0px 0px;
        overflow: auto;
}

.center
{
        height: 300px;
        background: #fff;
        float: left; width: 100%; position: relative; z-index: 3;
        overflow: auto;
}

#language{
 background: #000;
 color: #fff;
 position:absolute;
 top:5px; left:5px;
}

.inner { margin: 0; width: 100%; }
.clear { clear: both; }

/////////////////////////////////////////////////////////////////////
CSS-FILE LAYOUT_01

.outer {
        border-left-width: 150px;  /* left column width */
        border-left-color: #fff;  /* left column colour */

        border-right-width: 365px; /* right column width */
        border-right-color: #fff;  /* right column colour */

        background-color: #fff; /* center column colour */

        width: auto; border-left-style: solid; border-right-style: solid;
        height: 300px;
}

.right {
        width: 350px;              /* right column width */
        margin-right: -365px;      /* _negative_ right column width */
}

I have choosen that CSS-Layout because it was the first one that did not "squezzed" the content when narrowing the window.

Does anyone know how to get that Layout work with Safari too?!

regards, blake[/url]

die_sarah 29.05.2005 12:34

<div class="wrapper"> schließen?
Einfaches validieren hätte dir auch diese Lösung gebracht? ;)

Wenn es das nicht ist gib doch mal bitte einen Link zur gesamten Seite. :D

Die Sarah

dablake 29.05.2005 13:06

Wäre fein, wenns wirklich nur ein nicht geschlossender div wäre...

Laut browsershot is des Problem leider immernoch da.

Hast recht, ich sollte das ding erstmal validieren, vieelcith find ich den fehler dabei von ganz alleine...

Hier is der Link zur Seite.

Wenn ht.access an:

login: gast
pass: temppass

dablake 29.05.2005 15:53

So,
html und css ist nun komplett validiert,

bis auf die Scrollbar Anpassungen, die nur der IE kennt, geht alles sauber durch.

Der nichtgeschlossende Div war es leider nicht.

Habe den language-div rausgeschmissen in der Hoffnung, das die absolute Positonierung die Fehlerquelle ist. hat leider nichts gebracht, zumindest sieht die html datei jetzt anders aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<link rel="stylesheet" href="layout_all.css" media="screen">
<link rel="stylesheet" href="layout_01.css" media="screen">
</head>

<body>
<div class="wrapper">

<div class="top">/// HOLDS THE LOGO PIC ///</div>

<div class="outer">
    <div class="inner">
          <div class="menu">/// MENU ///</div>
          <div class="center">/// USUALLY JUST HOLDS ANOTHER PIC ///</div>
          <div class="right">/// HOLDS TEXT ///</div>
          <div class="clear">/// JUST GETS RID OF FLOAT ///</div>
    </div>

</div>

<div class="bottom">/// WELL, BOTTOM ///</div>

</div>

</body>
</html>

Gruß blake

fricca 29.05.2005 17:25

Mir erschließt sich gerade nicht, warum du eine derart komplizierte Konstruktion mit breiten Rahmen und mit negativem margin darüber positionierten Elementen wählst. Sowas braucht man doch "normalerweise" nur, wenn man das Verhalten von gleich langen Spalten vortäuschen will. Und da du eine feste Höhe verwendest, erübrigt sich das.
Durch diese Angabe passt sich auch in der Breite nichts mehr an (width "überschreibt" min-width):
Code:

.wrapper
{
min-width: 400px;
width: 760px;
}

Welche Funktion hat das div .inner?



Zu deinem Problem:
Leider kann ich momentan nicht mit Safari testen...
Ich würde zunächst versuchen, überflüssige Breitenangabe rauszulassen:
width:100% für .center
width:auto für .outer
Dann vielleicht noch float:left für .right weglassen.

Aber, wie schon geschrieben, IMHO ist dein Layout auch einfacher zu lösen...

Grüße
fricca

dablake 29.05.2005 18:43

Naja, hatte mir bei ALA und co. Beiträge zum theman durchgelesen und dann die Methode gewählt, die mir sinnig erschien.

Noch ne Ecke komplizierter wurde es ,dadurch, dass ich ein "Inhalt zentriert darstellen" drumherum gelegt habe (deswegen Wrapper/outer/inner...)

Problem scheint aber inzwischen behoben zu sein.

Habe HTML und CSS validiert und hierbei einige kleinere fehler behoben (von denen ich aber nicht glaube, dass sie das PRoblem waren.)

Danach hab ich noch den ABSOLUT POSITIONIERTEN <div id="language"> entfernt, dieser wurde in Safari und Konqueror ebenfaqlss an der komplett falschen stelle dargestellt.

und siehe da: Seite läuft auch unter KonQueror so wie es beabsichtigt war, denke/hoffe, dass sie es im safari auch tut (wenn icapture wieder läuft werd ich des chekken..)

Danke für euere Bemühungen,

blake


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:28 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019