Scrollbar in IE / Firefox gelijktrekken - Softwareontwikkeling

zondag 24 februari 2008 14:09

Acties:

Topicstarter

Ik ben bezig met een redesign voor mijn website. Een voorlopige pagina is te vinden op: http://www.alice-in-wonderland.net/test/

Het probleem is, dat de scrollbar in IE direct langs de 'bladzijden' loopt. Ik wil dat hij, net als in Firefox, keurig rechts van het browservenster komt te staan.

Ik heb echter al heel lang zitten prutsen om de rest van dit design cross-browser te laten werken en ik zie nu echt niet meer hoe ik dit laatste puntje moet oplossen, zonder de rest van de lay-out weer te verklooien.

Dit is de code erachter:

Even globaal de structuur van de html-pagina:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
(...)
<div id="header">

   <div id="left-menu"></div>

   <div id="right-pages"></div>

   <div id="back">
    <div id="content"></div>
   </div>

</div>

<div id="leftpage"></div>

Cascading Stylesheet:

body
{
  margin:0;
  padding:140px 0 0 87px;
  scrollbar-track-color:#FFEFC6;
}

div#leftpage
{
  position:absolute;
  top:0;
  right:50%;
  margin-right:397px;
  width:50%;
  height:100%;
}
 
div#header
{
  position:absolute;
  top:0;
  left:50%;
  margin-left:-313px;
  width:700px;
  height:140px;
  z-index: 3;
}
 
div#left-menu
{
  position:absolute;
  top:0;
  left:50%;
  margin-left:-400px;
  width:87px;
  height:100%;
  border-left: 2px solid #B5A08B;
  z-index:1;
}
 
div#right-pages
{
  position:absolute;
  top:0;
  left:50%;
  margin-left:387px;
  width:50px;
  height:100%;
}
 
div#back
{
 position:absolute;
 top:0px;
 left:50%;
 margin-left:-313px;
 bottom: 0px;
}
 
div#content
{
 width:700px;
 margin-top:140px;
}
 
@media screen
{
  body>div#leftpage
  {
   position:fixed;
  }
  body>div#header
  {
   position:fixed;
  }
  body>div#left-menu
  {
   position:fixed;
  }
  body>div#right-pages
  {
   position:fixed;
  }
}

* html body
{
  overflow:hidden;
} 
 
* html div#back
{
  height:100%;
  overflow:auto;
}

Weet iemand wat ik moet aanpassen om dit op te lossen?

zondag 24 februari 2008 14:29

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Kan iemand even...?
Ik mis eigenlijk een beetje wat je zelf denkt waar het probleem zit, wat je hebt geprobeerd en wat er niet werkt. Nu 'dump' je een lap HTML/CSS en mogen wij het uitvogelen; dat is niet de manier waarop we hier werken (zie ook onze Quickstart).

Als je je topic met betreffende info zou willen aanvullen dan zou dat

zijn

[ Voor 9% gewijzigd door RobIII op 24-02-2008 14:29 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zondag 24 februari 2008 15:07

Acties:

Millennyum

Topicstarter

Sorry

Het probleem zit 'm in de div 'back'. Dit is de div die scrollt. Deze komt wat betreft de breedte tot aan de 'pagina's' van het boek.
Het is op zich logisch dat IE de scrollbar gelijk rechts van de div plaatst; halverwege de pagina dus. Maar Firefox trekt zich niets aan van waar de rechterzijde van de div precies is, hij plaatst de scrollbar gewoon rechts van het venster. En da's toevallig ook wat ik wil, ik weet alleen niet waarom hij dat doet.

Om het ook in IE zo te krijgen, zou ik waarschijnlijk de div zo breed moeten maken als het browservenster. Dat is geen optie, want ten eerste loopt hij dan over de rest van het design heen, en ten tweede weet ik niet hoe breed de div moet zijn, omdat dat afhankelijk is van de breedte van de browser.

Waarschijnlijk moet ik het dus totaal anders gaan aanpakken qua ontwerp, maar zoals ik al zei heb ik er al heel lang over gedaan om dit een beetje cross-browser werkend te krijgen. Ik heb dus ook geen idee hoe ik het anders zou moeten doen.

Ik hoop dat hier mensen zitten die weten of dit op te lossen is zonder het hele design weer om te moeten gooien. Misschien dat iemand me kan vertellen waarom Firefox de scrollbar wel daar plaatst, zodat ik daarvan de oplossing voor IE kan afleiden?