SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast ShrimpChip80's Avatar
    Join Date
    Apr 2011
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stuck on my CSS again

    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/conditiona...nswer-neither/
    http://jonikorpi.com/leaving-old-IE-behind/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You could add a helper script such as this.

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

    Code:
    <!--[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]-->
    [/code]

  3. #3
    SitePoint Enthusiast ShrimpChip80's Avatar
    Join Date
    Apr 2011
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B,
    Thanks for the help. Now I'm going to work on getting the viewport right.

  4. #4
    SitePoint Enthusiast ShrimpChip80's Avatar
    Join Date
    Apr 2011
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML Code:
    				<!--[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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •