[CSS] [IE] 3 pixels verschil tussen IE en Firefox - Softwareontwikkeling

maandag 10 januari 2005 23:10

Acties:

Verwijderd

Topicstarter

Locatie
http://www.its-business.nl/cargo/index.html
CSS staat in HTML
De code hier pasten levert lange lap tekst op, terwijl het al zo'n lange tekst is.
(voor archief doeleinden zal ik het later wel plaatsen) wat nu dus gedaan is.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>2 column CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
    }

    
#nav {
    width: 205px;
    float: left;
    margin-left: -1px;
    padding: 0px 0;
    background: #ffffff url(img/navbg.gif) repeat-y;
    position: relative;
    }
#logo {
    width:      205px;
    margin:     0;
    padding:    0;
    height:     90px;
    background:     transparent url(img/logo.jpg) top left no-repeat;
    position:   relative;
    }   

#navmenu {
    margin:     0px 0px 1px 47px;
    width:      146px;
    background-color: transparent;
    }

#navmenuheader {
    width:      146px;
    background:     transparent url(img/leftmenuheader.jpg) top left no-repeat;
    height:     20px;
    }

#navmenubody {
    width:      135px !important;
    width /**/:     145px /* IE5/Win */;
    background:     transparant;
    font-family:    tahoma, sans-serif;
    font-size:  10px;
    padding:    0 5px 100px 5px;
    }
    
#content {
    margin-left:    203px !important;
    margin-left /**/: 204px /* IE5/win */;
    background:     #fff000;
    }

#contenttop {
    background:     #fff000 url(img/contenttopbg.gif) top repeat-x;
    margin:     0 0;
    padding:    0 0;
/*hier had ik nog staan:*\
/*height: 20px;*\
    }

#contentbody {
    padding:    15px;
    }

#header {
    background:     #ffffff url(img/headerleftbg.jpg) top left no-repeat;
    color:      #006;
    border-bottom:  0px solid #006;
    margin-bottom:  0px;
    height:     20px;
    overflow:   hidden;
    text-align:     right;
    }
    
#footer {
    background-color: #fff;
    color:      #006;
    border-top:     1px solid #006;
    font-size:  11px;
    text-align:     right;
    padding:    2px 10px 0 0;
    clear:      both;
    }


.spacer {
    font-size:  1px;
    clear:      both;
    }
    
p {
    padding:    0;
    margin-top: 0px;
    font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
    }

dd, dt {
    font-family: 'Lucida Grande', Verdana,  Geneva, Lucida, Helvetica, Arial, sans-serif;
    font-size: 0.95em;
    }
</style>
</head>
<body>
<div id="header">
Hier komt de header...
</div>

<div id="nav">

    <div id="logo">
    &nbsp;
    </div>
    <div id="navmenu">
        <div id="navmenuheader">
        &nbsp;
        </div>
        
        <div id="navmenubody">
        Dit is de div waar het menu in komt het is nu 145 pixels breed. Voor de rest zou hier nog het Lorem Ipsum kunnen staan om het op te vullen. Of een onzin verhaaltje over dat een zware olifant niet kan schaatsen. Gelukkig voor hem vond niemand, behalve de psychiater, dat vreemd binnen de xenofobische gemeenschap. 
        <p>
        </p>
        </div>
    </div>

</div>

<div id="content">
    <div id="contenttop">
    &nbsp;
    </div>
    <div id="contentbody">

Hier komt de main content in 1 of 2 kolommen. Dat is afhankelijk welke content hier komt. <p>
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.
<br />
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
</p>

</p>
<p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</p>
</div>
<div id="contenttop">
    &nbsp;
    </div>
    


</div>

<div class="spacer">
&nbsp;
</div>

<div id="footer">
Hier komt de footer.
</div>
</body>
</html>

Wat is het probleem?
De rand naast het logo verspringt in IE5 en 6 3 pixels rechts. Het vreemde is dat slechts de child div 3 pixels naar rechts gaat. Echter als dezelfde div onder de linker div staat dan komt hij wel goed. De linker div duwt de div als het ware dus weg.

Wat heb ik al gedaan voor de oplossing?

Natuurlijk google en Got gebruikt. Helaas zijn er veel problemen met divjes en IE...

[rml][ CSS] Pixel verschil tussen Firefox en Iexplore[/rml]
Dit topic kwam het dichtst in de buurt echter het levert niet de oplossing voor dit probleem. (en daar is firefox die 1 pixel naar rechts gaat)

Mogelijke oplossing?
Ik zou de child div die nu het slechts een en het randje als achtergrond heeft, kunnen weghalen en de achtergrond in de parent div kunnen zetten met style=" background: .... top repeat-x". Dit heeft echter niet mijn voorkeur, want ik kan niet nog een andere achtergrond declareren voor die div.

code:

1
2
3

<div>
<!-- hier komt content met als achtergrond de bovenste rand -->
</div>

ipv

code:

<div>
  </div>
  </div>
</div>

Een andere mogelijkheid is:

code:

<div>
<!-- hier is het randje de achtergrond-->
<div style="margin:20px">
<!-- hier komt de content met een nieuwe achtergrond -->
</div>
</div>

Deze genieten beide mijn voorkeur niet.
Kortom is het mogelijk om het randje aansluitend te krijgen als deze html gebruikt wordt? De CSS mag veranderen. Zelfs IE specifieke CSS, dan komt er een apart stylesheet voor IE.

En ja het geel is slechts om het duidelijk te maken wat ik bedoel.

[ Voor 56% gewijzigd door Verwijderd op 11-01-2005 11:04 . Reden: code toegevoegd voor archief doeleinden ]

maandag 10 januari 2005 23:11

Acties:

Annie

amateur megalomaan

Heb je de Holly hack al geprobeerd?

Today's subliminal thought is:

maandag 10 januari 2005 23:27

Acties:

Verwijderd

Topicstarter

nee, nog niet.

Zal het nu even proberen...
gedaan
Nee snel gezien lost het niets op. Wat me wel opviel is dat als ik de div #content een breedte meegaf van 100% dat deze dan 3 pixels opschuift en waar eerst waardoor de child div #contenttop helemaal tegen de rand zit van de div #content.

[ Voor 73% gewijzigd door Verwijderd op 10-01-2005 23:42 ]

dinsdag 11 januari 2005 09:52

Acties:

Verwijderd

Het probleem zit in je contenttop, als je de height weghaalt zie je dat het 3px probleem weg is. heb niet zoveel tijd maar volgens mij lost dit het probleem op:

code:

1
2
3

#contenttop {
    BACKGROUND: url(http://www.its-business.nl/cargo/img/contenttopbg.gif) #fff000 repeat-x; padding:10px;
    }

offtopic:
Je kan stylen samenvoegen o.a. PADDING-RIGHT: 15px; PADDING-LEFT: 15px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px; is het zelfde als padding:15px; of padding 15px 15px 15px 15px; Dit kan je ook voor margin doen

[ Voor 29% gewijzigd door Verwijderd op 11-01-2005 09:55 ]

dinsdag 11 januari 2005 10:57

Acties:

Verwijderd

Topicstarter

De height weghalen was/is de oplossing, $_/-\o_$ stom van mij dat ik het niet zelf gezien heb

.