top och bottom i IE?

6 svar · 275 visningar · startad av Nexus86 18 okt. 2003

Nexus86Medlem sedan okt. 20023 030 inlägg

Frågan18 okt. 2003 01:05#1

Jag har märkt att man inte kan använda både top och bottom på en div i IE. Jag använder nedanstående kod men det vill inte fungera. Jag får bara en liten div uppe i hörnet. :l

Finns det någon workaround?

div.left_menu {
	background-color: #CCCC99;
	bottom: 5px;
	left: 5px;
	position: absolute;
	top: 5px;
	vertical-align: top;
	width: 125px;
}

bossseMedlem sedan juni 2003771 inlägg

18 okt. 2003 13:42#2

<html> <head>
 <STYLE type="text/css">
.Left_Meny 
{background-color:green; width:30%; height:90%; border:2px solid yellow;
position:absolute; left:10%;top:2%;overflow:auto; font-size:14pt; color:yellow; padding:10px}
</STYLE>
</head>

<body bgcolor=lightblue>
<div class=Left_Meny>Så här positionerar du en div. Har du både <BR> 
top och bottom angiven i din css, så gäller alltid <BR>
den sista angivelsen i koden. <BR>
Med din kod blir alltså positionen left5px och top5px <BR>
Alltså upptill i det vänstra hörnet. <BR>
Skriver man enligt mitt exempel så kommer det automatiskt fram <BR>
en scroll till höger om innehållet ej ryms. <BR>
Dessutom visas detta lika i alla upplösningar tack vare procent-angivelse
</div>
</BODY> 
</HTML>

PeeerMedlem sedan mars 20025 907 inlägg

18 okt. 2003 14:01#3

bosse > tror inte det var så nexus menade. Med din kod kan du aldrig få den att slutar precis 5 px från både överkanten och underkanten. Problemet är att nexus kod är korrekt (funger utmärkt i mozilla fb t.ex.), men att IE inte tolkar den rätt. Har samma problem själv, så om någon har en lösning som fungerar båda i IE och FB vore nog både jag och nexus glada :)

PeeerMedlem sedan mars 20025 907 inlägg

18 okt. 2003 14:25#4

Har nog hittat en fungerande lösning
http://archivist.incutio.com/viewlist/css-discuss/31677
I ditt fall blir det väl något sådant här:

#left_menu {
	background-color: #CCCC99;
	bottom: 5px;
	left: 5px;
	position: absolute;
	top: 5px;
	height : expression(document.body.clientHeight - 10);
	overflow : auto;
	vertical-align: top;
	width: 125px;
	z-index:4;
}

Den enda nackdelen jag ser är att koden inte validerar, men den fungerar ju, så man kan nog använda den tills IE ser till att fungera korrekt

Nexus86Medlem sedan okt. 20023 030 inlägg

18 okt. 2003 16:08#5

Tackar! Ska titta på det. Men för att få det att validera rätt (eftersom expression troligtvis är IE-specifikt) kan man ju göra såhär:

<style type="text/css">
.left_menu {
	background-color: #CCCC99;
	bottom: 5px;
	left: 5px;
	position: absolute;
	top: 5px;
	vertical-align: top;
	width: 125px;
}
</style>

[b]<!--[if IE]>
<style type="text/css">
.left_menu {
	height : expression(document.body.clientHeight - 10);
}[/b]
</style>
<![endif]-->

Ska dock testa detta. :)

bossseMedlem sedan juni 2003771 inlägg

18 okt. 2003 16:29#6

Aha, diven ska sträcka sig från top 5px ned till bottom 5px och ligga 5px från vänsterkanten,
Då blir det så här.

<html> 
<head>
 
<STYLE type="text/css">
Body 
{
background-color:blue; 
margin-left:5px; 
margin-top:5px; 
margin-bottom:5px;
}

#left_menu 
{
background-color:green;
width:125px;
height:100%; 
overflow:auto; 
}
</STYLE>

</head>

<body>
<div id=Left_Menu>
</div>
</BODY> 
</HTML>

Nexus86Medlem sedan okt. 20023 030 inlägg

18 okt. 2003 16:33#7

Eftersom jag har position: absolute så fungerar inte det där. Meningen är inte att jag ska ha den 5px från toppen utan 115px och det gör att left_menu går utanför diven som den ligger i eftersom jag som sagt har position: absolute.