Jag har en kod som är bifogad nedan där jag har gjort modifieringar av befintlig kod. ("frames" med css). När jag väl får det att fungera med Firefox och Safari så fungerar det inte i Internet Explorer. Som jag brukar säga, man måste göra varje webbsida 2 gånger. Först en gång för riktiga webbläsare och sedan igen för IE. url! Sorry, URL: http://omberg.netseller.se/testcss/default2.asp Som en länk så att Niklas inte ens behöver markera, kopiera och klistra in: Hehe. Ok, har kollat runt lite och testat det mesta. Men får det inte riktigt att fungera i IE. Vet någon hur man har en TOP som är ca 50px och en MAIN-sida under som man vill ge värdet 100%. Då blir sidan 100%+44px, går detta att förhindra och hur i så fall? För det första, har du ställt om till strict mode? Tack Niklas,CSS Problem (framesliknande layout, IE-problem)
Kod:
<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left, Top and Bottom Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentLeft{
position: absolute;
top: 44px;
left: 0;
width: 299px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentTop{
position: absolute;
top: 0;
left: 0px;
right: 0;
height: 44px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 44px; /*Set top value to HeightOfTopFrameDiv*/
left: 299px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
bottom: 0px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 44px 0 0 299px; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="framecontentLeft">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentTop">
<div class="innertube">
<h1>CSS Left, Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: Dynamic Drive CSS Library</p>
</div>
</div>
</body>
</html>Sv: CSS Problem (framesliknande layout, IE-problem)
Det vanligaste tillvägagångssättet är såhär:
<code>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie_styles.css" /><![endif]-->
</head>
</code>
Där style.css innehåller styles för alla webbläsare, inklusive IE.
Och ie_styles.css innehåller alla fixar för IE.Sv: CSS Problem (framesliknande layout, IE-problem)
för min del orkar jag inte sitta och kopiera kod...Sv:CSS Problem (framesliknande layout, IE-problem)
Sv: CSS Problem (framesliknande layout, IE-problem)
http://omberg.netseller.se/testcss/default2.aspSv: CSS Problem (framesliknande layout, IE-problem)
Christian: Lattja lite med "right" och "width" i framecontentTop, gärna tillsammans med lite olika position: absolute/position:relative. Konstatera när ie beter sig som du vill.
Sen kan man ju fråga sig varför du _vill_ ha ie i quirks mode?
Ta bort första raden och kolla om det blir bättre.
Edit: Och varför transitional öht?
Kör med strict istället, så finns det chans att det blir enklare.Sv:CSS Problem (framesliknande layout, IE-problem)
Jättetacksam för hjälp.Sv: CSS Problem (framesliknande layout, IE-problem)
Mycket inkompatibilitet löser sig av sig själv om man gör det.
För det andra, essensen av det du vill ha är väl egentligen:
<body>
<div id="top"></div>
<div id="bottom"></div>
</body>
?
Och sen ha top.height = 50px och få bottom att fylla upp hela undre delen?
För att göra det brukar man få mecka med marginaler på olika sätt, alt. fixa i efterhand med js.
Enkel principlösning: Lägg top "flytande" ovanpå. Gör bottom 100% och sätt den lika långt ner som top mha padding/margin.
Sen vetefan om jag tycker att det är en så bra ide ändå - det är en rätt ologisk layout.
(Och btw, i just de här fallen kan det faktiskt vara rätt att sätta ie ur spel som du gjorde där.)
EDIT: här finns ju ett bra exempel, är det därifrån du har fått grejerna?
http://limpid.nl/lab/css/fixed/headerSv:CSS Problem (framesliknande layout, IE-problem)
Mitt problem är löst med hjälp av denna koden från sidan som du hänvisade till:
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header and left-sidebar</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0 left-sidebar-<length>;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
div#left-sidebar{
position:absolute;
top:header-<length>;
left:0;
width:left-sidebar-<length>;
height:100%;
}
@media screen{
body>div#header{
position:fixed;
}
body>div#left-sidebar{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="header"> header </div>
<div id="left-sidebar"> left-sidebar </div>
<div id="content"> content </div>