CSS border-style:solid / none verändert darstellung
0 0 0 0 0 0 1 
Jonathan
0
0
CSS border-style:solid / none verändert darstellung
Hallo Liebes SELFHTML-Forums-Team,
mir ist eben beim arbeiten ein merkwürdiges Verhalten der Div-Element Darstellung im Fx aufgefallen:
Ich habe zwei in einander Verschachtelte Div Elemente.
beiden sind über css formatiert.
im Elternelement ist ein rahmen gesetzt 1px und solid.
wenn ich jetzt das solid in none verändere verrutscht irgendwie das innere Element un das Hintergrundbild des Äußeren.
Habt ihr eine Idee wo ran das liegen könnte?
oder steh ich grad nur aufm schlauch und übersehe was?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="copyright" content="e:cue, 2008">
<meta http-equiv="content-language" content="de">
<meta name="author" content="e:cue">
<title>e:cue - lighting control</title>
<style type="text/css">
body
{
font-family: Verana,Arial,Helvetica,sans-serif;
font-size: 62.5%; /* Resets 1em to 10px */
line-height:120%;
background-color: rgb(218,218,218);
margin: 0px;
padding: 0px;
}
.newbutton
{
background-image: url(button_200x64_blank_dark.png);
background-repeat: no-repeat;
width: 222px;
height: 86px;
cursor: pointer;
margin: 0px;
padding: 0px;
border-color: rgb(255,0,0);
border-width: 1px;
border-style: none;
}
.newtext
{
color: rgb(200,200,200);
font-size: 20px;
text-align: center;
margin-top: 33px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
border-color: rgb(0,255,0);
border-width: 1px;
border-style: solid;
}
</style>
</head>
<body>
<div class="newbutton" onmousedown="GotoCue('rgbDrops','reddrops');">
<div class="newtext">Red</div>
</div>
</body>
</html>
Leuchtende Grüße
Stefan
-
Hi,
Du klaust deinem Aufbau ja einen Pixel wenn du die border mit 1px rausnimmst. Dadurch verschiebt sich alles.Gruß
-
Hi,
danke für deine Antwort!Es handelt sich leider nicht nur um den 1nen Pixel.
ok also ich weiß wo die höhe her kommt
kann es mir aber trotzdem nicht erklären:
das innere div hat einen margin-top von 33 (damit der Text in der Mitte des Elements steht...)
und scheinbar wird dieses margin-top wenn der rahmen vom äußeren Div weg fällt auf dieses Bezogen und nicht mehr auf das Innere Element?!
im äußeren Element hab ich ja ganz klar margin: 0px; gesetzt!
oder liegt es daran das das äußere Element eine feste höhe und breite hat?Leuchtende Grüße
Stefan
PS: Das Ganze soll ein Button werden der dann per JS dynamisch auf die Maus des Benutzers reagiert...
-
Gibt es denn eine Möglichkeit sich das ganze anzuschauen?
-
Gibt es denn eine Möglichkeit sich das ganze anzuschauen?
Ja jetzt schon ;-)
mit Rahmen
ohne Rahmen
Leuchtende GrüßeStefan
-
Also ich habe mir das ganze jetzt mit FF und IE angeschaut, konnte aber keinen Unterschied zwischen "mit Rahmen" und "ohne Rahmen" entdecken?
Ich glaube ich bin blind... vielleicht hilft dir lieber wer anderst.
-
-
Hallo light,
Das liegt an "collapsing margins". Sofern kein Rahmen oder ähnliches vorhanden ist, fallen die margins zusammen und werden evtl. auch an das Elternelement vererbt.
Versuch z.B. das margin durch Padding zu ersetzen.
Jonathan
-
Hallo Jonathan,
ganz herzlichen dank für die Info!!!!
Hm sollte man das vielleicht irgendwie in SELFHTML
auf der BoxModel-Seite mit aufführen?
oder vielleicht bei Außenrand und Abstand
noch eine Stelle wäre Einführung in CSS-basierte Layouts
oder gibt es eine Stelle die ich nicht gefunden habe?Leuchtende Grüße
Stefan
-
-
-
-
Hallo light,
beide Links verweisen auf dasselbe HTML-Dokument!
Genereller Tip: Schau's dir mit Firebug (Addon für Firefox) an, damit lassen sich padding, margin und border grafisch anzeigen. Bei mir hilft das meistens.
thebach
--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."
-
-
-
-
-
Hi,
im Elternelement ist ein rahmen gesetzt 1px und solid.
wenn ich jetzt das solid in none verändere verrutscht irgendwie das innere Element un das Hintergrundbild des Äußeren.weil Du damit die Boxgröße veränderst.
freundliche Grüße
Ingo