PDA

View Full Version : Position:fixed; IE fix?



relyt_123
Mar 2nd, 2008, 08:05 PM
Alright, so I'm attempting to make a horizontal type of site. I want the title, and the navbar to follow the site when it scrolls horizontally.

I got it to work well in Opera and FF, but IE doesn't seem to like it. Is there any way to have content follow the window horizontally in IE?

effpeetee
Mar 2nd, 2008, 08:41 PM
Alright, so I'm attempting to make a horizontal type of site. I want the title, and the navbar to follow the site when it scrolls horizontally.

I got it to work well in Opera and FF, but IE doesn't seem to like it. Is there any way to have content follow the window horizontally in IE?
We need to see your code, or better still a link.

Frank

relyt_123
Mar 2nd, 2008, 08:49 PM
Will do.

HTML: http://rafb.net/p/7dsBnA76.html
CSS: http://rafb.net/p/nRAEN155.html

Sorry about that.

_Aerospace_Eng_
Mar 2nd, 2008, 08:56 PM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project Flaming Mongoose</title>
<style type="text/css">
* {
font-family:Georgia, Verdana, Sans-serif;
font-size:16px;
margin:0;
padding:0;
}
body, html {
height:100&#37;;
}
#header {
text-align:center;
font-size:48px;
height:96px;
line-height:96px;
position:fixed;
left:0px;
top:0px;
}
#navigation {
width:100%;
text-align:center;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
line-height:32px;
position:fixed;
left:0px;
top:97px;
}
#content {
border-top:1px solid #000000;
border-bottom:1px solid #000000;
margin:147px 0 16px;
padding:5px;
}
a {
color:#000000;
margin:0px 8px;
}
a:hover {
color:#AAAAAA;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
overflow-x:auto;
overflow-y:hidden;
}
body {
overflow-y:auto;
}
#header, #navigation {
position:absolute;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">Project Flaming Mongoose</div>
<div id="navigation"> <a href="#">Home</a> <a href="#">Other</a> <a href="#">Other2</a> <a href="#">Other2</a> <a href="#">Other2</a> <a href="#">Other2</a> <a href="#">Other2</a></div>
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum cursus sapien. Donec in felis non lorem rhoncus tincidunt. Sed blandit urna eget elit. Vestibulum pellentesque, risus vel consectetuer adipiscing, sem orci rhoncus massa, a mollis enim lectus quis justo. Etiam ut ligula in tellus ornare vulputate. Nunc sollicitudin magna quis tellus. Aenean in nibh a diam euismod feugiat. Aliquam non justo. Vestibulum nisl pede, dapibus sit amet, porttitor eget, imperdiet sed, diam. Praesent vel nisl. Fusce ut neque. Nullam vulputate dui venenatis nulla. Vivamus felis. In hac habitasse platea dictumst. Praesent dui odio, eleifend placerat, pellentesque ut, viverra in, pede. </p>
<p> Morbi leo mi, tincidunt id, tristique ultricies, congue in, metus. Quisque vel dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Aliquam dui orci, cursus sit amet, eleifend non, sagittis eu, dolor. Integer arcu neque, dapibus dignissim, elementum laoreet, aliquet vitae, lacus. Phasellus pede. Quisque pellentesque porttitor lectus. Curabitur magna urna, adipiscing at, convallis quis, congue non, mi. Curabitur justo. </p>
<p> Vestibulum tempor. Duis quis justo. Integer imperdiet. Donec malesuada. Nulla risus. Praesent vitae libero ut felis vehicula accumsan. Pellentesque lectus nibh, dapibus pellentesque, laoreet in, consequat aliquam, ante. Proin semper. Suspendisse risus. Ut ultricies, lacus vitae laoreet ullamcorper, turpis turpis sollicitudin felis, a imperdiet enim augue blandit ligula. Curabitur fringilla, lectus et fringilla vulputate, dolor odio laoreet ipsum, vel rhoncus sem velit non eros. Aliquam scelerisque. Fusce a lacus. Maecenas euismod viverra magna. Cras nunc neque, euismod et, venenatis id, ultricies at, enim. Mauris quis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<p> Aenean fringilla urna faucibus neque. Aenean in diam. Donec egestas adipiscing purus. Praesent metus elit, semper eget, luctus varius, eleifend in, erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In orci. Aliquam erat volutpat. Nulla facilisi. Suspendisse eleifend dignissim arcu. Aliquam nisi. Donec risus. Nunc quam ipsum, gravida ut, suscipit non, mollis et, lorem. </p>
<p> Praesent sit amet arcu. Nam ac mi in nisi sodales vulputate. Aenean ac diam ac tellus adipiscing suscipit. Etiam urna nibh, vehicula ac, faucibus bibendum, luctus accumsan, diam. Cras vestibulum ornare velit. Vivamus eget sem et sem aliquet euismod. Nullam imperdiet tortor in enim. Sed odio ante, accumsan at, cursus non, pellentesque sollicitudin, pede. Suspendisse convallis nibh sed mi. Ut varius nulla et odio. </p>
<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in nunc. Phasellus elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ut augue. Nullam eu metus. Vivamus ullamcorper, nisl quis pellentesque tristique, dolor risus porta augue, convallis lobortis felis est vitae pede. Praesent non enim imperdiet nisi semper auctor. Duis dapibus lacinia dui. Fusce accumsan, tellus vitae congue sollicitudin, augue turpis scelerisque nunc, ac egestas justo erat a diam. Aenean egestas interdum augue. Nullam vulputate volutpat leo. Nulla volutpat enim vel pede. Phasellus cursus nisl vel diam. Aenean euismod purus vitae nisl. </p>
<p> Duis ultricies ipsum eget metus. Aliquam erat volutpat. Sed vestibulum commodo quam. Sed egestas sem at nunc. Morbi ultricies erat gravida lorem. Sed cursus ante non purus. Sed a tellus. Fusce vitae erat. Quisque porta enim a ante. Sed et lorem. Nam semper tellus et massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam erat nulla, varius at, fringilla vel, fermentum quis, lectus. Aliquam laoreet velit sed lacus. Phasellus consectetuer. Curabitur mi magna, malesuada ac, malesuada sed, tincidunt eu, pede. Sed id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam semper velit id mauris. Nam dignissim commodo metus. </p>
<p> Duis vel diam. In nonummy ornare sem. Vestibulum fermentum ullamcorper purus. Sed lectus. Morbi enim. Ut eu arcu. Aenean lorem ligula, hendrerit nec, pellentesque quis, consequat eu, nibh. Fusce metus pede, placerat vel, mollis nec, blandit scelerisque, elit. Nulla facilisi. Aenean dolor mauris, iaculis eget, ullamcorper in, ullamcorper nec, eros. Maecenas est. Cras turpis. Integer tincidunt laoreet nisl. Fusce vitae nibh nec elit congue fermentum. Fusce adipiscing sollicitudin massa. </p>
<p> Integer in quam a est semper euismod. Nulla facilisi. Integer augue justo, ultricies at, tempus in, lobortis gravida, elit. Sed eros quam, cursus id, pulvinar id, luctus sit amet, nibh. Pellentesque condimentum nisi venenatis felis. Nam sollicitudin, quam sed porttitor lacinia, leo diam fermentum sapien, eget volutpat neque leo non enim. Suspendisse elementum elementum arcu. Nullam varius commodo ligula. Aliquam fermentum odio ac felis. Ut purus eros, commodo et, convallis at, blandit a, ipsum. Vestibulum rhoncus nulla nec elit. Curabitur leo. Ut pellentesque orci et nibh. Proin venenatis aliquet mauris. Quisque sagittis sem ut ante. Nullam non orci nec massa fermentum congue. </p>
<p> Nullam in pede eu odio suscipit adipiscing. Duis eu nulla facilisis risus facilisis ornare. Cras feugiat mauris ut ante. Nunc mauris mauris, euismod scelerisque, sodales eu, imperdiet ut, ante. Sed vulputate. Praesent interdum volutpat tortor. Sed ac ante at enim volutpat condimentum. Pellentesque tortor velit, laoreet at, ullamcorper eget, ultricies quis, massa. Sed neque elit, tempus et, volutpat in, varius id, libero. Vestibulum urna purus, bibendum vitae, fringilla eget, congue eget, sapien. </p>
</div>
</body>
</html>

