CSS firefox versus IE met voorbeeldje - Softwareontwikkeling

donderdag 28 april 2005 12:28

Acties:

Verwijderd

Topicstarter

Afbeeldingslocatie: http://users.pandora.be/jim_13/fout.jpg

in firefox en IE is er blijkbaar een verschil in de padding-right werking .

iemand daar een polossing voor ?

code:

#navigation
{
  background-color: #000000;
    position:absolute;
    padding:0;
    width:780px;
    top:144px;
    left:0px;
    text-align:left;
    
}

#navigation ul
{
    font-weight: bold;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigation li
{
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}

#navigation a
{
    text-decoration: none;
    margin: 0;
}

#navigation a:link, #navigation a:visited ,#navigation a:active
{
    color: #000;
    background: #00ff00 url("http://www.mxinactie.be/afbeeldingen/left.gif") left top no-repeat;
    padding-left: 18px;
    padding-bottom: 20px;
} 


#navigation a:link span, #navigation a:visited span, #navigation a:active span 
{
    background: #0000ff url("http://www.mxinactie.be/afbeeldingen/right.gif") right top no-repeat;
    padding-right: 18px;
    
}

André: En gebruik [code] ipv <code>

[ Voor 6% gewijzigd door André op 28-04-2005 12:43 ]

donderdag 28 april 2005 12:31

Acties:

Barracuda_82

mkTime(), not war!

Heb je ook al geprobeerd om een "padding-right: 0px;" te doen op je tekst?

donderdag 28 april 2005 12:34

Acties:

Verwijderd

Het zou ook heel goed met white-space (spaties, tabs, enters) in je HTML te maken kunnen hebben. Post die code anders ook erbij.

donderdag 28 april 2005 12:46

Acties:

ZeilDude

Dit verschil los je op door met box-sizing: border-box; en -moz-box-sizing: border-box; te werken. Voor uitleg zie: http://www.quirksmode.org/index.html?/css/box.html .

[ Voor 5% gewijzigd door ZeilDude op 28-04-2005 12:47 ]

donderdag 28 april 2005 12:54

Acties:

Verwijderd

In Firefox wordt het element waar je padding toepast groter.

Een div met width 100px en padding-right 10px wordt in Firefox dus 110px.

En in IE blijft die 100px.

Als je deze tag voor je HTML tag zet, dan gaat IE als het goed is wel de CSS correct renderen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

donderdag 28 april 2005 12:57

Acties:

CH4OS

It's a kind of magic

Verwijderd schreef op donderdag 28 april 2005 @ 12:54:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Transistional opgeven als doctype, en dan verwijzen naar de strict DocType Definition?

DocTypes

[ Voor 15% gewijzigd door CH4OS op 28-04-2005 12:57 ]

donderdag 28 april 2005 13:00

Acties:

Sappie

De Parasitaire Capaciteit!

@aantal replies hierboven

Als IE in quirksmode rendert (door gebruik van óf een onvolledig DTD óf een html comment boven de DTD) dan kun je beter een volledig DTD opgeven / html comment weghalen aangezien gebruik van het standaard w3c box-model (content-box) aan te raden is.

@TS: Zou je ff de relevante code van je menuutje kunnen posten.. ik kan zo 123 niet zien wat wat is.

Specs | Audioscrobbler

donderdag 28 april 2005 13:05

Acties:

ZeilDude

Sappie schreef op donderdag 28 april 2005 @ 13:00:
@aantal replies hierboven

Als IE in quirksmode rendert (door gebruik van óf een onvolledig DTD óf een html comment boven de DTD) dan kun je beter een volledig DTD opgeven / html comment weghalen aangezien gebruik van het standaard w3c box-model (content-box) aan te raden is.

@TS: Zou je ff de relevante code van je menuutje kunnen posten.. ik kan zo 123 niet zien wat wat is.

Waarom prefereer jij de content-box boven de border-box? Is dit niet gewoon een kwestie van (subjectieve) keuze?

donderdag 28 april 2005 13:07

Acties:

Verwijderd

wel in css3, in css2 wordt van content-box uitgegaan, je kan er vanuit gaan dat dat in alle browsers zo werkt

donderdag 28 april 2005 13:15

Acties:

ZeilDude

Verwijderd schreef op donderdag 28 april 2005 @ 13:07:
wel in css3, in css2 wordt van content-box uitgegaan, je kan er vanuit gaan dat dat in alle browsers zo werkt

Blijkbaar niet, omdat IE en FF een andere interpretatie hebben, zoals TS ook mooi aantoont.

donderdag 28 april 2005 13:23

Acties:

Verwijderd

Topicstarter

Sappie schreef op donderdag 28 april 2005 @ 13:00:
@aantal replies hierboven

Als IE in quirksmode rendert (door gebruik van óf een onvolledig DTD óf een html comment boven de DTD) dan kun je beter een volledig DTD opgeven / html comment weghalen aangezien gebruik van het standaard w3c box-model (content-box) aan te raden is.

@TS: Zou je ff de relevante code van je menuutje kunnen posten.. ik kan zo 123 niet zien wat wat is.

code:

</div>



<div id="navigation">


         <ul>
                 <li> <a href="index2.htm"><span> Home</span> </a> </li>
                 <li> <a href="foto2.htm"> <span>Foto</span></a> </li>
                 <li> <a href="video2.htm"><span> Video</span></a> </li>
                 <li> <a href="info2.htm"><span>Info</span></a> </li>
                 <li> <a href="links2.htm"><span>Links</span></a> </li>
                 <li> <a href="nieuwsbrief2.htm"><span>nieuwsbrief</span></a> </li>
                 <li> <a href="gastenboek2.htm"><span>Gastenboek</span</a> </li>
                 <li> <a href="forum.htm"><span>Forum</span></a> </li>
                 <li> <a href="DVD.htm"><span>DVD</span></a> </li>
         </ul>
    </div>  
    <div id="inhoud">

donderdag 28 april 2005 13:50

Acties:

Sappie

De Parasitaire Capaciteit!

ZeilDude schreef op donderdag 28 april 2005 @ 13:15:
[...]
Blijkbaar niet, omdat IE en FF een andere interpretatie hebben, zoals TS ook mooi aantoont.

Als IE6 in standards compliant mode rendert dan renderen zowel IE als FF aan de hand van hetzelfde (content-box) box-model.
IE5.x rendert altijd aan de hand van het 'verkeerde' / andere (border-box) box-model.

dus @TS: Heb je wel een volledig DTD? Heb je geen html comment boven je DTD? (kortom IE6 wel in standards mode?) en over welke versie van IE hebben we het hier?

edit:

Ik zie dat je verticale padding wilt toepassen op een inline element (in jouw geval een <a>). Dit werkt niet. Je zal er een block-level element van moeten maken (display: block;) mits je dat wel wilt laten werken.

ben verder nog ff aant kijken naar t probleem nu..

[ Voor 48% gewijzigd door Sappie op 28-04-2005 13:59 ]

Specs | Audioscrobbler

donderdag 28 april 2005 16:21

Acties:

Verwijderd

Topicstarter

link naar source htm

<link> www.mxinactie.be/index2_test.htm</link>

vrijdag 29 april 2005 07:33

Acties:

Verwijderd

Topicstarter

oplossing is gevonden:
<link> http://forums.telenet.be/...php?p=1121613#post1121613 </link>

bedankt iedereen