(CSS) Geht nur in Firefox...

magnus

Moderator

Dabei seit: 02.03.2003

Beiträge: 2 439

1

Donnerstag, 17. Februar 2005, 16:03

Moin, folgendes.

Hab mal wieder Bock auf ne Seite gehabt...
Nun steht in der CSS-Datei u.a.:

	Quellcode
1 2 3 4 5 6 7 8 9 10 11	body { background: #ffffff; width: 700; padding: 25px 25px; font: x-small Verdana; text-align: center; color: #000000; font-size: 12px; }

So. Das Headerbild ist knapp 700 Pixel groß, Links und Rechts ist noch n kleiner Rand frei.
Im Firefox ist die Seite auch 700 Pixel breit, in Opera 640 und im IE ist es so wie wenn ich "width: *;" geschrieben hätte, sprich über die gesamte Breite.

Warum? Es müsste so gehen, Firefox zeigt es ja richtig an. Wie kann ich das optimieren damits in allen Browsern gleich aussieht?

maxtpayne

Kaiser

Dabei seit: 08.12.2002

Beiträge: 1 220

2

Donnerstag, 17. Februar 2005, 16:56

Wenn ich mich nicht Irre hat doch der IE Probleme mit bestimmten CSS sachen oder?!? Ich denke daran wirds wohl liegen, musst du halt ältere Versionstandarts von CSS verwenden.

Bei TopStylePro kann man extra einstellen das nur IE 6.0 unterstützte Befehle "angezeigt" werden. Kannste ja damit vieleicht mal probierern.

Greetz

MaxTPayne

magnus

Moderator

Dabei seit: 02.03.2003

Beiträge: 2 439

3

Donnerstag, 17. Februar 2005, 16:57

Ich kann natürlich auch allen IElern den Mittelfinger zeigen

Denn über die gesamte Breite wirkt einfach...Schwul. Passt nicht zu der Seite.
*seufz*
Dann darf ich wieder stundenlang rumrätzeln bis der Rotz läuft...

Matt

Foren Gott

Dabei seit: 17.09.2002

Beiträge: 5 573

4

Donnerstag, 17. Februar 2005, 17:05

Kann natürlich auch sein, dass du nicht dem Body eine width Angabe geben solltest sondern z.B. einem DIV Container. also so:

Quellcode

body {width:100%; height:100%; margin:0; padding:0;}
#divbox {
        background: #ffffff;
        width: 700;
        padding: 25px 25px;

        font: x-small Verdana;
        text-align: center;
        color: #000000;

        font-size: 12px;
}

	Quellcode
1	<div id="divbox">inahlt</div>

nyuuu

magnus

Moderator

Dabei seit: 02.03.2003

Beiträge: 2 439

5

Donnerstag, 17. Februar 2005, 19:05

Mmmmhhh.
Nun gehts im IE, aber nicht mehr im Firefox so richtig...*g* Siehe Anhang.

»magnus« hat folgendes Bild angehängt:

Alfons_G

Routinier

Dabei seit: 26.04.2003

Beiträge: 486

6

Freitag, 18. Februar 2005, 10:51

Da gibt es leider keine allgemeinverbindliche Lösung, da es die Pappnasen einfach nicht auf die Reihe kriegen, CSS korrekt zu interpretieren :-(.

Alfons

Matt

Foren Gott

Dabei seit: 17.09.2002

Beiträge: 5 573

7

Freitag, 18. Februar 2005, 14:26

Give me the code nananananana

btw, das willst du aus stargatebase machen? *argh

edit:
So, ich habs jetzt gefunden. Du Depp hast die width Angabe im Body net entfernt.

Es ging ja darum, nicht dem Body die Breite zuzuweisen weil der IE nicht damit umgehen konnte sondern eben einer DIV Box die im ganzen Body drinnen ist. Änder das mal.

BTW, thx für die passes

edit: und weil ich so nett bin

PHP-Quelltext

/* ----------------------------------------------- */

body {
        width:100%;height:100%;margin:0;padding:0;
}


#divbox {
        background: #ffffff;
        width: 700;
        padding: 25px 25px;

        font: x-small Verdana;
        text-align: center;
        color: #000000;

        font-size: 12px;
}


