Archief - xHTML/CSS: Verschil tussen IE en FF

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
M

Microwaver

Legacy Member
Ok,

Ik heb weer eens een probleempje in verband met het verschil tussen firefox en internet explorer.

Link alvast.

Wat doet hij in FF wat hij in IE niet doet?

De linker en rechter div wordt doorgetrokken over de hele pagina (de snoepjesranden
De afbeeldingen van het menu worden tegen elkaar gezet

Dat zijn de grootste problemen in het verschil.


Wat zou ik dan nog meer willen weten? Het plaatsen van het geheel in het midden. Het is niet gelukt met
Code: 
vertical-align:middle;

Hier heb je alvast m'n html en css code

HTML: 
<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!--[if IE]>
<style type="text/css" media="screen">
#navigatie {
height:90%;
}



a {
padding-top:0px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px;
}


</style>
<![endif]-->

</head>

<body onload="MM_preloadImages('images/btn_home_ovr.jpg','images/btn_winkelen_ovr.jpg','images/btn_team_ovr.jpg','images/btn_contact_ovr.jpg','images/btn_horeca_ovr.jpg','images/btn_producten_ovr.jpg')">
<!-- ** -->
<!-- Achtergrondafbeeldingen (snoep) -->
<div id="linker_snoep"></div>
<div id="rechter_snoep"></div>


<div id="center">

<div id="banner"></div>

<div id="navigatie"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu1','','images/btn_home_ovr.jpg',1)"><img src="images/btn_home.jpg" name="menu1" width="201" height="37" border="0" id="menu1" /></a>
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu2','','images/btn_winkelen_ovr.jpg',1)"><img src="images/btn_winkelen.jpg" name="menu2" width="201" height="37" border="0" id="menu2" /></a>
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu3','','images/btn_team_ovr.jpg',1)"><img src="images/btn_team.jpg" name="menu3" width="201" height="37" border="0" id="menu3" /></a>
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu4','','images/btn_contact_ovr.jpg',1)"><img src="images/btn_contact.jpg" name="menu4" width="201" height="37" border="0" id="menu4" /></a>
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu5','','images/btn_horeca_ovr.jpg',1)"><img src="images/btn_horeca.jpg" name="menu5" width="201" height="37" border="0" id="menu5" /></a>
  <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu6','','images/btn_producten_ovr.jpg',1)"><img src="images/btn_producten.jpg" name="menu6" width="201" height="37" border="0" id="menu6" /></a></div>
<div id="navigatieAfbeelding"></div>






</div>
</body>
</html>

CSS (er zit ook een beetje css in de html; maar die is niet nuttig...)
Code: 
/* achtergrondkleur, zorgen voor in het middenstaan van de content */
body {
background-color: #D0B875;
text-align:center;
padding:0px;
margin:0px;
}

/* aanpassen van de padding,margin van de images */
img {
padding:0px;
margin:0px;
}


/* aanpassen van de padding, margin van de links */
a {
padding:0px;
margin:0px;
}


/* Linkerbalk met snoep */
#linker_snoep {
position:absolute;
min-width:15px;
background-image:url(images/linker_candy.jpg);
background-repeat:repeat-y;
width:155px;
height:100%;
left:0;
top:0;
padding:0;
}

/* Rechterbalk met snoep */
#rechter_snoep {
position:absolute;
min-width:15px;
background-image:url(images/rechter_candy.jpg);
background-repeat:repeat-y;
width:155px;
height:100%;
right:0;
top:0;
padding:0;
}

/* positioneren van de inhoud in het midden */
#center {
margin-left:auto;
margin-right:auto;
min-width:666px;
width:666px;
padding:0px;

}




/* Banner */
#banner {
width:666px;
background-image:url(images/navigation_banner.jpg);
background-repeat:no-repeat;
height:120px;
padding-bottom:3px;
}


/* Navigatie */
#navigatie {
padding-top:9px;
text-align:center;
width:226px;
height:241px;
background-image:url(images/navigation_background.jpg);
background-repeat:no-repeat;
float:left;
}



/* NavigatieAfbeelding */
#navigatieAfbeelding {
width:437px;
height:241px;
background-image:url(images/navigation_picture.jpg);
background-repeat:no-repeat;
float:right;
}
M

Microwaver

Legacy Member
Ok. Ik heb een van de twee problemen al kunnen oplossen aan de hand van het gebruiken van een tabel voor de navigatie (:'() maar nu zit ik nog met die linker en rechter balk die niet willen meegaan.


edit : Ook het probleem met de hoogte van de balken in Internet Explorer is opgelost
Code: 
body {height:100%;

Ook. als ik het scherm verklein. gaan op den duur die linker en rechterbalk OVER de content gaan. Hoe kan ik deze, naarmate het scherm kleiner wordt doen verdwijnen?

Bij voorbaat dank.
s

simonsimonie

Legacy Member
Om de website in het midden te plaatsen zal je alle DIV's in een container-div moeten plaatsen.

Dan plaats je het volgende in de CSS

Code: 
#container {
     margin:auto;
}

Voor de andere problemen:
Is je code valid? Anders kan de code valid maken, misschien de problemen oplossen.
M

Microwaver

Legacy Member
Neen. Dit heeft niet gewerkt.


Ook volgen de linker en rechterbalk niet als de inhoud langer wordt dan 1 scherm.


Samengevat:

- het overlappen van de linkerbalk en rechterbalk over de inhoud
- het niet bljven repeaten van deze balken naarmate de inhoud langer wordt.
- het plaatsen van de inhoud volledig in het midden van de pagina.
Q

Quilombo

Legacy Member
margin: auto is rommel
gebruik maar de methode van in de sticky om te centreren als ge wilt dat het in alle browsers werkt
M

Microwaver

Legacy Member
Inderdaad

Code: 
margin-left:auto
margin-right:auto
width:x

in samenwerking met
Code: 
html {
text-align:center
}

Werkt perfect.
o

orez

Legacy Member
Microwaver zei:
Inderdaad

Code: 
margin-left:auto
margin-right:auto
width:x
in samenwerking met
Code: 
html {
text-align:center
}
Werkt perfect.
Klik om te vergroten...

text-align: center is zelfs alweer overbodig.

Je bent wel verplicht een width mee te geven aan je container... en voor de rest dat je columns niet mee stretchen etc... doe daarvoor ALSTUBLIEFT moeite om de sticky te lezen of eens door het forum te searchen, die vragen zijn echt al tientallen keren gesteld.
Q

Quilombo

Legacy Member
Xavez zei:
Beetje genuanceerder misschien? Voor horizontaal te centreren is dat de perfecte methode :).
Klik om te vergroten...

neen, niet voor oudere browsers (of mac ie ofzo, alleszins werkt dat in sommige browsers niet; methode van in de sticky werkt overal)
X

Xavez

Legacy Member
Quilombo zei:
neen, niet voor oudere browsers (of mac ie ofzo, alleszins werkt dat in sommige browsers niet; methode van in de sticky werkt overal)
Klik om te vergroten...
Ga je tot in het oneindige IE 5.x ondersteunen? Get with the times, een klein beetje toch ten minste! IE op Mac wordt niet meer ontwikkeld en IE ouder dan een 5.x versie is gewoonweg afgeschreven :). Deze methode is korter, krachtig en werkt overal waar hij moet werken :).
Q

Quilombo

Legacy Member
die methode van in de sticky is ook kort en krachtig, en in tegenstelling tot margin: auto; werkt die wél overal. dat margin: auto werkt waar het moet werken is je reinste zever. en het heeft al helemaal geen zier te maken met "IE 5 tot in het oneindige ondersteunen".

ik zie geen enkele reden om "met mijn tijd mee te gaan" als ik met één regeltje extra niet alleen met mijn tijd mee ben maar ook nog eens de mensen met een oudere versie tegemoet kom.
K

KoenDK

Legacy Member
I agree; met zo een redenering zouden we ook FU moeten zeggen tov 800*600 :naughty:
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan