[CSS] Absolute positioning probleem in IE - Softwareontwikkeling

woensdag 27 oktober 2004 11:18

Acties:

Ruud2001

a.ka. Ruud2000

Topicstarter

Omdat ik zelf echt niet meer weet waar ik het moet zoeken open ik hier maar een topic. Het volgende is het geval: ik ben bezig een site te bouwen en aangezien ik vaak hier in W&G lees over de voordelen van CSS heb ik besloten ook hiermee aan de slag te gaan. Is allemaal best goed vind ik zelf en ik was helemaal blij toen ik 'm door de W3C validator haalde en ik geslaagd bleek.

Echter, nu het probleem. Ik ben sinds kort helemaal fan van Firefox en heb deze browser dus gebruikt toen ik druk bezig was m'n CSS in elkaar te zetten. Na veel proberen, nazoeken e.d. eindelijk het resultaat gekregen wat ik wilde. Test ik 'm vervolgens in IE... jullie voelen het waarschijnlijk al aankomen, klopt er niet veel meer van.

Naast een aantal kleine probleempjes met positionering op pixel precies, zit ik met een veel groter probleem. Ik heb bovenaan een menu absolute gepositioneerd om te zorgen dat het bovenop de header komt te staan. Firefox vindt dit prima alleen IE besluit om m'n menu compleet naar de rechterkant van het scherp te plaatsen.

Klik hier voor een online voorbeeld van het probleem.

De HTML:

code:

<body>
<div id="container">
    <div id="top">
        [img]"images/header.jpg">
        <div[/img] 
        <div id="navcontainer"> 
                <ul id="navlist">
            <li id="active"><a  href="home.htm"id="current">&nbsp;Home&nbsp;</a></li>
            <li><a href="archive.htm">&nbsp;Archive&nbsp;</a></li>
            <li><a href="aboutme.htm">&nbsp;About me&nbsp;</a></li>
            <li><a href="contact.htm">&nbsp;Contact&nbsp;</a></li>
            <li><a href="links.htm">&nbsp;Links&nbsp;</a></li>
            </ul>
        </div>
    </div>
    </div>
    <div id="leftnav">[img]"images/corner.jpg"></div>
    <div[/img]
        <h1>Lorem Ipsum</h1>
        <p>"Lorem ipsum"</p>
        <h1>Lorem Ipsum</h1>
        <p>"Lorem ipsum"</p>
    </div>
    <div id="footer">[img]"images/footer.jpg"></div>
</div>
<div[/img]
    <p>Copyright &copy; 2005 - De Maki</p>
    <p>W3C plaatje</p>
</div>
</body>
</html>

De (relevante) CSS:

code:

#container
{
width: 760px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 120%;
}

#top
{
padding: 0px;
height: 150px;
width: 760px;
background-color: #fff;
border-bottom: 1px solid gray;
}

#leftnav
{
float: left;
width: 150px;
margin: 0px;
padding: 0px;
}

#content
{
margin-left: 150px;
border-left: 1px solid gray;
padding: 15px;
width: 590px;
}

