[XHTML/CSS] FF & IE renderen divs verschillend - Softwareontwikkeling

donderdag 23 juni 2005 10:51

Acties:

Topicstarter

Ik weet dat dit soort vragen genoeg voorkomen maar ik kom er echt niet uit. Via de search kwam ik op pagina's over verschillende boxmodels maar ik vond niks wat tot de oplossing heeft geleid.

Ik maak een pagina met een aantal divs voor de layout waarin de content geplaatst wordt.
Het komt erop neer dat ik een div gemaakt heb die 2px hoog moet zijn met een donkere achtergrondkleur voor een nette scheiding op de pagina. Nu is het zo dat FF die 2px netjes overneemt maar IE er 18px van maakt en ik heb echt geen idee hoe die daar nu aan komt.

Voorbeeldplaatjes :

Firefox 1.0 :
Afbeeldingslocatie: http://82.192.73.227/~cartman/div_ff.jpg

Afbeeldingslocatie: http://82.192.73.227/~cartman/div_ff.jpg

Internet Explorer 6.0 :

Afbeeldingslocatie: http://82.192.73.227/~cartman/div_ie.jpg

Stukjes relevante xhtml code :

code:

<?xml version='1.0' encoding='UTF-8' ?>
<!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' xml:lang='en' lang='en'>
    <head>
        <title>Titel/title>
        <link rel='stylesheet' href='style.css' type='text/css' />
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    </head>
    <body>
        <div id='frame'>
            <div id='header'></div>
            <div id='line'></div>
            <div id='menu'></div>
            <div id='line'></div>
            <div id='content'></div>
            <div id='line'></div>
            <div id='footer'></div>
            <div id='line'></div>
        </div>  
    </body>
</html>

Relevante CSS code

code:

#frame {
        width:740px;
        margin-top:0px;
        padding:0px;
        text-align:left;
        }
        
#header {
        width:740px;
        height:78px;
        padding:0px;
        margin:0px;
        float:left;
        z-index: 2;
        background-color:#fff;
        text-align:left;
        }
        
#line {
        width:740px;
        height:2px;
        padding:0px;
        margin:0px;
        float:left;
        z-index: 2;
        text-align:left;
        background-color:#3D3D3D;
        
        }

Op 0px zetten van borders, boxmodel wijzigen, xml versie uitzetten, heeft allemaal niet geholpen. Hoe krijg ik het nu voor mekaar dat beide browsers de donkere stroken netjes 2px maken?

donderdag 23 juni 2005 10:54

Acties:

crisp

Devver

Pixelated

fontsize en lineheight

Intentionally left blank

donderdag 23 juni 2005 10:56

Acties:

BtM909

Watch out Guys...

Waarom ga je niet eerst even kijken welke elementen je voor welk doel kan gebruiken

Voor een horizontale lijn kan je toch gewoon HR gebruiken

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 23 juni 2005 10:57

Acties:

Cartman!

Topicstarter

Zit ik daar dus al n uur tijd mee te verdoen. Het werkt nu, tnx

Hij kan dicht wat mij betreft.

De duidelijke oplossing (kon dat nog?) :

font-size:0px;
line-height:0px;

donderdag 23 juni 2005 10:59

Acties:

crisp

Devver

Pixelated

BtM909 schreef op donderdag 23 juni 2005 @ 10:56:
Waarom ga je niet eerst even kijken welke elementen je voor welk doel kan gebruiken

Voor een horizontale lijn kan je toch gewoon HR gebruiken

Ja en nee. Het probleem met HR dat de styling in verschillende browsers anders moet (background-color versus color), en dat je in IE de default margins niet kunt wijzigen...

Intentionally left blank

donderdag 23 juni 2005 11:01

Acties:

Cartman!

Topicstarter

Dan hou ik het dus toch op de divs

donderdag 23 juni 2005 11:12

Acties:

BtM909

Watch out Guys...

crisp schreef op donderdag 23 juni 2005 @ 10:59:
[...]

Ja en nee. Het probleem met HR dat de styling in verschillende browsers anders moet (background-color versus color), en dat je in IE de default margins niet kunt wijzigen...

Klopt maar het is wel het eerste element wat ik gebruik. Als het (wat marges betreft) niet uitkomt, dan pas kijk ik naar wat anders.

Wat styling betreft heb je ook gelijk, maar daar is wel rekening mee te houden. Zag toevallig laatst een site met een overzicht wat in welke browser werkt

offtopic:
crisp, heb je toevallig msn?

[ Voor 4% gewijzigd door BtM909 op 23-06-2005 11:15 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 23 juni 2005 11:28

Acties:

Verwijderd

het hangt er maar net vanaf waarvoor je het gebruikt, dat ie moeilijk te stylen is wil niet zeggen dat je <hr> niet moet gebruiken

<hr> is voor duidelijke scheiding in je content, denk er maar aan als een deuntje op het radionieuws dat nieuwsitems scheidt, <div> is om paragrafen en hoofdstukken te onderscheiden

Volgens mij is het doel van de TS voor een deel <hr>, muv de laatste, en is het puur visueel, dan zou je gewoon met css borders moeten gaan werken:

HTML:

<div id='frame'>
  <div id='header'></div>
  <hr>
  <map id='menu'></map>
  <hr>
  <div id='content'></div>
  <hr>
  <div id='footer'></div>
</div>

Cascading Stylesheet:

#header, #menu, #content, #footer {
  border-bottom: 2px solid black;
}
hr {
  display: none;
}

dat lijkt me semantisch een stuk correcter

[ Voor 70% gewijzigd door Verwijderd op 23-06-2005 11:39 . Reden: code uitlijning wat netter. Ow en map ]

donderdag 23 juni 2005 12:17

Acties:

crisp

Devver

Pixelated

BtM909 schreef op donderdag 23 juni 2005 @ 11:12:
[...]

offtopic:
crisp, heb je toevallig msn?

offtopic:
ja, gewoon crisp[at]tweakers.net

Intentionally left blank

donderdag 23 juni 2005 12:56

Acties:

Cartman!

Topicstarter

Verwijderd schreef op donderdag 23 juni 2005 @ 11:28:
het hangt er maar net vanaf waarvoor je het gebruikt, dat ie moeilijk te stylen is wil niet zeggen dat je <hr> niet moet gebruiken

<hr> is voor duidelijke scheiding in je content, denk er maar aan als een deuntje op het radionieuws dat nieuwsitems scheidt, <div> is om paragrafen en hoofdstukken te onderscheiden

Volgens mij is het doel van de TS voor een deel <hr>, muv de laatste, en is het puur visueel, dan zou je gewoon met css borders moeten gaan werken:
HTML:
1
2
3
4
5
6
7
8
9
<div id='frame'>
  <div id='header'></div>
  <hr>
  <map id='menu'></map>
  <hr>
  <div id='content'></div>
  <hr>
  <div id='footer'></div>
</div>
Cascading Stylesheet:
1
2
3
4
5
6
#header, #menu, #content, #footer {
  border-bottom: 2px solid black;
}
hr {
  display: none;
}
dat lijkt me semantisch een stuk correcter

Dat is zeker de beste oplossing ook nog idd. Stom dat ik dit nu zelf niet gebruikt heb want dit heb ik voorheen al wel een paar keer toegepast. Tis warm zullen we maar zeggen...