Is there a way to make it work in IE? I searched the web and found some 'hacks' but I could not get them to work, and the websites used too much jargon =/
I want a menu to appear fixed in IE
Unfortunately, Internet Explorer currently does not support this property. There's no fancy CSS hack around it. Now, there may be some Javascript solutions for achieving this, that's a different story. Perhaps IE 7 will support this? I dunno, at any rate, you'll most likely be looking into a JS solution.This link (<!-- m --><a class="postlink" href="http://www.stunicholls.myby.co.uk/layouts/fixed.html">http://www.stunicholls.myby.co.uk/layouts/fixed.html</a><!-- m -->) has a simple hack(is it?) but I don't know how to get it to work.. anyone care to explain? This page explains how it works: <!-- m --><a class="postlink" href="http://tagsoup.com/-dev/null-/css/fixed/">http://tagsoup.com/-dev/null-/css/fixed/</a><!-- m -->
In IE7 position:fixed has been implemented.Somehow I can't get it to work.. Am I doing anything wrong?
Css:
<style type="text/css">
/* LAYOUT */
#content{
margin-left: 28%;
margin-right: 28%;
margin-top: 50px;
}
h1{font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;}
#content p{
font-size: 14px;
line-height: 120%;
font-family: "Comic Sans MS", sans-serif;
}
/* left navigation */
#leftNav{
position: absolute;
left: 80px;
top: 100px;
width: 120px;
background-color: blue;
}
/* for IE positioning */
div#leftNav
{
position: fixed;
}
/* Don't do this at home */
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
padding: 0;
}
* html div#leftNav
{
position: absolute;
}
/* All done. */
</style>
html:
<body>
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ac tellus ut dolor bibendum dapibus. Vivamus auctor augue sit amet tellus. Duis convallis lacus id erat. Nullam sed sapien. Etiam feugiat interdum libero. Etiam id augue ac tellus suscipit tincidunt. Ut condimentum consectetuer nibh. Sed posuere tristique velit. Proin id lorem vel nibh tempus egestas. Vivamus placerat, ipsum eget eleifend gravida, quam eros rhoncus arcu, ut pharetra purus felis lacinia magna. Phasellus consectetuer porttitor lectus. Maecenas volutpat, sem ut dictum fermentum, nulla tortor tristique urna, at tempor velit dolor ut diam. Duis ultrices porttitor lorem. Vivamus sem. Vestibulum sagittis ultrices odio. Integer consequat magna ut dui. Maecenas ut eros.
Nullam vitae dolor sed sapien semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec sem augue, malesuada eu, vestibulum at, sollicitudin et, velit. Phasellus malesuada rutrum turpis. Vivamus venenatis wisi viverra tortor. In dignissim, libero a pretium pharetra, libero wisi suscipit eros, ut convallis dolor lacus at magna. Nullam viverra. Mauris turpis mi, pretium quis, congue nec, posuere vitae, augue. Curabitur erat. Vestibulum sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus nulla ipsum, ultricies eleifend, sollicitudin quis, venenatis quis, sem. Nulla mi enim, ultrices at, tempus sit amet, consequat non, metus. In non tortor. Ut aliquet, eros vel ultricies rhoncus, ipsum augue faucibus est, ut venenatis enim arcu et nulla. Integer elementum lacus non lorem.
Nullam tempus dui et purus. Integer ut neque. Nulla eleifend. Integer orci turpis, consequat sit amet, volutpat a, mollis a, tellus. Proin aliquam laoreet dolor. Vestibulum orci dolor, blandit in, porta a, dictum sit amet, ligula. Suspendisse potenti. Vivamus volutpat. Duis purus. Etiam aliquam mauris eget neque. Integer sit amet ipsum. Sed mauris est, blandit quis, sollicitudin vitae, ullamcorper nec, elit. In porta neque nec dolor. Pellentesque mi pede, placerat id, feugiat vel, nonummy placerat, enim. Sed est. Mauris facilisis, elit et eleifend commodo, nulla quam tempus neque, non ultricies metus arcu eu ipsum. Aliquam eget justo. Fusce malesuada. In scelerisque nibh sit amet libero. Nullam ultricies iaculis sem.
In a neque. Aliquam quis diam non odio posuere gravida. Curabitur aliquet mi eget est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent at nisl. Praesent facilisis, risus et condimentum imperdiet, libero ligula viverra nibh, at ultricies sapien velit nec pede. Mauris feugiat. Pellentesque aliquam mattis arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non diam. Quisque iaculis nisl pretium arcu. Vivamus varius pede et urna.
Sed pulvinar. Proin viverra lacinia orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque lobortis arcu. Sed elementum porttitor justo. Donec eleifend consequat est. Vivamus non mauris. Vestibulum elementum. Integer at lorem. Morbi tincidunt. Ut tristique aliquet wisi. Aenean mattis. Vestibulum vulputate interdum turpis. Integer justo ipsum, ultricies sed, pharetra nec, mollis at, neque. Aliquam consectetuer laoreet mi. Sed ut risus ut nulla malesuada molestie.
</p>
</div>
<div id="leftNav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 6</a></li>
</ul>
</div>
</body>
Thanks in advance!It works if IE6 is in 'standards-compliant mode'. Do you have this as the first line in your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
For IE5 use a 'conditional comment' in the head:
<!--[if IE 5]>
<style type="text/css">
body
{
overflow: hidden;
}
#content
{
height: 100%;
overflow: auto;
}
</style>
<![endif]-->
Read through the link I gave.Sorry!!
I got it to work, but sometimes text magically disappears:
I'm happy with the results though, at least now I can have a fixed navigation bar!
Edit: on second thought, the text thing makes it almost not worth it..
Edit 2(didn't want to start another thread): how can I add drop shadows to all sides of a content div? To make it look like the content is some distance away from the background. I ask too much..
I assume you require images for the shadows:
<div style="background:url(../Images/leftShadow.gif) repeat-y left">
<div style="background:url(../Images/rightShadow.gif) repeat-y right; padding:0 30px; width:10em;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce velit purus, euismod sed, malesuada eu, semper sit amet, orci.
</div>
</div>
I want a menu to appear fixed in IE
Unfortunately, Internet Explorer currently does not support this property. There's no fancy CSS hack around it. Now, there may be some Javascript solutions for achieving this, that's a different story. Perhaps IE 7 will support this? I dunno, at any rate, you'll most likely be looking into a JS solution.This link (<!-- m --><a class="postlink" href="http://www.stunicholls.myby.co.uk/layouts/fixed.html">http://www.stunicholls.myby.co.uk/layouts/fixed.html</a><!-- m -->) has a simple hack(is it?) but I don't know how to get it to work.. anyone care to explain? This page explains how it works: <!-- m --><a class="postlink" href="http://tagsoup.com/-dev/null-/css/fixed/">http://tagsoup.com/-dev/null-/css/fixed/</a><!-- m -->In IE7 position:fixed has been implemented.Somehow I can't get it to work.. Am I doing anything wrong?
Css:
<style type="text/css">
/* LAYOUT */
#content{
margin-left: 28%;
margin-right: 28%;
margin-top: 50px;
}
h1{font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif;}
#content p{
font-size: 14px;
line-height: 120%;
font-family: "Comic Sans MS", sans-serif;
}
/* left navigation */
#leftNav{
position: absolute;
left: 80px;
top: 100px;
width: 120px;
background-color: blue;
}
/* for IE positioning */
div#leftNav
{
position: fixed;
}
/* Don't do this at home */
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
padding: 0;
}
* html div#leftNav
{
position: absolute;
}
/* All done. */
</style>
html:
<body>
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ac tellus ut dolor bibendum dapibus. Vivamus auctor augue sit amet tellus. Duis convallis lacus id erat. Nullam sed sapien. Etiam feugiat interdum libero. Etiam id augue ac tellus suscipit tincidunt. Ut condimentum consectetuer nibh. Sed posuere tristique velit. Proin id lorem vel nibh tempus egestas. Vivamus placerat, ipsum eget eleifend gravida, quam eros rhoncus arcu, ut pharetra purus felis lacinia magna. Phasellus consectetuer porttitor lectus. Maecenas volutpat, sem ut dictum fermentum, nulla tortor tristique urna, at tempor velit dolor ut diam. Duis ultrices porttitor lorem. Vivamus sem. Vestibulum sagittis ultrices odio. Integer consequat magna ut dui. Maecenas ut eros.
Nullam vitae dolor sed sapien semper rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec sem augue, malesuada eu, vestibulum at, sollicitudin et, velit. Phasellus malesuada rutrum turpis. Vivamus venenatis wisi viverra tortor. In dignissim, libero a pretium pharetra, libero wisi suscipit eros, ut convallis dolor lacus at magna. Nullam viverra. Mauris turpis mi, pretium quis, congue nec, posuere vitae, augue. Curabitur erat. Vestibulum sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus nulla ipsum, ultricies eleifend, sollicitudin quis, venenatis quis, sem. Nulla mi enim, ultrices at, tempus sit amet, consequat non, metus. In non tortor. Ut aliquet, eros vel ultricies rhoncus, ipsum augue faucibus est, ut venenatis enim arcu et nulla. Integer elementum lacus non lorem.
Nullam tempus dui et purus. Integer ut neque. Nulla eleifend. Integer orci turpis, consequat sit amet, volutpat a, mollis a, tellus. Proin aliquam laoreet dolor. Vestibulum orci dolor, blandit in, porta a, dictum sit amet, ligula. Suspendisse potenti. Vivamus volutpat. Duis purus. Etiam aliquam mauris eget neque. Integer sit amet ipsum. Sed mauris est, blandit quis, sollicitudin vitae, ullamcorper nec, elit. In porta neque nec dolor. Pellentesque mi pede, placerat id, feugiat vel, nonummy placerat, enim. Sed est. Mauris facilisis, elit et eleifend commodo, nulla quam tempus neque, non ultricies metus arcu eu ipsum. Aliquam eget justo. Fusce malesuada. In scelerisque nibh sit amet libero. Nullam ultricies iaculis sem.
In a neque. Aliquam quis diam non odio posuere gravida. Curabitur aliquet mi eget est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent at nisl. Praesent facilisis, risus et condimentum imperdiet, libero ligula viverra nibh, at ultricies sapien velit nec pede. Mauris feugiat. Pellentesque aliquam mattis arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non diam. Quisque iaculis nisl pretium arcu. Vivamus varius pede et urna.
Sed pulvinar. Proin viverra lacinia orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque lobortis arcu. Sed elementum porttitor justo. Donec eleifend consequat est. Vivamus non mauris. Vestibulum elementum. Integer at lorem. Morbi tincidunt. Ut tristique aliquet wisi. Aenean mattis. Vestibulum vulputate interdum turpis. Integer justo ipsum, ultricies sed, pharetra nec, mollis at, neque. Aliquam consectetuer laoreet mi. Sed ut risus ut nulla malesuada molestie.
</p>
</div>
<div id="leftNav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fake link 6</a></li>
</ul>
</div>
</body>
Thanks in advance!It works if IE6 is in 'standards-compliant mode'. Do you have this as the first line in your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
For IE5 use a 'conditional comment' in the head:
<!--[if IE 5]>
<style type="text/css">
body
{
overflow: hidden;
}
#content
{
height: 100%;
overflow: auto;
}
</style>
<![endif]-->
Read through the link I gave.Sorry!!
I got it to work, but sometimes text magically disappears:
I'm happy with the results though, at least now I can have a fixed navigation bar!
Edit: on second thought, the text thing makes it almost not worth it..
Edit 2(didn't want to start another thread): how can I add drop shadows to all sides of a content div? To make it look like the content is some distance away from the background. I ask too much..
I assume you require images for the shadows:<div style="background:url(../Images/leftShadow.gif) repeat-y left">
<div style="background:url(../Images/rightShadow.gif) repeat-y right; padding:0 30px; width:10em;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Fusce velit purus, euismod sed, malesuada eu, semper sit amet, orci.
</div>
</div>