#footer
{
clear: both;
margin: 0px;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#copyright
{
width: 760px;
margin: 0px auto;
background-color: #E4FAFF;
color: #333;
border: 0px;
}

#menu
{
position: absolute;
top: 129px;
margin-left: 150px;
}

#navlist
{
padding: 3px;
margin-left: 10px;
border-bottom: 1px solid gray;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0px;
display: inline;
}

#navlist li a
{
padding: 3px;
margin-left: 3px;
border: 1px solid gray;
border-bottom: none;
background: #F7F2EC;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #F2C997;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

Iemand die me hierbij kan helpen?

"Imagination is more important than knowledge" - Albert Einstein

woensdag 27 oktober 2004 11:26

Acties:

crisp

Devver

Pixelated

Je menu in plaats van margin-left:150px; gewoon left:150px; geven?

Intentionally left blank

woensdag 27 oktober 2004 11:28

Acties:

André

Analytics dude

Maak van die margin-left op #menu een gewone left

edit:
crisp, kappuh

edit:
muhahahaha, het kan nog lanzamer

[ Voor 43% gewijzigd door André op 27-10-2004 11:29 ]

woensdag 27 oktober 2004 11:28

Acties:

BtM909

Watch out Guys...

Waarom geen left: 150px ipv margin-left: 150px

edit:

Waarom gewoon niet reageren ipv fokkin' laat

[ Voor 40% gewijzigd door BtM909 op 27-10-2004 11:29 ]

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.

woensdag 27 oktober 2004 11:29

Acties:

crisp

Devver

Pixelated

^^ jullie zijn traag

Intentionally left blank

woensdag 27 oktober 2004 11:31

Acties:

Ruud2001

a.ka. Ruud2000

Topicstarter

crisp schreef op 27 oktober 2004 @ 11:26:
Je menu in plaats van margin-left:150px; gewoon left:150px; geven?

Als ik dat doe dan komt het menu in IE idd wel beter op de plaats van bestemming, maarrr in Firefox werkt het dan weer niet

Zoals je in Firefox kunt zien is de gehele pagina in het midden gepositioneerd (wat trouwens in IE ook al niet het geval is).

"Imagination is more important than knowledge" - Albert Einstein

woensdag 27 oktober 2004 11:33

Acties:

André

Analytics dude

Zet dan de margin-left en margin-right van #menu op auto

woensdag 27 oktober 2004 11:34

Acties:

crisp

Devver

Pixelated

geef je #container nog een position:relative en text-align:left en zet een text-align:center op je body

André: die heeft hij al op de container staan, maar IE heeft ook een pos:rel nodig wil dat werken (en oudere versies ook een text-align op het containing element - de body dus)

Het is wellicht ook handig om #top een position:relative te geven. Bedenk daarbij dat absoluut gepositioneerde elementen gepositioneerd worden tov een gepositioneerd parent-element. Op dit moment is dat de body.

[ Voor 76% gewijzigd door crisp op 27-10-2004 11:37 ]

Intentionally left blank

woensdag 27 oktober 2004 11:42

Acties:

Ruud2001

a.ka. Ruud2000

Topicstarter

crisp schreef op 27 oktober 2004 @ 11:34:
geef je #container nog een position:relative en text-align:left en zet een text-align:center op je body

André: die heeft hij al op de container staan, maar IE heeft ook een pos:rel nodig wil dat werken (en oudere versies ook een text-align op het containing element - de body dus)

Het is wellicht ook handig om #top een position:relative te geven. Bedenk daarbij dat absoluut gepositioneerde elementen gepositioneerd worden tov een gepositioneerd parent-element. Op dit moment is dat de body.

Als ik deze wijzigingen doorvoer dan verandert er helaas niks.

Zit zelf te twijfelen over de structuur van de <div>jes daar bovenin. Als ik namelijk de #top <div> afsluit alvorens de #menu <div> met daarin #navcontainer te openen dan klopt het qua positionering al iets stukken beter.

edit:
Met een aangepast CSS en eerder afsluiten van de #top <div> ziet het er nu als volgt uit klik. Ik ga weer even verder stoeien, tips blijven natuurlijk altijd welkom. Voor nu alvast enorm bedankt!

[ Voor 18% gewijzigd door Ruud2001 op 27-10-2004 11:52 ]

"Imagination is more important than knowledge" - Albert Einstein

woensdag 27 oktober 2004 11:48

Acties:

crisp

Devver

Pixelated

dit is toch de juiste manier van centreren:

Cascading Stylesheet:

body {
    margin: 0;
    padding: 0;
    text-align: center;
}
#container {
    position: relative;
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

Intentionally left blank

woensdag 27 oktober 2004 12:31

Acties:

Ruud2001

a.ka. Ruud2000

Topicstarter

Het ziet er nu als volgt uit met de wijziging van hierboven meegenomen: klik

Nu vraag ik me af of in IE die 4 pixels verschil tussen de onderkant van de header (plaatje) en de grijze lijn (border-bottom 1px solid gray) iets te maken heeft met het verkeerd positionering van het menu. Zoals het nu is werkt het namelijk nog altijd perfect in FireFox alleen IE wil die absolute positionering niet correct uitvoeren

(staat 12 pixels te hoog t.o.v. onderkant header)

"Imagination is more important than knowledge" - Albert Einstein

woensdag 27 oktober 2004 12:49

Acties:

crisp

Devver

Pixelated

Begin eens met de margins van je ul op 0 zetten
Verder heb je problemen met het verschil in boxmodel tussen IE en FF omdat IE niet in standards compliant mode rendert door de onvolledige DTD.

Intentionally left blank

woensdag 27 oktober 2004 14:11

Acties:

Ruud2001

a.ka. Ruud2000

Topicstarter

Bedankt voor alle hulp! Op een paar kleinigheidjes na werkt het nu prima, klik hier voor het bewijs.

Voor de geïnteresseerden volgt hieronder nog de (relevante) code.

HTML:

code:

<body>
<div id="container"> 
  <div id="top">[img]"images/header.jpg"></div>
[/img]
      <ul id="navlist">
        <li id="active"><a href="home.htm" id="current">&nbsp;Home&nbsp;</a></li>
        <li><a href="archive.htm">&nbsp;Archive&nbsp;</a></li>
        <li><a href="aboutme.htm">&nbsp;About me&nbsp;</a></li>
        <li><a href="contact.htm">&nbsp;Contact&nbsp;</a></li>
        <li><a href="links.htm">&nbsp;Links&nbsp;</a></li>
      </ul>
  </div>
  <div id="leftnav">[img]"images/corner.jpg"></div>
[/img] 
     <h1>Lorem Ipsum</h1>
     <p>"Lorem ipsum"</p>
  </div>
  <div id="footer">[img]"images/footer.jpg"></div>
</div>
<div[/img]
    <p>Copyright &copy; 2005 - De Maki || Optimised for viewing with FireFox</p>
    <p>W3C plaatje</a> </p>
</div>
</body>
</html>

CSS:

code:

body
{
margin: 0px;
padding: 0px;
text-align: center;
background-color: #E4FAFF;
}

#container
{
position: relative;
text-align: left;
width: 760px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 115%;
}

#top
{
position: relative;
padding: 0px;
margin: 0px;
width: 760px;
height: 150px;
background-color: #fff;
border-bottom: 1px solid gray;
}

#leftnav
{
margin: 0px;
padding: 0px;
float: left;
width: 150px;
}

#content
{
padding: 15px;
margin-left: 150px;
border-left: 1px solid gray;
width: 590px;
}

#footer
{
clear: both;
margin: 0px;
padding: 0px;
background-color: #ddd;
border-top: 1px solid gray;
}

#copyright
{
width: 760px;
margin: 0px auto;
background-color: #E4FAFF;
color: #333;
border: 0px;
}

#copyright p
{
font-size: x-small;
}

#menu
{
position: absolute;
padding: 0px;
margin: 0px;
top: 121px;
left: 150px;
}

#navlist
{
padding: 0px;
margin: 12 px;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
margin: 0px;
padding: 0px;
display: inline;
}

#navlist li a
{
padding: 3px;
margin-left: 10px;
border: 1px solid gray;
background: #F7F2EC;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #F2C997;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

P.S. Crisp, je hebt mijn stem voor de GoT verkiezingen $_/-\o_$

edit:
Hmm... moet ik nog wel eerst nomineren zie ik

[ Voor 34% gewijzigd door Ruud2001 op 27-10-2004 14:17 ]

"Imagination is more important than knowledge" - Albert Einstein