tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
762
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 23.09.05 22:35 #1
    Avatar von exitboy
    exitboy exitboy ist offline Mitglied Brokat
    Registriert seit
    Sep 2004
    Ort
    irgendwo in Deutschland
    Beiträge
    443
    Warum? Drüber gibt es nichts weiter ... kann mir das jetzt wirklich nicht mehr erklären ... wenn ich margin:0px und padding auch auf 0 setze, habe ich gar keinen Rand ...
    aber das muss doch mit margin gehen. Padding ist es hier nicht ... da ich ja ansonsten den innenabstand vergrößere und nicht den Aussenabstand eines Menüpunktes.


    <div id="inhalt">
    <div id="navibar">
    <div id="navilink">test</div>
    </div>
    </div>

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    #inhalt
{
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px; /* neg. Hälfte von width:400px = horizontal zentriertes DIV */
background: #transparent;
font-family: verdana;
font-size: 11px;
text-align:left;
}
 
#inhalt #navibar
{
float:left;
margin:0px; padding:0px; /*padding musste auf 0px gesetzt werden um verschiebungen zu verhindern beim FX IE*/
width: 180px;
height: 400px;
background: #f90;
}
 
 
#inhalt #navilink
{
 
margin:0px 0px 0px 5px; padding:0px; /*FEHLER !*/
float:left;
width: 120px;
font-size:11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
    Geändert von exitboy (23.09.05 um 22:42 Uhr)
     
    --- EOF ---?
  2. 23.09.05 22:43 #2
    Avatar von Matthias Reitinger
    Matthias Reitinger Matthias Reitinger ist offline ɐɯıǝɹ
    tutorials.de Premium-User
    Registriert seit
    Dec 2001
    Ort
    Bayern
    Beiträge
    5.805
    Blog-Einträge
    5
    Ohne das Stylesheet genauer betrachtet zu haben, vermute ich, dass der Box-Model-Bug Schuld an der Misere ist.
     
    „Gib einem Menschen einen Fisch, und er wird für einen Tag satt. Lehre ihn Fischen, und er wird ein Leben lang satt.“
    “For every complex problem, there is an answer that is short, simple and wrong.”
    “Pessimism is safe, but optimism is a lot faster!”

    Aktuelles Coding Quiz: #17 - Wörter kreuz und quer
  3. 23.09.05 22:48 #3
    Avatar von exitboy
    exitboy exitboy ist offline Mitglied Brokat
    Registriert seit
    Sep 2004
    Ort
    irgendwo in Deutschland
    Beiträge
    443
    es lag einfach am float:left bei dem link.

    Nur warum darf das da nicht rein und verursacht hier diese Pixelverschiebung?
     
    --- EOF ---?
  4. 24.09.05 05:31 #4
    Maik Tutorials.de Gastzugang
    Im IE tritt bei Elementen, die mit der CSS-Eigenschaft float formatiert sind, der sogenannte 3-Pixel-Abstand auf, womit der IE den gewünschten 5px-Abstand zwischen den beiden (verschachtelten und 'floatenden') DIVs mit 8 Pixel darstellt.

    CSS-Lösung:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

    #inhalt
{
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px; /* neg. Hälfte von width:760px = horizontal zentriertes DIV */
background: #transparent;
font-family: verdana;
font-size: 11px;
text-align: left;
}
 
#inhalt #navibar
{
float: left;
margin: 0px; 
padding: 0px; 
width: 180px;
height: 400px;
background: #f90;
}
 
#inhalt #navilink
{
float: left;
margin: 0px 0px 0px 5px;  
padding: 0px;
width: 120px;
font-size: 11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
[b]
* html #inhalt #navilink /* Korrektur für IE-3px-Bug  */
{
margin: 0px 0px 0px 2px; 
}
[/b]
     
  5. 24.09.05 11:55 #5
    Avatar von exitboy
    exitboy exitboy ist offline Mitglied Brokat
    Registriert seit
    Sep 2004
    Ort
    irgendwo in Deutschland
    Beiträge
    443
    Hallo,

    ich habe das jetzt wie folgt geändert:

    diesen 3px Unterschied macht er immernoch. Beim neusten IE 6

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    #inhalt .navilink
{
float:left;
margin:5px 0px 5px 10px; padding:0px; /*FEHLER !*/
width: 120px;
font-size:11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
 
* html #inhalt .navilink /* Korrektur für IE-3px-Bug  */
{
margin: 5px 0px 5px 7px; 
}


    mit dem hier funktioniert es:
    Code :
    1
2
3
4
5

    * html #inhalt .navilink /* Korrektur für IE-3px-Bug  */
{
width: 122px;
margin: 5px 0px 5px 5px; 
}

    WARUM?
    Geändert von exitboy (24.09.05 um 12:01 Uhr)
     
    --- EOF ---?
  6. 24.09.05 12:21 #6
    Maik Tutorials.de Gastzugang
    So sollte es auch funktionieren:

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
}

#inhalt
{
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px; /* neg. Hälfte von width:760px = horizontal zentriertes DIV */
background: #transparent;
font-family: verdana;
font-size: 11px;
text-align:left;
}

#inhalt #navibar
{
float:left;
margin:0px;
padding:0px;
width: 180px;
height: 400px;
background: #f90;
}

#inhalt #navilink
{
margin:5px 0px 5px 10px;
padding:0px;
width: 120px;
font-size:11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
-->
</style>

</head>
<body>

<div id="inhalt">
<div id="navibar"><div id="navilink">test</div>
</div>
</div>


</body>
</html>
     
  7. 24.09.05 12:55 #7
    Avatar von exitboy
    exitboy exitboy ist offline Mitglied Brokat
    Registriert seit
    Sep 2004
    Ort
    irgendwo in Deutschland
    Beiträge
    443
    ich hab das jetzt mit dem sternchen Hack gelöst. Vielen Dank nochmal!
     
    --- EOF ---?
« CSS teil von HTML? | Bei Mouse Over soll ein Bild erscheinen »

Ähnliche Themen

  1. CrystalReport breiter linker Rand
    Von Horscht1 im Forum .NET Windows Forms
    Antworten: 3
    Letzter Beitrag: 21.09.06, 13:29
  2. IE unter 10px Nicht darstellen
    Von Automatikk im Forum CSS
    Antworten: 2
    Letzter Beitrag: 19.04.06, 14:03
  3. [Css-Layout] 100% mit 10px Rand
    Von Danielku15 im Forum CSS
    Antworten: 2
    Letzter Beitrag: 02.04.06, 18:53
  4. Webseite ausdrucken mit css - linker rand wird abgeschnitten
    Von latitude im Forum CSS
    Antworten: 0
    Letzter Beitrag: 15.03.06, 10:27
  5. Linker Rand bei einer Liste <li>
    Von lukelukeluke im Forum CSS
    Antworten: 2
    Letzter Beitrag: 15.07.05, 17:32