img {
        border: 0;
}

table {
        border: 0;
}


/* Bilder
---------------*/

.bild img {
        padding: 4px;
        border: none;
}



/* Links
----------------------------------------------- */
a:link {
        color: #526979;
        text-decoration: none;
}

a:visited {
        color: #526979;
        text-decoration: none;
}

a:hover {
        color: #D5DEE7;
        text-decoration: underline;
}

a img {
        border-width: 0;
}

/* Border
----------------------------------------------- */


.border {
        border: solid 1px #D5DEE7;
        border-top: solid 1px #D5DEE7;
        border-bottom: solid 1px #D5DEE7;
}
/* Header
----------------------------------------------- */
#header {
        width: 694px;
        height: 150px;
        margin: 0 auto 10px;
        border-top: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
        padding: 0;
}

div.login {
        position: absolute;
        left: 35px;
        top: 145px;
        text-align: right;
        height: 5px;
        width: 680px;
        color: #ccc;
        z-index: 1;
}
        div.login a:link {
                color: #fff;
                text-decoration: none;
        }

        div.login a:visited {
                color: #fff;
                text-decoration: none;
        }

        div.login a:hover {
                color: #ccc;
                text-decoration: underline;
}

img.head {
        width: 695px;
        height: 150px;
        z-index: -1;
}

#title {
        text-align: right;
        margin: 5px 5px 0;
        padding: 20px 20px .25em;
        border: 0px solid #eee;
        border-width: 0px 0px 0;
        font-size: 200%;
        line-height: 1.2em;
        font-weight: normal;
        color: #666;
        text-transform: uppercase;
        letter-spacing: .2em;
}

#description {
        text-align: right;
        margin: 0 5px 5px;
        padding: 0 20px 20px;
        border: 0px solid #eee;
        border-width: 0 0px 0px;
        max-width: 700px;
        font: 78%/1.4em Verdana;
        text-transform: uppercase;
        letter-spacing: .2em;
        color: #999;
}


/* Layout
----------------------------------------------- */
#content {
        width: 660px;
        margin: 0 auto;
        padding: 0;
        text-align: left;
}

#main {
        width: 480px;
        padding: 5px;
        float: left;
}

#sidebar {
        width: 150px;
        float: right;
}

#user {
        width: 669px;
        border-bottom: solid 1px #ccc;
        height: 20px;
        text-align: left;
        padding-left: 25px;
}

/* Headings
----------------------------------------------- */
h2 {
        margin: 1.5em 0 .75em;
        font: 78%/1.4em Verdana;
        text-transform: uppercase;
        letter-spacing: .2em;
        color: #999;
}

/* Posts
----------------------------------------------- */
.date-header {
        margin: 1.5em 0 .5em;
}

.post {
        margin: .5em 0 1.5em;
        padding-bottom: 1.5em;

}

.post-title {
        margin: .25em 0 0;
        padding: 0 0 4px;
        font-size: 140%;
        font-weight: normal;
        line-height: 1.4em;
        color: #526979;

}

.post-title a, .post-title a:visited, .post-title strong {
        display: block;
        text-decoration: none;
        color: #526979;
        font-weight: normal;
}

.post-title strong, .post-title a:hover {
        color: #333;
}

.post div {
        margin: 0 0 .75em;
        line-height: 1.6em;
}

p.post-footer {
        margin: -.25em 0 0;
        color: #ccc;
        border-bottom: 1px dotted #ccc;
}

.post-footer em, .comment-link {
        font: 78%/1.4em Verdana;
        text-transform: uppercase;
        letter-spacing: .1em;
}

.post-footer em {
        font-style: normal;
        color: #999;
        margin-right: .6em;
}

.comment-link {
        margin-left: .6em;
}



.post blockquote {
        margin: 1em 20px;
}

.post blockquote p {
        margin: .75em 0;
}

.post img {
        padding: 4px;
        border: solind 1px #cccccc;
}

/* diverses */
form input {
        border: solid 1px #cccccc;
        font-family: Verdana;
        font-size: 10px;
        background-color: #fff;
}

form.button {
        border: solid 1px #ccc;
        font-family: Verdana;
        font-size: 10px;
        margin: 3px 0 3px 0;
}

