Stuck on my CSS again

HTML & CSS
1

Hello everyone.
This is my web page: www.ctrlaltm.com

I am trying to make this site more responsive. It seems to work okay in FF 11 and Opera 10. Unfortunately, I did not realize that media queries do not work in IE 6-8 so when my page loads this happens:

I saw a solution for this where you use conditional classes to control what each version of IE sees, but honestly I’m lost. Any suggestions would be much appreciated.

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

2

Hi,

You could add a helper script such as this.

Or alternatively just give ie8 and under their own rules in a conditional stylesheet.


<!--[if lte IE 8]>
<style type="text/css">
#site_body {
margin: auto;
position: relative;
min-width:320px;/* ie7/8 */
max-width:960px;/* ie7/8 */    
}
* html {width:768px}/* ie6 */

</style>
<![endif]-->
3

Paul O’B,
Thanks for the help. Now I’m going to work on getting the viewport right. :smiley:

4

Okay, looks like I spoke a bit too soon. I’ve got my menu working mostly right (except in IE6), but I’m not sure how to make it so that when the user scrolls down, the menu scrolls down with them. I tried position:fixed for IE8, but when I used it my menu would disappear and according to what I’ve read online position:fixed does not work in IE6 or IE7.



Here’s what I’ve got so far.



				<!--[if lte IE 8]>
					<style type="text/css">
						a.skip_to_nav {display: none;}
						#navigation_menu{
						position: absolute;
						bottom: 4390px;
						right: 1090px;
						background: #000080;
						}
						#navigation_menu li{
						display: inline;}
						#site_body, #contact{
						margin: auto;
						position: relative;
						min-width: 320px;/* ie7/8 */
						max-width: 960px;/* ie7/8 */
						left: 100px;
						}
						* html {width: 768px}/* ie6 */
					</style>
				<![endif]-->
			</head>
5

Hi,

I’m not really sure what you are doing exactly but position:fixed does work in IE7+ but the menu must reside in the viewport as fixed elements outside the viewport cannot be reached.

You could make the side nav fixed (as in my old site) and it will work in IE7+ but I wouldn’t build it like that these days as fixed positioning doesn’t work on a lot of mobiles. You would need to ensure that only capable devices get the fixed positioning using media queries (and conditional comments for IE).

However fixed positioning is only good for small items so any long menus or elements with a lot of content should not be fixed. Fixed elements are relative the viewport so you can’t say silly things like bottom:4390px ass that would put the menu miles above the viewport. You would need to use left:0: top:0 instead.

You should never use co-ordinates like bottom :4390x and right:1090px as that makes no sense for any form of positioning.:wink: