layout doet het niet in IE:

  • Onderwerp starter Onderwerp starter Kproz
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
K

Kproz

Gebruiker
Lid geworden
11 jul 2007
Berichten
138
okey ik ben bezig aan een nieuwe layout, en wil dat er een afbeelding ONDER mijn inhouds-divisions zit, maar boven mijn achtergrondafbeelding.. dat lukt goed in firefox.., screenshot :
http://www.xvertise.net/ff.png
maar in IE ziet het er zo uit:
http://www.xvertise.net/nietok.png

division waar het logo in zit heet: lol
division rechts ( groot ) : main
division links ( menu ) : menu1

en dan hebben we nog een onzichtbaare container die rond main,menu en lol zit
mijn logo komt niet boven de achtergrond-image van mijn body! ... dit is mijn index.php:


PHP: 
<!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" lang="en" xml:lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="favicon.ico"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
 <!--[if IE]>
      <link rel="stylesheet" href="ie.css" type="text/css" title="IE" />
    <![endif]-->
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />



<title>lol</title>
</head>
<body bgcolor="#b7b7b7" style="margin: 0px; background-image: url('images/headerbackground.jpg'); background-repeat: repeat-x;">

<div class="clear"></div>
<div id="container">

<div id="lol" ></div>


<div id="main"><div class="divisionheader"></div></div>
<div id="menu1"><div class="divisionheader"></div></div>



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


en dit is mijn stylesheet:

PHP: 
#container {
    width:900px;
    margin: 0 auto;
    margin-top: 120px;
}
#lol {
    width:400px;
    height:400px;
    background-image: url('images/lol.gif');
    background-repeat: no-repeat;
    margin-top:-117px;
   

   
   

}
.clear {
  clear: both;
  }
   
#menu1 {
    height: 270px;
    width:190px;
    float: left;
    background-color: #ffffff;
    border: 1px solid black;
    margin-top:-270px;
   
   
   
}
#main {
    height: 500px;
    width:695px;
    float: right;
    background-color: #ffffff;
    margin-top:-270px;
    border: 1px solid black;
   
}
.divisionheader {
    width:100%;
    height:26px;
    background-image: url('images/bar.gif');
    background-repeat: repeat-x;
    border-bottom: 1px solid black;
    background-position:top;
}



kunnen jullie mij helpen zodat het in orde is voor internet explorer EN FF
ik heb al geprobeerd met z-index en position absolute, maar dat verknalt heel me layout!

hier heb je nog een online voorbeeld: http://www.xvertise.net
 
ik gebruik Firefox en IE 7 je website ziet er op beiden hetzelfde uit. geen problemen zo te zien.
 
bij mij doet ie het niet goed in IE7 :/ hoe zou dat komen? ik ben er zeker van dat ik ook IE7 heb
 
Geen idee aan wat het ligt.

Op je voorbeeld is te zien dat je ie6 gebruikt.
 
het kan natuurlijk zijn dat mijn IE fout is geinstalleerd... ik heb er vroeger problemen mee gehad omdat ik het probeerde te verwijderen, maar toen werkte mijn hele windows niet meer door "iertutil.dll" als ik mij het goed herinder! ...


maar euh :) IE6 is toch ook nog best veel gebruikt ... niet dan? of zou ik dat mogen wegcijferen
 
Ik heb nog een tip voor de code: je zou de background-image uit de html kunnen halen en ook in het stylesheet zetten.

Dan kun je de verschillende elementen een z-index meegeven. Die z-index geeft de volgorde aan als elementen overelkaar zijn geplaatst. Een element met z-index: 2 wordt bovenop een element met z-index:1 geplaatst. Je moet de elementen dan wel absoluut positioneren. Misschien helpt dit om de IE bug op te lossen.

Voorbeeld:

#lol {
position: absolute;
top: 100px;
left: 100px;
width:400px;
height:400px;
background-image: url('images/lol.gif');
background-repeat: no-repeat;
margin-top:-117px;
z-index: 2;
}
 
fritzi zei:
Ik heb nog een tip voor de code: je zou de background-image uit de html kunnen halen en ook in het stylesheet zetten.

Dan kun je de verschillende elementen een z-index meegeven. Die z-index geeft de volgorde aan als elementen overelkaar zijn geplaatst. Een element met z-index: 2 wordt bovenop een element met z-index:1 geplaatst. Je moet de elementen dan wel absoluut positioneren. Misschien helpt dit om de IE bug op te lossen.

Voorbeeld:

#lol {
position: absolute;
top: 100px;
left: 100px;
width:400px;
height:400px;
background-image: url('images/lol.gif');
background-repeat: no-repeat;
margin-top:-117px;
z-index: 2;
}
Klik om te vergroten...

dat heb ik al geprobeerd, en body kan je niet absoluut positioneren, en absoluut positioneren brengt niets als elende :) maar toch bedankt ik kan nog altijd de css eens opnieuw schrijven met absolute ... wat wel *** is
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan