scrollen syns i onödan

HTML & CSSur HTML, XHTML & CSS

12 svar · 348 visningar · startad av silfver 20 dec. 2003

silfverMedlem sedan apr. 200312 679 inlägg

Frågan20 dec. 2003 19:14#1

Hejsan!

Förstår inte varför scrollen visas, hjälp mig snälla! :D

http://www.silfver.se/v3.2/index2.php

Css:
body {
font-family: verdana;
font-size: 10px;
color: #000000;
}

.menu {
position: absolute;
left: 625px;
top: 75px;
}

.main {
border-right: 1px solid #999999;
border-left: 1px solid #999999;
width: 500px;
position: absolute;
left: 120px;
top: 70px;
height: 100%;
z-index: 1;
}

.borders {
border-right: 1px solid #999999;
border-left: 1px solid #999999;
width: 494px;
height: 100%;
position: absolute;
left: 2px;
top: 0px;
background: #f5f5f5;
}

.innehall {
padding: 5px;
}

.logo {
position: absolute;
top: 0px;
left: 120px;
}

mvh

icaaqMedlem sedan okt. 20005 273 inlägg

20 dec. 2003 20:02#2

[red]
body {
font-family: verdana;
font-size: 10px;
color: #000000;
[b]overflow: hidden;[/b]
}[/red]

mv icaaq

jarvkloMedlem sedan juli 20013 378 inlägg

20 dec. 2003 23:20#3

Förstår inte varför scrollen visas

Hmm...

Det beror på följande kod:

.main {
border-right: 1px solid #999999;
border-left: 1px solid #999999;
width: 500px;
[b]position: absolute;[/b]
left: 120px;
[b]top: 70px;
height: 100%;[/b]
z-index: 1;

När du absolutpositionerar ett block "på yttersta nivån" och sätter höjden till 100% så blir det blocket lika högt som webbläsarfönstrets visningsyta ("viewport")...
I ditt fall gäller detta garanterat eftersom du inte kör med någon <!DOCTYPE-tagg alls.

När du då "positionerar ner" detta block med top:70px, så hamnar dess underkant då alltså på "100% av webbläsarens höjd" + 70px vilket garanterar dig rullningslister ;)

silfverMedlem sedan apr. 200312 679 inlägg

21 dec. 2003 11:16#4

Aha, okay. Vad kan jag använda för "doctype" för att bli av med detta då? Eller är det ens möjligt? Eller, ska jag använda mig av en annan z-index?

Edit:

icaaq , jag vill ju att scrollen ska synas om det behövs, men jag vill inte att den ska vara permanent osynlig.

jarvkloMedlem sedan juli 20013 378 inlägg

21 dec. 2003 11:55#5

Som jag förstår det är detta en inneboende egenskap i CSS och inget man kan göra något åt. Många har försökt (vilket du ser i flera trådar under senaste halvåret här på wF om du letar lite) - har inte sett någon solklar lösning på problemet...

Dessutom finns det en del buggar i äldre webbläsare (som inte förstår att "position absolute" skall gälla inom ett viss block utan alltid felaktigt positionerar "absolutblock" mot webbläsarfönstrets koordinater)

Men det är ju ingen tröst - så för att vara lite konstruktiv också så föreslår jag att du klurar om din kod lite - här är ett exempel på hur du kan göra istället (exkluderat meny-div:en som du kan absolutpositionera "som tidigare" ;) )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body,html {height:100%; margin:0; padding:0}
.main {
  height:100%;
  width: 500px;
  margin-left:120px;
  background-color: #eeeeee;
  border-left:3px double gray;
  border-right:3px double gray;
  }
.logotyp {
  position:absolute;
  top:0;
  left:120px;
  width: 506px; /* plus 2*bredd på border från main */
  border-left: none;
  border-right: none;
  height:100px;
  background-color: white;
  border-bottom:1px solid gray;
  }
.innehall {
  margin: 100px 0 0 0;
  padding: 10px;
}  
-->
</style>
</head>
<body>
<div class="logotyp">Logotyp-div som ligger positionerad över main och har border-bottom</div>
<div class="main">
  <div class="innehall"><b>$topic</b> - med border-style: double istället</div>
</div>
</table>
</body>
</html>

silfverMedlem sedan apr. 200312 679 inlägg

21 dec. 2003 12:29#6

Tack för all din hjälp! Ändrade koden lite, så nu ser den ut såhär:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body, html {height:100%; margin:0; padding:0}
.main {
  height:100%;
  width: 500px;
  margin-left: 100px;
  background-color: #f5f5f5;
  border-left: 3px double #999999;
  border-right: 3px double #999999;
  }

