Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Hello Everyone, having a spat of CSS trouble

    The issue is with the sidebar code on this page....Here.

    At the very top below keywords and all. After getting the sidebar installed, problem is Chrome seems to allow the sidebar to scroll down with the page-body content. A NON-FIXED sidebar. If you will.

    But in IE8 and above, the sidebar doesn't scroll down with the page body content. So visitors to it cannot see all of the sidebar content after the skyscraper banner.

    Also, in Chrome, the background (which we don't have set as fixed) scrolls down with the webpage. But in IE8, it too stays stationary while all the content in the middle of the page (image, text, etc) scrolls down with the page. I need to get these two issues fixed before I can move forward with anything else. Any help would be greatly appreciated!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,263
    Thanks
    10
    Thanked 277 Times in 276 Posts
    I'm not sure what html 3.2 is supposed to look like, but I don't think this is it. Have you looked at all the errors in the code?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    HTML 3.2 was superseded by HTML 4.0 in December, 1997.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    The issue I am having is with the sidebar. We've tested our page in all browsers previously before installing this sidebar and it works fine in Chrome, IE, Firefox, Mozilla, and even MSN. However upon installing this sidebar, it seems to display fine in Chrome only. In IE8....the sidebar overlaps with the IE scrollbar. I posted some screenshots below along with the sidebar code.



    CHROME





    INTERNET EXPLORER 8


    <style type="text/css">
    body{
    margin:0;
    padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
    }
    div#left-sidebar{
    position:absolute;
    top:30px;
    left:0;
    width:left-sidebar-<length>;
    height:100%;
    }
    div#right-sidebar{
    position:absolute;
    top:30px;
    right:0;
    width:right-sidebar-<length>;
    height:100%;
    background: #161616 !important;

    }
    }
    @media screen{
    body>div#left-sidebar{
    position:fixed;
    }
    body>div#right-sidebar{
    position:relative;
    }
    }
    * html body{
    overflow:hidden;
    }
    * html div#content{ height:100%;
    overflow:auto;
    }
    </style>
    <div id="left-sidebar"></div>
    <div id="right-sidebar"></div>


    <div id="content">
    </div>
    Attached Thumbnails Attached Thumbnails Hello Everyone, having a spat of CSS trouble-ie8.jpg   Hello Everyone, having a spat of CSS trouble-chrome.jpg   Hello Everyone, having a spat of CSS trouble-chrome2.jpg  

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    what in the world?? is this some new css Ive never heard of? Im guessing no, since the doctype is from 1997

    Code:
    padding:0 right-sidebar-<length> 0 left-sidebar-<length>;

    Did you know you have content and scripts outside of the html document?

    before you try to fix css issues you shoudl really address soem of this otehr stuff first.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    I looks like the left column has the skeleton and the clown face, while the right is the blue column. Stop using position absolute and incorporate floats. make their widths a percentage of the body.

    I looked that up Dan and it's WP junk.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    UPDATE:



    Ok so I solved the scrollbar and display issues! I changed the code I posted above to this...




    Code:
    <style type="text/css">
     body{
      margin:0;
      padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
     }
    div#left-sidebar{
      position:absolute;
      top:30px;
      left:0;
      width:left-sidebar-<length>;
      height:100%;
     }
     div#right-sidebar{
      position:absolute;
      top:30px;
      right:0;
      width:right-sidebar-<length>;
      height:100%;
      background: #161616 !important;
      
    }
     }
     @media screen{
      body>div#left-sidebar{
       position:fixed;
      }
      body>div#right-sidebar{
       position:relative;
      }
     }
     * html body{
      overflow:auto;
     } 
     * html div#content{ height:auto;
      overflow:hidden;
     }
    </style>
    <div id="left-sidebar"></div>
    <div id="right-sidebar"></div>





    Just one more issue. Sometimes, people like to browse using IE's sidebar? That displays FAVORITES and stuff? The problem I have is, if someone turns that on, it will push the content on this page together, causing some text to become lost and hidden behind the right sidebar. What would I have to add to the code posted above to set it where if someone turns on their IE sidebar, my pages right sidebar will indent itself to make up fpr the lost space? And won't cover up any text?

  • #8
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    Quote Originally Posted by sunfighter View Post
    I looks like the left column has the skeleton and the clown face, while the right is the blue column. Stop using position absolute and incorporate floats. make their widths a percentage of the body.

    I looked that up Dan and it's WP junk.

    Hi Sunfighter, if I incorporate float instead of absolute, will that solve the issue of the right sidebar scrunching up the text in smaller browser windows? I am trying to set this where if someone is browsing using IE with sidebar turned on, or chrome with sidebar turned on, or MSN 8 and above which has an automatic sidebar, the right sidebar will automatically shift back in the browser window to make up for the lost amount of space. If so, where should I place the float values?


  •  

    Posting Permissions

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