[CSS] Margin/padding in IE - Softwareontwikkeling

vrijdag 18 augustus 2006 14:47

Acties:

0 Henk 'm!

Topicstarter

Ik ben bezig met een Joomla-site te layouten en alles ziet er perfect uit in Firefox. Toen ik echter even ging kijken in IE zag het er heel wat minder uit. Ik heb duidelijk een probleempje met de margin/padding van mijn mainbody.

Hier de betreffende html-code:

HTML:

<div id="content">
<div id="content_top"></div>
<div id="content_main"><div id="content_box"><?php mosMainBody(); ?></div></div>
<div id="content_bottom"></div>
</div>

Zoals je ziet heb ik een structuur opgesteld zodat ik een mooie kader rond mijn inhoud kan plaatsen. De extra content_box div zorgt voor de correcte weergave van de inhoud met margin... althans dat dacht ik toch.

Zie hier de bijhorende CSS code:

Cascading Stylesheet:

#content{
    float: left!important;
        float: left;
    padding: 0;
    padding-top: 0;
    margin: 0;
        text-align: left;
        width: 599px;
}

#content_top{
        background: url(../images/main_top.jpg) left top no-repeat;
    padding: 0;
    margin: 0;
        height: 8px;
        width: 599px;
}

#content_main{
         background: url(../images/main_middle.jpg) left top repeat-y;
         padding: 0;
         margin: 0;
         width: 599px;
         text-align: left;
}

#content_box{
         margin-right: 0px;
         margin-left: 0px;
         margin-top: 0px;
         margin-bottom: 0px;
         padding-left: 5px;
         padding-right: 5px;
         padding-top: 5px;
         padding-bottom: 5px;
         text-align: left;
}

#content_bottom{
        background: url(../images/main_bottom.jpg) left top no-repeat;
    padding: 0;
    margin: 0;
        height: 8px;
        width: 599px;
}

En dan het resultaat in Firefox en IE 6.0 :

Firefox

Afbeeldingslocatie: http://www.scoutsbeveren.be/stuff/firefox.jpg

Internet Explorer 6.0

Afbeeldingslocatie: http://www.scoutsbeveren.be/stuff/ie.jpg

Iemand die me kan helpen? Ik heb al uren zitten zoeken achter een oplossing, kan toch zo moeilijk niet zijn

[ Voor 4% gewijzigd door Sfinx- op 18-08-2006 15:08 ]

vrijdag 18 augustus 2006 14:54

Acties:

0 Henk 'm!

Boelie-Boelie

Ik zie geen screenshots.. Bezoek aan de url geeft "You are not logged in or you do not have permission to access this page."

Wat voor doctype gebruik je trouwens?

Cascading Stylesheet:

#content_box{
         margin-right: 0px;
         margin-left: 0px;
         margin-top: 0px;
         margin-bottom: 0px;
}

is om te schrijven in:

Cascading Stylesheet:

1
2
3

#content_box{
         margin: 0
}

Idem voor padding (maar bij getallen > 0 wel px/ems/.. vermelden).

[ Voor 86% gewijzigd door Boelie-Boelie op 18-08-2006 15:00 ]

Cogito ergo dubito

vrijdag 18 augustus 2006 15:10

Acties:

0 Henk 'm!

Sfinx-

Topicstarter

Oeps, effe rap zelf hosten dan

Zouden nu zichtbaar moeten zijn.

Ik gebruik de standaard doctype die aangeraden wordt voor Joomla templates:

HTML:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Jah, dat ik die CSS nog kan inkorten dat besef ik wel, ik had die apart staan om wat te spelen met verschillende settings

[ Voor 16% gewijzigd door Sfinx- op 18-08-2006 15:13 ]

vrijdag 18 augustus 2006 15:17

Acties:

0 Henk 'm!

MichielioZ

Het staat niet in je stylesheet, dus daarom vraag ik het even :
Heeft je body element wel margin: 0 ?

Iedereen wil terug naar de natuur, maar niemand wil lopend...

vrijdag 18 augustus 2006 15:18

Acties:

0 Henk 'm!

Wolfenstein

Komt het niet door een verschillende interpretatie van het CSS boxmodel:

http://www.quirksmode.org/css/box.html

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

[ Voor 30% gewijzigd door Wolfenstein op 18-08-2006 15:19 ]

vrijdag 18 augustus 2006 15:27

Acties:

0 Henk 'm!

moozzuzz

Sfinx- schreef op vrijdag 18 augustus 2006 @ 15:10:
...

HTML:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

...

Waarom beweren dat je xhtml gebruikt als dit niet zo is? (xhtml wordt door de meeste servers toch als html verstuurd...) Gooi dat xmlns="http://www.w3.org/1999/xhtml" er maar snel uit!

vrijdag 18 augustus 2006 15:51

Acties:

0 Henk 'm!

Sfinx-

Topicstarter

MichielioZ schreef op vrijdag 18 augustus 2006 @ 15:17:
Het staat niet in je stylesheet, dus daarom vraag ik het even :
Heeft je body element wel margin: 0 ?

Jep, body heeft margin 0

Wolfenstein schreef op vrijdag 18 augustus 2006 @ 15:18:
Komt het niet door een verschillende interpretatie van het CSS boxmodel

Zou goed kunnen, ik heb er echter geen flauw idee van hoe ik het dan wel moet doen... jij?

moozzuzz schreef op vrijdag 18 augustus 2006 @ 15:27:
[...]

Waarom beweren dat je xhtml gebruikt als dit niet zo is? (xhtml wordt door de meeste servers toch als html verstuurd...) Gooi dat xmlns="http://www.w3.org/1999/xhtml" er maar snel uit!

Euh, ik gebruik net zoals alle "standaard" templates van Joomla de genoemde doctype + begin html tag, zoals hier beschreven staat. Ik ben niet echt goed op de hoogte van al die speciale types, ben eerder van het trial & error / copy/paste van voorbeelden - principe

Als het daar volgens jou niet mag staan waarom staat het dan in al die officiële templates?

Uiteraard is dat slechts een klein stukje uit de hele index-pagina, zou dus wel goed kunnen dat er ergens xhtml wordt gebruikt - vraag me wel niet waar

vrijdag 18 augustus 2006 16:01

Acties:

0 Henk 'm!

Verwijderd

Ik heb ook veel zitten klooien met een website in ASP.net met XHTML. Geloof me, dat wil je niet. Daardoor ging veel van de CSS op zijn rug

Gewoon er eens uitslopen en vervangen door een ander...

HTML:

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

Die bij voorbeeld

vrijdag 18 augustus 2006 16:09

Acties:

0 Henk 'm!

Fuzzillogic

Cool

Dat geleur met die doctypes... IE6 pakt XHTML 1.0 transitional ook gewoon in """strict""" mode ipv quirksmode, net als HTML 4.01.
Je moet er alleen geen XML prolog bovenzetten, dat snapt ons lievelingsfossieltje (ahum) niet, en gooit de boel weer in quirksmode.

vrijdag 18 augustus 2006 16:12

Acties:

0 Henk 'm!

Sfinx-

Topicstarter

Ahh... dat heeft blijkbaar al een beetje geholpen

De achtergrondfiguur wordt nu al op dezelfde plaats links gepositioneerd, nu zit ik nog met een marge tussen men main en top, en rechts gaat de content ook een stuk verder dan het zou mogen. Maar goed, met wat gepruts krijg ik dat hopelijk in orde.

Ik hoop alleen dat Joomla nu niet raar gaat doen, voorlopig toch nog niets gemerkt.

maandag 21 augustus 2006 21:31

Acties:

0 Henk 'm!

Elvis56686

Ook al in het Joomla topic gepost maar zo mis je het in elk geval niet:

Ik heb je code even bekeken en alhoewel niet de beste(maar wel de snelste) oplossing denk ik dat je met de IE7 fix het probleem in elk geval voorlopig op kunt lossen. De naam is wat ongelukkig gekozen maar IE7 is een library die ervoor zorgt dat IE6 beter ondersteuning voor css en transparante PNG's krijgt.

Van de homepage:
"IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6 "

meer informatie en download op http://dean.edwards.name/IE7/

maandag 21 augustus 2006 23:06

Acties:

0 Henk 'm!

Sfinx-

Topicstarter

Super, bedankt

Ideaal, hoef ik me daar al geen zorgen meer over te maken.

EDIT: Hmm, lijkt toch niet te lukken op het eerste zicht. Heb een paar combinaties geprobeerd maar geen enkele IE7 module lost het probleem op. Sommige maken het zelfs terug slechter

[ Voor 55% gewijzigd door Sfinx- op 22-08-2006 11:13 ]