td.border {
        border-bottom: solid 1px #ccc;
}

/* Sidebar
----------------------------------------------- */
#sidebar ul {
        margin: 0 0 1.5em;
        padding: 0 0 1.5em;
        border-bottom: 1px dotted #ccc;
        list-style: none;
}

#sidebar li {
        margin: 0;
        padding: 0 0 .25em 15px;
        text-indent: -15px;
        line-height: 1.5em;
}

#sidebar div {
        border-bottom: 1px dotted #ccc;
}

/* Footer
----------------------------------------------- */
#footer {
        width: 660px;
        clear: both;
        margin: 0 auto;
}

#footer hr {
        display: none;
}

#footer p {
        margin: 0;
        padding-top: 15px;
        font: 78%/1.6em Verdana;
        text-transform: uppercase;
        letter-spacing: .1em;
}

Die Pappnase war im dem Fall wohl der Herr Judas/Wotan/Magnus

Und die BorderDivBox versteh ich auch net so Recht.
Das ganze ist ja wohl eine DIV Suppe...

http://css.fractatulum.net/sample/suppe/div_suppe1.htm

nyuuu

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Matt« (18. Februar 2005, 14:35)

magnus

Moderator

Dabei seit: 02.03.2003

Beiträge: 2 439

8

Freitag, 18. Februar 2005, 15:12

Zitat

Original von Matt
Give me the code nananananana

>> Wieso, hast doch schon

Zitat

Original von Matt

btw, das willst du aus stargatebase machen? *argh

>> Hab keine Andere Domain gefunden

Suche noch nen Namen...

Zitat

Original von Matt
edit:
So, ich habs jetzt gefunden. Du Depp hast die width Angabe im Body net entfernt.

>> Sag das doch

Zitat

Original von Matt

Es ging ja darum, nicht dem Body die Breite zuzuweisen weil der IE nicht damit umgehen konnte sondern eben einer DIV Box die im ganzen Body drinnen ist. Änder das mal.

>> Ok...

Zitat

Original von Matt

BTW, thx für die passes

>> Ich hoffe für dich du beziehst dich auf die .txt-Datei

Zitat

Original von Matt

edit: und weil ich so nett bin

>> Dangöööööööööö

Zitat

Original von Matt

Die Pappnase war im dem Fall wohl der Herr Judas/Wotan/Magnus

>> OK

Zitat

Original von Matt
Und die BorderDivBox versteh ich auch net so Recht.

>> ich...Auch nicht *g*

Zitat

Original von Matt

Das ganze ist ja wohl eine DIV Suppe...

http://css.fractatulum.net/sample/suppe/div_suppe1.htm

Tjo...

Gut danke, Thema hat sich erledigt.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »magnus« (18. Februar 2005, 15:20)

gaby*

Routinier

Dabei seit: 28.07.2003

Beiträge: 259

9

Samstag, 19. Februar 2005, 04:29

RE: (CSS) Geht nur in Firefox...

Zitat
Original von magnus
Moin, folgendes.

Hab mal wieder Bock auf ne Seite gehabt...
Nun steht in der CSS-Datei u.a.:
Quellcode
1
2
3
4
5
6
7
8
9
body {
        background: #ffffff;
        width: 700;
        padding: 25px 25px;

        font: x-small Verdana;
        text-align: center;
        color: #000000;
        font-size: 12px;  }
Wie kann ich das optimieren damits in allen Browsern gleich aussieht?

... indem du die Syntaxfehler verbesserst.

Im Gegensatz zum HTML-Attribut "background" wird die CSS-Eigenschaft "background" nur verwendet, wenn du mehrere Hintergrundeigenschaften gleichzeitig angeben möchtest, zb

background:url(bild1.gif) repeat-x center center

die Langform hierfür wäre

background-image:url(bild1.gif)
background-repeat; repeat-x
background-position: center center

In deinem style-sheet sollte es nun heißen

background-color: #ffffff

------------

width: 700;

hier fehlt die Schrifteinheit "px".

------------

font: x-small Verdana;
hier fehlt die generische Schriftfamilie "sans-serif"

font: x-small Verdana, sans-serif;

Grüße
gaby