Seite 1 von 1

CSS Bug - Seitenrahmen DIV

Verfasst: 13.04.2007, 10:10
von kaisen
Vermutlich ist es garkein CSS Bug, sondern meine Doofheit.

Also folgendes Problem: Ich habe ein DIV Layout und möchte gerne drum herum ein DIV setzen mit einem Rahmen (border) links und rechts. Quasi al Abgrenzungs-trennstriche.

Ich habe dem DIV height:100% zugewiesen, da es sonst die Linien garnicht anzeigt. Das tut er jetzt wneigstens, aber leider nur für alles was beim Seitenaufruf gleich im Browser zu sehen ist. Wenn ich weiter nach unten scrolle verschwindet der Rahmen...


weiß wer rat?


hier die CSS Definition:

Code: Alles auswählen

#page { background-color: #fff; margin-left: -403px; position: absolute; top: 0; left: 50%; width: 806px; height: 100%; border-right: 1px solid #93b800; border-left: 1px solid #93b800;  }

Verfasst:
von

Verfasst: 13.04.2007, 11:25
von advisor
Nimm mal width: 808px.

So auf die schnelle. :wink:

Verfasst: 13.04.2007, 11:48
von kaisen
ja für den IE, der firefox tut dann aber 2 pixelchen dran hängen.

bei dem sind die breiten und längenangaben jeweils + paddings / border / margins. als oder rechnet die dan nnoch drauf...

Liegt soweit ich das verstanden hab an der unterschiedlichen Interpretation dex Box-Modellls...

Verfasst:
von

Verfasst: 13.04.2007, 12:08
von MonikaTS
kaisen hat geschrieben:ja für den IE, der firefox tut dann aber 2 pixelchen dran hängen.

bei dem sind die breiten und längenangaben jeweils + paddings / border / margins. als oder rechnet die dan nnoch drauf...

Liegt soweit ich das verstanden hab an der unterschiedlichen Interpretation dex Box-Modellls...
naja und an der unterschiedlihen Handhabung von Rahmen an sich

https://www.cssplay.co.uk/boxes/borders.html

darüberhinaus ist eine Angabe für ein div nie alleine zu betrachten
inweöchem Zusammenhang steht denn dieses position absolute?

wenn etwas verschwindet, dann schau ich zuerst beim peek-a-boo hack nach,
bei uns hätt man den Hack vermutlich :Kuckuck, verstecken spielen mit Babys genannt ;)

das seh ich aber aus einem div nicht

wenn irgendwo was floatet, dann kommt dazu, dass der IE floaten und position absolute und border irgendwie nicht mag,

height 100% ist wunderbar aber an und für sich so alleine irgendwie einsam;)

ein paar Anrgungen meinerseits vielleicht hilfts gleich,

lg

Verfasst: 13.04.2007, 12:20
von advisor
Sorry. habe mich wohl geirrt.

Bei mir schauts immer so aus (eigentlich gleich wie bei Dir):

.main {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 80%;
background-color: #ffffff;
}

border einfach noch einfügen.

Vielleicht hilft's ja.

Verfasst: 13.04.2007, 14:23
von kaisen
danke für die anregungen. ich werds nochmal genau ansehen.

ach ja um den kontext sich anzusehen. der fehler tritt beispielsweise bei folgender seite auf:
menorca-guide.de/menorca-insel.html

Verfasst: 13.04.2007, 16:09
von heinrich
Noch ein Tipp: Bei einer meiner Seiten kam die unterschiedliche Darstellung nur aus einer nicht korrekten DOCTYPE! Mit

Code: Alles auswählen

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">

gab es zwischen den Brausern praktisch keine Unterschiede mehr!

Verfasst: 13.04.2007, 20:50
von MonikaTS
Elemente, die man mit position absolute fixiert, sind absolute Herrscher,
absolute Herrscher wollen 1. mit anderen absoluten Herrschern nix zu tun haben, da gibts nur Krieg,

2. mit dem ganz gemeinen Volk, dass keine Position bezogen hat, nicht mal eine position relative gibt sich so eine position absolute niemals ab!

gewonnen hat den Krieg der position absolute der #main,
ich habe den zurechtgestutzt wie es sich für eine konservative webdesignerin gehört , denn es sollte immer nur einen geben und

übereinanderliegen sollten die kaum :oops: ;)

also:
#site da nimmste das height:100 wieder raus, völlig umsonst, versteht eh kaum ein Browser

bei #main muss nur mehr #main { width: 800px;} stehen
dann refresh mal


aber:

die Angabe pt bei der Schriftgröße verzeih ich Dir mein Lebtag niemals ... :robot:

die kommt aus dem Buchdruck!
im Internet gibt es px oder % oder em für Schriftgrößen

und so unter der Hand,
so ein derart kompliziert aufgebautes style.css tät ich mir niemals an ;)
es geht einfacher

viel Freud und lg

Verfasst: 13.04.2007, 23:37
von kaisen
@heinrich:
ja aber ich habe ja keinen XML validen Code (mit <br/> etc). habe gehofft das via CSS lösen zu können. so interpretiert der IE das ja im Quirks-Mode, oder wie sich das nennt...


@einfach:
Danke für die Auseinandersetzung mit meinem Problem!

- schriftgröße auf px geändert (hatte irgendwo mal gehört da ssei besser). naja im internet hört man vieles ;)
- einfach nur height raus und den main-tag verkleinert hats nicht gebracht. habe nun etwas herumgespielt. Ziel ist ja:

a) Die grüne Randlinie links und rechts komplett um den Inhalt zu setzen, also auch wenn man nach unten scrollt. Das tut es zwar jetzt, wenn aber der Inhalt nicht die gesamte Browseransicht füllt, dann hören die Linien einfach auf! Mit "min-height: 100%" tuts wenigstens der FF!
b) zwischen den grünen linie und den anderen Boxen (Head + Main) jeweils einen 3 px Breiten abstand zu haben.

Das einfachste wäre da sicher einfach eine Tabelle gewesen, aber Probleme sind ja dazu da um gelöst zu werden ;)

Aber dank euch allen! nen stückel weiter bin ich :)

Verfasst: 14.04.2007, 02:47
von MonikaTS
hi kaisen , das habe ich geschafft,
bloß Du hast eine derart verquickste - und wirklich hochkomplexe Strategie gewählt, die sehr anfänglich dafür ist, dass sie der alte IE 6 nicht versteht, aber der neuere IE6 schon,

Opera, Firefox und Flock , Konqueror haben meine Lösung geschluckt, hatte ja mir deine Seite geholt,
kann aber auch sein, weil ich alle kleinen Fehler im css ausgebessert hatte...

da mal en Strichpunkt nicht dort auch, ;)

lg

Verfasst: 14.04.2007, 09:27
von kaisen
naja ich hab mich halt stück für dich da drangemacht. die seite war auch alles in allem ein 1-tag projekt - mehr oder weniger ein testlauf.

habs mir browsershots getestet. also aktuell sind quasi fast alle browser recht zufrieden. bis auf IE 5, der hat noch ein Problem.

was stecken da denn noch für fehler drinne? bin für jeden Tipp dankbar....
das semilkolon am ende von CSS-Anweisungen ist doch quasi auch nicht notwendig...