Also your doctype was incorrect. Looks like it was a bad copy and paste job or something.

effpeetee
Mar 2nd, 2008, 09:06 PM
Alright, so I'm attempting to make a horizontal type of site. I want the title, and the navbar to follow the site when it scrolls horizontally.

I got it to work well in Opera and FF, but IE doesn't seem to like it. Is there any way to have content follow the window horizontally in IE?


I could see no difference with IE7 FFox or Opera.
The window stayed the same and the content moved left.

Frank

_Aerospace_Eng_
Mar 2nd, 2008, 09:17 PM
It was likely IE6 that they were talking about.

relyt_123
Mar 2nd, 2008, 09:20 PM
I want my content to be able to horizontally scroll.

And, I was using IE6. I don't have IE7 installed on this PC.

_Aerospace_Eng_
Mar 2nd, 2008, 09:32 PM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Project Flaming Mongoose</title>
<style type="text/css">
* {
font-family:Georgia, Verdana, Sans-serif;
font-size:16px;
margin:0;
padding:0;
}
body {
width:3000px;
}
#header {
text-align:center;
font-size:48px;
height:96px;
line-height:96px;
position:fixed;
left:00;
top:0;
}
#navigation {
width:100&#37;;
text-align:center;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
line-height:32px;
position:fixed;
left:0px;
top:97px;
}
#content {
padding-top:147px;
}
#main {
border-top:1px solid #000000;
border-bottom:1px solid #000000;
padding:16px 5px;
}
a {
color:#000000;
margin:0px 8px;
}
a:hover {
color:#AAAAAA;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
overflow-x:auto;
overflow-y:hidden;
}
body {
overflow-y:auto;
height:100%;
}
#header, #navigation {
position:absolute;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">Project Flaming Mongoose</div>
<div id="navigation"> <a href="#">Home</a> <a href="#">Other</a> <a href="#">Other2</a> <a href="#">Other2</a> <a href="#">Other2</a> <a href="#">Other2</a> <a href="#">Other2</a></div>
<div id="content">
<div id="main">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum cursus sapien. Donec in felis non lorem rhoncus tincidunt. Sed blandit urna eget elit. Vestibulum pellentesque, risus vel consectetuer adipiscing, sem orci rhoncus massa, a mollis enim lectus quis justo. Etiam ut ligula in tellus ornare vulputate. Nunc sollicitudin magna quis tellus. Aenean in nibh a diam euismod feugiat. Aliquam non justo. Vestibulum nisl pede, dapibus sit amet, porttitor eget, imperdiet sed, diam. Praesent vel nisl. Fusce ut neque. Nullam vulputate dui venenatis nulla. Vivamus felis. In hac habitasse platea dictumst. Praesent dui odio, eleifend placerat, pellentesque ut, viverra in, pede. </p>
<p> Morbi leo mi, tincidunt id, tristique ultricies, congue in, metus. Quisque vel dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisi. Aliquam dui orci, cursus sit amet, eleifend non, sagittis eu, dolor. Integer arcu neque, dapibus dignissim, elementum laoreet, aliquet vitae, lacus. Phasellus pede. Quisque pellentesque porttitor lectus. Curabitur magna urna, adipiscing at, convallis quis, congue non, mi. Curabitur justo. </p>
<p> Vestibulum tempor. Duis quis justo. Integer imperdiet. Donec malesuada. Nulla risus. Praesent vitae libero ut felis vehicula accumsan. Pellentesque lectus nibh, dapibus pellentesque, laoreet in, consequat aliquam, ante. Proin semper. Suspendisse risus. Ut ultricies, lacus vitae laoreet ullamcorper, turpis turpis sollicitudin felis, a imperdiet enim augue blandit ligula. Curabitur fringilla, lectus et fringilla vulputate, dolor odio laoreet ipsum, vel rhoncus sem velit non eros. Aliquam scelerisque. Fusce a lacus. Maecenas euismod viverra magna. Cras nunc neque, euismod et, venenatis id, ultricies at, enim. Mauris quis purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<p> Aenean fringilla urna faucibus neque. Aenean in diam. Donec egestas adipiscing purus. Praesent metus elit, semper eget, luctus varius, eleifend in, erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In orci. Aliquam erat volutpat. Nulla facilisi. Suspendisse eleifend dignissim arcu. Aliquam nisi. Donec risus. Nunc quam ipsum, gravida ut, suscipit non, mollis et, lorem. </p>
<p> Praesent sit amet arcu. Nam ac mi in nisi sodales vulputate. Aenean ac diam ac tellus adipiscing suscipit. Etiam urna nibh, vehicula ac, faucibus bibendum, luctus accumsan, diam. Cras vestibulum ornare velit. Vivamus eget sem et sem aliquet euismod. Nullam imperdiet tortor in enim. Sed odio ante, accumsan at, cursus non, pellentesque sollicitudin, pede. Suspendisse convallis nibh sed mi. Ut varius nulla et odio. </p>
<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in nunc. Phasellus elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ut augue. Nullam eu metus. Vivamus ullamcorper, nisl quis pellentesque tristique, dolor risus porta augue, convallis lobortis felis est vitae pede. Praesent non enim imperdiet nisi semper auctor. Duis dapibus lacinia dui. Fusce accumsan, tellus vitae congue sollicitudin, augue turpis scelerisque nunc, ac egestas justo erat a diam. Aenean egestas interdum augue. Nullam vulputate volutpat leo. Nulla volutpat enim vel pede. Phasellus cursus nisl vel diam. Aenean euismod purus vitae nisl. </p>
<p> Duis ultricies ipsum eget metus. Aliquam erat volutpat. Sed vestibulum commodo quam. Sed egestas sem at nunc. Morbi ultricies erat gravida lorem. Sed cursus ante non purus. Sed a tellus. Fusce vitae erat. Quisque porta enim a ante. Sed et lorem. Nam semper tellus et massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam erat nulla, varius at, fringilla vel, fermentum quis, lectus. Aliquam laoreet velit sed lacus. Phasellus consectetuer. Curabitur mi magna, malesuada ac, malesuada sed, tincidunt eu, pede. Sed id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam semper velit id mauris. Nam dignissim commodo metus. </p>
<p> Duis vel diam. In nonummy ornare sem. Vestibulum fermentum ullamcorper purus. Sed lectus. Morbi enim. Ut eu arcu. Aenean lorem ligula, hendrerit nec, pellentesque quis, consequat eu, nibh. Fusce metus pede, placerat vel, mollis nec, blandit scelerisque, elit. Nulla facilisi. Aenean dolor mauris, iaculis eget, ullamcorper in, ullamcorper nec, eros. Maecenas est. Cras turpis. Integer tincidunt laoreet nisl. Fusce vitae nibh nec elit congue fermentum. Fusce adipiscing sollicitudin massa. </p>
<p> Integer in quam a est semper euismod. Nulla facilisi. Integer augue justo, ultricies at, tempus in, lobortis gravida, elit. Sed eros quam, cursus id, pulvinar id, luctus sit amet, nibh. Pellentesque condimentum nisi venenatis felis. Nam sollicitudin, quam sed porttitor lacinia, leo diam fermentum sapien, eget volutpat neque leo non enim. Suspendisse elementum elementum arcu. Nullam varius commodo ligula. Aliquam fermentum odio ac felis. Ut purus eros, commodo et, convallis at, blandit a, ipsum. Vestibulum rhoncus nulla nec elit. Curabitur leo. Ut pellentesque orci et nibh. Proin venenatis aliquet mauris. Quisque sagittis sem ut ante. Nullam non orci nec massa fermentum congue. </p>
<p> Nullam in pede eu odio suscipit adipiscing. Duis eu nulla facilisis risus facilisis ornare. Cras feugiat mauris ut ante. Nunc mauris mauris, euismod scelerisque, sodales eu, imperdiet ut, ante. Sed vulputate. Praesent interdum volutpat tortor. Sed ac ante at enim volutpat condimentum. Pellentesque tortor velit, laoreet at, ullamcorper eget, ultricies quis, massa. Sed neque elit, tempus et, volutpat in, varius id, libero. Vestibulum urna purus, bibendum vitae, fringilla eget, congue eget, sapien. </p>
</div>
</div>
</body>
</html>

relyt_123
Mar 2nd, 2008, 09:40 PM
It still seems to screw it up in IE. That center the navigation div to the whole width of the page, and the header div doesn't do anything.

_Aerospace_Eng_
Mar 2nd, 2008, 09:48 PM
#content can't be position:absolute if you are doing so...the hack I used makes everything position:absolute; and position:relative; fixed in IE6.

relyt_123
Mar 2nd, 2008, 09:53 PM
It doesn't fix it in IE6 though...

_Aerospace_Eng_
Mar 2nd, 2008, 09:56 PM
I didn't say it was fixed. I said everything position:absolute; and position:relative; BECOMES position:fixed.

Actinia
Mar 3rd, 2008, 11:02 AM
I use the following hack from Stu Nicholls:
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->

.access { position: fixed; }
* html .access {position:absolute;}
This hack effectively gives access 'position: fixed;' for FF etc, and 'position: absolute;' for IE6.

J