7 svar · 307 visningar · startad av higa
Jag hittade för ett tag sedan en sida med ett css-hack för att få en position:fixed liknande effekt i MSIE, men då får jag ett problem med att scrollhjulet på musen inte funkar i Mozilla för att scrolla, utan bara i IE.
Finns det något work-around för det, typ -moz-user-focus-wheel:force (hoppas ni förstår)?
Sidan med hacket finns på http://tom.me.uk/2002/5/ie-position-fixed.html och "content"-divan går inte att scrolla mha hjulet i Mozilla, utan bara genom att dra i scrollbaren.
Tyvärr är inte det här implementerat i Mozilla ännu.
Varför inte ta bort overflow:hidden; på body taggen o ha ta bort content divven o ha innehållet i bodyn istället? Då kommer mousewheel att fungera.
Skulle tippa på att för då blir den gula menyn att ligga kvar på toppen av sidan när du scrollar ner. Detta kan man fixa med javascript som kontinuerligt flyttar med menyn, men det kommer att "hoppa" lite, och då tappar man meningen med detta "hack".
Jag prövade att ta bort overflow:hidden på body och ta bort content divan, men då ligger inte menyn fast. Och då kan man ju lika gärna köra med typ
body div[class="meny"] {position:fixed}
.meny {position:absolute}
så blir den iaf fast i webbläsare som klarar position:fixed.
Vad är isåfall minst irriterande, att skrollhjulet inte funkar i Mozilla (som med hacket) eller att menyer inte ligger fast i äldre browsers som inte klarar position:fixed?
Det här hacket får dessutom Opera 7.1 (som stöder position:fixed;) att hänga sig...
Puh, lyckades greja så att det funkar i både Mozilla, Opera 7 och MSIE nu, genom att använda CSS2 selectors för att cansla hacket och köra med position:fixed för moderna browsers och använda IE extensions (overflow-x, overflow-y) för att bara IE skulle sätta overflow på html eftersom jag inte kom på hur man skulle kunna använda en CSS2 selector för att nå just <html>
Utan overflow på <html> ser det ut som ett tarmframfall i MSIE, men overflowen förstår för alla andra läsare :)
Higa, kan inte du posta koden o dela med dig?
Visst, här är en strippad variant:
html, body {overflow-x: hidden; overflow-y:hidden;padding: 0px; margin: 0px; height: 100%; -nsdap:no}
body {width: 100%;background: url('../bilder/bakgrund.gif') #B5DAFE fixed;}
/* Environment */
.head, .menu, .content, .headmenu { position: absolute; -nsdap:no}
div[class="head"], div[class="menu"], div[class="headmenu"] {position:fixed}
.head .logo {float: left;margin-left: 110px; border: none; -nsdap:no}
div.content { left: 0px; top: 0px; height: 100%; width:100%; overflow: auto; -nsdap: yes;}
body > div[class="content"] {overflow:visible; left: 123px; top: 97px; right: 0px; width:auto;}
#padder { border-top-width: 1px}
#padder {padding: 101px 4px 4px 127px; margin: 0px; width: auto; max-width: 500px; -nsdap:no}
div[class="content"] > div#padder {padding: 4px;}
/* left: 123px; top: 97px; */
div.head
{
top: 0px; left: 0px; width: 100%; height: 74px; background: url('../bilder/brick.gif') #F04024 0px 0px;
z-index:10;-nsdap:no
}
div.headmenu {width: 218px; float: right;z-index: 16; right:0px; top: 0px; -nsdap:no;}
div.menu
{
top: 0px; left: 0px; height: 100%;width: 107px;
background: url('../bilder/brick.gif') #F04024 20px 0px;
z-index: 11; overflow: hidden;-nsdap:no;
}