.logotyp {
  position:absolute;
  top:0;
  left: 104px;  /* 120 minus bredden på border-left */
  width: 500px; /* plus 2*bredd på border */
  height:75px;
  }

.innehall {
  margin: 75px 0 0 0;
  padding: 5px;
}

body {
font-family: verdana;
font-size: 10px;
}
-->
  </style>
</head>
<body bgcolor="#FFFFFF">
<div class="logotyp"><img border="0" src="logo.gif" width="499" height="70"></div>
<div class="main">
  <div class="innehall"><b>$topic</b> - med border-style: double istället</div>
</div>
</body>
</html>

Men jag har försökt att få bordern lite mer ifrån varandra, men det går tydligen inte utan att göra den tjockare. Hade helst velat ha den som i mitt första exempel, men det går inte när man använder sig av "double" väl?

Edit:
Det är inte sant. Scrollen syns fortfarande i FB...

jarvkloMedlem sedan juli 20013 378 inlägg

21 dec. 2003 15:11#7

Men jag har försökt att få bordern lite mer ifrån varandra, men det går inte när man använder sig av "double" väl?

Förmodligen inte - hur "double" ritas ut bestäms av att den skall rita "en dubbel linje lika bred som angiven border-width" (typ)

Men eftersom du har en fix bredd på allt, och en fastställd position på din "main"-div så behöver du ju inte lägga *någonting* som har med utseendet att göra i just div.main - du kan ju lägga din "border" och din "bakgrundsfärg" i en 1px hög och *jättebred* repeterande bakgrundsbild i body istället och skippa border och background på main helt ? ;)

Det är inte sant. Scrollen syns fortfarande i FB...

Hmm...
Det var som attan... För koden du postade härovan? (om inte - har du en länk till sidan som strular? )
Och jag som inte hinner meka mer just nu :(
Förresten: vilken FB är det som det strular i?

silfverMedlem sedan apr. 200312 679 inlägg

21 dec. 2003 16:30#8

Koden som jag postade, och även din kod som du postade från början strular i Mozilla Firebird 0.7. Men det ser dock bra ut i IE. Blir lite smått galen på det här faktiskt :D

Sedan testade jag att göra en div med höjden 100% och top- och "left-marginalen" till noll, ändå så nådde inte "diven" enda ner i kanten.

jarvkloMedlem sedan juli 20013 378 inlägg

21 dec. 2003 18:55#9

Har testat lite i FB 0.6.1 nu... (körde bara tester i en drygt halvårsgammal Mozilla och i MSIE6 tidigare idag ;) )

Problemet uppkommer där också!

Tydligen är det margin-top på .innehall som "läcker över" till .main i just Firebird... :l

Empirisk lösning blir alltså att meka om .innehall lite:

.innehall {
  margin:0;
  padding: 80px 5px 5px 5px;
}

silfverMedlem sedan apr. 200312 679 inlägg

22 dec. 2003 06:32#10

Ja men se nu funkar det ju! Tack för hjälpen :)
God jul!

silfverMedlem sedan apr. 200312 679 inlägg

22 dec. 2003 17:19#11

Fast nu ser jag... När det blir för mycket text så stannar kanterna kvar, dom dras inte med hela tiden :p alltså, fuck mozilla :D

Edit:
Nej men jag blir så less på skiten så nu tar jag bort
.main {
height:100%;
}

och ersätter med border-bottom. Får duga så!

jarvkloMedlem sedan juli 20013 378 inlägg

22 dec. 2003 18:42#12

Hmm...

Om du inte vill "fucka Mozilla" och ändå ha din design kan du ju annars göra såhär:

Byt först ut "height:100%" i .main mot "min-height:100%" - det fixar problemet i Mozilla men "fuckar" MSIE vid lite text...

Lägg sedan till följande villkorade extra stilmall efter din ordinarie stilmall på varje sida:

<!--[if gte IE 5]>
<style type="text/css">
.main {height:100px} /* specialarna för MSIE  */
</style>
<![endif]-->

Den lilla snutten åtgärdar problemet som "min-height" inför för MSIE - inte snyggt, men användbart ;)

Mer om villkorliga kommentarer i MSIE finns t.ex. här: http://www.webforum.nu/showthread.php?s=&postid=667854#post667854

silfverMedlem sedan apr. 200312 679 inlägg

23 dec. 2003 10:08#13

Hehe, okay tack :)
Jag använder ju mig av php, så den inkluderar alla sidor i index. Antar att det räcker att jag skriver in den där kommentaren i index då? Får väl testa. Tack för hjälpen :) Återkommer när jag har testat.

Edit:
Har testat koden nu, men utan lyckat resultat. Fårstår mig inte på html ibland... Men nu gör jag så att jag använder bottom-border också, med en <br> under så blir det jättefint.

mvh