[XHTML en CSS] Footer staat 1 pixel te hoog in IE - Softwareontwikkeling

donderdag 29 december 2005 14:21

Acties:

Topicstarter

Ik probeer via onderstaande code een footer div geheel onderaan te positioneren, opzich gaat dit goed, alleen IE laat 1 pixel onder de footer leeg. Heb dit al vaker bij andere sites die ik gebouwd heb gehad maar nog steeds geen goede en correcte oplossing voor gevonden.

Heb al de hele dag lopen stoeien met de CSS, door het toevoegen van

Cascading Stylesheet:

1
2
3

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;

aan de html, body en het footer element maar dat helpt helaas allemaal niks. Ook diverse links en posts hier op GoT geven niet echt duidelijkheid hierover.

IE- Internet Explorer 6 screenshot:
Afbeeldingslocatie: http://n.1asphost.com/urk2/screenshot1.jpg

Afbeeldingslocatie: http://n.1asphost.com/urk2/screenshot1.jpg

FF - Firefox 1.5 screenshot:
Afbeeldingslocatie: http://n.1asphost.com/urk2/screenshot2.jpg

Zoals je kan zien laat IE 1 pixel voor de footer over, het enige hoe ik dit opgelost krijg is door bij de #footer CSS de bottom op -1px; te zetten. Maar dan heb ik natuurlijk bij FF en Opera maar 49px over en bij IE 50.

Dit is de XHTML:

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <meta name="keywords" content=""></meta>
 <link rel="stylesheet" href="css/style.css" type="text/css" title="Standaard stijl" />
</head>
<body>

<div id="header">
 <div id="header_balk1" class="absoluteposition whitebottomrightborder"></div>
 <div id="header_logo" class="absoluteposition whitebottomrightborder"></div>
 <div id="header_image" class="absoluteposition whitebottomrightborder">[img]"images/header_image.jpg"[/img]</div>
 <div id="header_image2" class="absoluteposition whitebottomrightborder"></div>
 <div id="header_image3" class="absoluteposition whitebottomrightborder"></div>
 <div id="header_image4" class="absoluteposition whitebottomrightborder"></div>
 <div id="header_image5" class="absoluteposition whitebottomrightborder"></div>
 <div id="header_image6" class="absoluteposition whitebottomrightborder"></div>
 <!-- Menu buttons //-->
 <div id="header_button1" class="absoluteposition whiterightborder"><a href="">[img]"images/button_overmbs_off.jpg"[/img]</a></div>
 <div id="header_button2" class="absoluteposition whiterightborder"><a href="">[img]"images/button_producten_off.jpg"[/img]</a></div>
 <div id="header_button3" class="absoluteposition whiterightborder"><a href="">[img]"images/button_projecten_off.jpg"[/img]</a></div>
 <div id="header_button4" class="absoluteposition whiterightborder"><a href="">[img]"images/button_nieuws_off.jpg"[/img]</a></div>
 <div id="header_button5" class="absoluteposition whiterightborder"><a href="">[img]"images/button_partners_off.jpg"[/img]</a></div>
 <div id="header_button6" class="absoluteposition"><a href="">[img]"images/button_contact_off.jpg"[/img]</a></div>
 <!-- End of menu buttons //-->
</div>
<div id="left_menu">
 <div>[img]"images/onze_producten_title.gif"[/img]</div>
</div>

<div id="footer"></div>
</body>
</html>

De bijbehorende CSS (onbelangrijke stukjes weggehaald):

Cascading Stylesheet:

* {-moz-box-sizing: border-box; box-sizing: border-box;}
html {height:100%;}
body {height: 100%; overflow: hidden; cursor: default; font-family: Verdana, Tahoma, "Lucida Sans Unicode", Arial; font-size: 11px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; line-height: 18px;}
form {margin: 0px 0px 0px 0px;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
.nocontent {font-size: 0px; line-height: 0px;}
.absoluteposition {position: absolute;}
.whitebottomrightborder {border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF;}
.whiterightborder {border-right: 1px solid #FFFFFF;}
.whitebottomborder {border-bottom: 1px solid #FFFFFF;}
#header {width: 900px; height: 182px;}
#header_balk1 {top: 0px; left: 0px; width: 13px; height: 119px; background-image: url('../images/header_balk1.jpg'); background-repeat: no-repeat;}
#header_balk2 {top: 119px; left: 13px; width: 29px; height: 31px; background-color: #396E32; background-image: url('../images/header_balk2.jpg'); background-repeat: no-repeat;}
#header_balk3 {top: 0px; left: 864px; width: 38px; height: 119px; background-image: url('../images/header_balk3.jpg'); background-repeat: no-repeat;}
#header_balk4 {top: 119px; left: 864px; width: 36px; height: 31px; background-color: #396E32;}
#header_logo {top: 0px; left: 13px; width: 201px; height: 119px; background-image: url('../images/header_logo.jpg'); background-repeat: no-repeat;}
...
#header_button6 {top: 150px; left: 724px; width: 139px; height: 30px; z-index: 1;}
...
#left_menu {position:absolute; width:190px; left:0px; top:182px; bottom:44px; z-index: 1; overflow:auto; border-right: 1px solid #D6D6D6;}
* html #left_menu {height:100%; top:182px; bottom:50px;}
#footer {position:absolute; display:block; bottom: 0px; left: 0px; width:900px; height:50px; background-color: green; color:#FFFFFF; z-index: 2;}

Is dit simpel via CSS op de lossen, of dien je toch perse een IE hack ofzo te gebruiken?

$_/-\o_$

donderdag 29 december 2005 14:33

Acties:

crisp

Devver

Pixelated

Het lijkt mij een afrondingsprobleem in IE, maar haal eerst die XML-declaratie eens weg want daardoor rendered IE in quirksmode (sowieso kan je beter HTML gebruiken ipv XHTML maar dat terzijde).

Bedenk trouwens ook dat niet elke browser box-sizing ondersteund; gewoon het w3c boxmodel gebruiken is doorgaans een veiligere keuze.

Als laatste zie ik dat je bijna alles met absolute positioning doet. Mijn stelregel is: probeer zoveel mogelijk 'in de flow' te werken en gebruik positioning enkel als het echt noodzakelijk is...

Intentionally left blank

donderdag 29 december 2005 14:41

Acties:

Urk

Topicstarter

Het lijkt mij geen afrondingsprobleem. Ik positioneer toch absolute, en bottom naar 0px; zou dus goed moeten zijn, toch?

De XML declaratie weghalen lost het probleem in ieder geval niet op.
Voor de header gebruik ik inderdaad veel absolute positioning, heb relative geprobeerd maar dat gaat niet echt lekker. Dus voor nu maar even zo.

Waarom geen XHTML maar HTML?

En hoe defineer je het W3C boxmodel in de CSS? En is het gebruik daarvan dan gelijk in IE, FF en Opera?

Anyway: ik zie mijn probleem met de 1pixel wit onder de footer op meerdere sites, dus ben niet de enige lijkt me. Echt vaag probleem...

donderdag 29 december 2005 14:44

Acties:

Urk

Topicstarter

Aha, via Google gevonden:

Een oplossing om op alle platformen hetzelfde W3C boxmodel te krijgen is te bewerkstelligen door IE 6 en Opera 7 te switchen van standaard mode naar de strict mode. De browsers zullen dan gebruik maken W3C model om de afmetingen van de box te bepalen.

donderdag 29 december 2005 14:51

Acties:

crisp

Devver

Pixelated

Urk schreef op donderdag 29 december 2005 @ 14:41:
Het lijkt mij geen afrondingsprobleem. Ik positioneer toch absolute, en bottom naar 0px; zou dus goed moeten zijn, toch?

IE's renderengine zit soms vol verrassingen

Probeer je venster maar eens iets te vergroten of te verkleinen - je zult zien dat je de ene keer wel die extra witregel hebt en de andere keer niet.

De XML declaratie weghalen lost het probleem in ieder geval niet op.

Maar is wel netter; IE in quirksmode rendered immers anders dan andere browsers bij een volledige DTD

Waarom geen XHTML maar HTML?

Daar is al veel over geschreven...

En hoe defineer je het W3C boxmodel in de CSS? En is het gebruik daarvan dan gelijk in IE, FF en Opera?

Gewoon een volledige DTD gebruiken (strict of transitional maakt niet uit)

Anyway: ik zie mijn probleem met de 1pixel wit onder de footer op meerdere sites, dus ben niet de enige lijkt me. Echt vaag probleem...

IE is ook vaag...

Intentionally left blank

donderdag 29 december 2005 14:58

Acties:

Urk

Topicstarter

crisp schreef op donderdag 29 december 2005 @ 14:51:
IE's renderengine zit soms vol verrassingen
Probeer je venster maar eens iets te vergroten of te verkleinen - je zult zien dat je de ene keer wel die extra witregel hebt en de andere keer niet.

Verdomd, inderdaad. Had het al ergens anders gelezen en geprobeerd, maar toen bleef het, wellicht had ik toen de footer div nog op bottom: -1px; staan...
Maar er is dus niet een concrete simpele oplossing voor?

crisp schreef op donderdag 29 december 2005 @ 14:51:
Maar is wel netter; IE in quirksmode rendered immers anders dan andere browsers bij een volledige DTD
Gewoon een volledige DTD gebruiken (strict of transitional maakt niet uit)

OK, mag ik dom vragen wat je bedoeld met een volledige DTD? Tenminste ik snap wat een DTD is, maar snap niet wat je bedoeld?
De XML declaratie weghalen, en daaronder dan? Mijn Doctype declaratie is toch volledig?

donderdag 29 december 2005 17:37

Acties:

Sappie

De Parasitaire Capaciteit!

Urk schreef op donderdag 29 december 2005 @ 14:58:
Verdomd, inderdaad. Had het al ergens anders gelezen en geprobeerd, maar toen bleef het, wellicht had ik toen de footer div nog op bottom: -1px; staan...
Maar er is dus niet een concrete simpele oplossing voor?

is inderdaad een afrondingsprobleem; met behulp van conditional comments icm een expression los ik het meestal op, zie hieronder:

code:

<!--[if lt IE 7]>
    <style type="text/css">
        #footer { bottom: expression((documentElement.clientHeight % 2) ? "-1px" : "0" ); }
    </style>
<![endif]-->

OK, mag ik dom vragen wat je bedoeld met een volledige DTD? Tenminste ik snap wat een DTD is, maar snap niet wat je bedoeld?
De XML declaratie weghalen, en daaronder dan? Mijn Doctype declaratie is toch volledig?

De XML declaratie forceert IE in quirksmode (= niet standards mode) en daardoor gebruikt IE dus het border-box box-model. Wat Crisp bedoelt is dat je beter het W3C standards (content-box) box-model kan gebruiken. (dus xml declaratie weg en box-sizing shit weg (dat ondersteunt safari oa toch niet).. je DTD is wel compleet)
En waarom je beter HTML kunt gebruiken ipv XHTML moet je maar ff zoeken op google (MIME-type icm IE etc...) (maar dat zei Crisp ook al zie ik nu

)

edit:
foutje in mn conditional comment

[ Voor 36% gewijzigd door Sappie op 29-12-2005 22:37 ]

Specs | Audioscrobbler

donderdag 29 december 2005 17:41

Acties:

tombo_inc

uhuh

een volledige DTD is gewoon een goede complete doctype definitie.

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

donderdag 29 december 2005 19:38

Acties:

Urk

Topicstarter

Sappie schreef op donderdag 29 december 2005 @ 17:37:
Wat Crisp bedoelt is dat je beter het W3C standards (content-box) box-model kan gebruiken. (dus xml declaratie weg en box-sizing shit weg (dat ondersteunt safari oa toch niet).. je DTD is wel compleet)

Ja, ok. Maar betekent dat als ik het W3C standaard box-model gebruik dat IE, FF en Opera er dan allemaal hetzelfde mee omgaan?

Ik gebruik juist de huidige methode om in alle drie de browsers hetzelfde te renderen...

[ Voor 11% gewijzigd door Urk op 29-12-2005 19:38 ]

donderdag 29 december 2005 19:51

Acties:

Sappie

De Parasitaire Capaciteit!

mjah hetzelfde.. hetzelfde is het nooit helemaal helaas, de verschillende browsers hebben allemaal andere nare eigenaardigheden.

Maar aan de hand van het standards (content-box) box-model renderen kunnen ze allemaal ja. De meeste browsers doen dit vanzelf al, echter om IE in standards compliant mode te krijgen dien je een volledige DTD te hanteren (die heb je al) en geen html comments (of een xml declaratie) boven de DTD te plaatsen.

denk dat hier overigens al meer dan genoeg over te vinden is..

[ Voor 8% gewijzigd door Sappie op 29-12-2005 19:53 ]

Specs | Audioscrobbler

donderdag 29 december 2005 22:20

Acties:

Verwijderd

Probeer het eens door: * {margin:0;padding:0;border:0;} aan de css toe te voegen.

[ Voor 25% gewijzigd door Verwijderd op 29-12-2005 22:20 ]

donderdag 29 december 2005 22:22

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 29 december 2005 @ 22:20:
Probeer het eens door: * {margin:0;padding:0;border:0;} aan de css toe te voegen.

Ja, pak maar een hamer om een schroef ergens in te rammen want een schroevendraaier gebruiken is natuurlijk te vermoeiend

(plus dat dat het probleem niet oplost)

[ Voor 7% gewijzigd door crisp op 29-12-2005 22:26 ]

Intentionally left blank

donderdag 29 december 2005 22:29

Acties:

Verwijderd

crisp schreef op donderdag 29 december 2005 @ 22:22:
[...]

Ja, pak maar een hamer om een schroef ergens in te rammen want een schroevendraaier gebruiken is natuurlijk te vermoeiend

Hoezo? * is toch niks speciaals? Het staat voor wildcard en zorgt ervoor dat de nutteloze problemen op een efficiente manier worden opgelost door alles op 0 te laten beginnen.

Daarbij is het dan helemaal dwaas om vele verschillende elementen van deze styles te voorzien (wat vaak gebeurd). Het scheelt flink wat werk en het lost het efficient op.

Ik snap ook eigenlijk niet waarom dit dan een hack genoemd word?

donderdag 29 december 2005 22:36

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 29 december 2005 @ 22:29:
[...]

Hoezo? * is toch niks speciaals? Het staat voor wildcard en zorgt ervoor dat de nutteloze problemen op een efficiente manier worden opgelost door alles op 0 te laten beginnen.

Daarbij is het dan helemaal dwaas om vele verschillende elementen van deze styles te voorzien (wat vaak gebeurd). Het scheelt flink wat werk en het lost het efficient op.

Ik snap ook eigenlijk niet waarom dit dan een hack genoemd word?

Ik noem het geen hack, maar ik vind het erg ver gaan om de default padding, margin en borders die browsers middels een built-in stylesheet toepassen maar rucksightloss op 0 te zetten voor *alle* elementen. Dan hadden browsers net zo goed geen default stylesheet kunnen inbakken.

Ik pas dergelijke rules enkel toe op elementen waar ik dat ook echt zo voor wil hebben; voor de rest maak ik liever juist handig gebruik van het feit dat browsers zo'n built-in stylesheet hebben...

Door zo min mogelijk zelf aan dergelijke instellingen te klooien kom je eerder tegemoed aan gebruikers die vanuit accessibility redenen met een specifieke aangepaste built-in stylesheet werken.

[ Voor 10% gewijzigd door crisp op 29-12-2005 22:39 ]

Intentionally left blank

donderdag 29 december 2005 22:46

Acties:

Verwijderd

crisp schreef op donderdag 29 december 2005 @ 22:36:
[...]

Ik noem het geen hack, maar ik vind het erg ver gaan om de default padding, margin en borders die browsers middels een built-in stylesheet toepassen maar rucksightloss op 0 te zetten voor *alle* elementen. Dan hadden browsers net zo goed geen default stylesheet kunnen inbakken.

Ik pas dergelijke rules enkel toe op elementen waar ik dat ook echt zo voor wil hebben; voor de rest maak ik liever juist handig gebruik van het feit dat browsers zo'n built-in stylesheet hebben...

Door zo min mogelijk zelf aan dergelijke instellingen te klooien kom je eerder tegemoed aan gebruikers die vanuit accessibility redenen met een specifieke aangepaste built-in stylesheet werken.

Zo heb ik het nog niet bekeken, maar het lijkt me maar al te lastig om op die manier alle browsers compatibel te krijgen met de sites die je maakt? Misschien met een scriptje dat per browser een andere stylesheet gebruikt?

Dat probleem van de pixel ligt volgens mij aan het venster van IE trouwens! De engine van IE die ik via firefox aanspreek geeft namelijk geen problemen aan.

vrijdag 30 december 2005 01:43

Acties:

TheBorg

Resistance is futile.

min-height: 100%; in HTML

Pagina: 1

Reageer