SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unwanted Scroll Bar

    Hi, I am not new to programming, but new to web-development. I've already used these forums to find solutions to many problems (thanks!) but can't figure this one out.

    I have a 2 column layout with a fixed width sidebar and a fluid main content. These are inside my wrapper div. I am using the background image solution to get my sidebar to extend to the footer with my variable lengths. I had to add "overflow: auto" to my wrapper properties to keep it from collapsing.

    Since I did that, I have a random problem with a scroll bar showing up within my wrapper. This problem only happens in IE (everything else seems fine in the 4 other browsers I test with.) Even in IE the problem is random. The data is changed fairly frequently in this system. I'm guessing the different widths of my columns inside my main content area is causing the randomness, but I'm not sure. I've played with the widths of everything, but nothing seems to help.

    Here is the page with the problem:

    (I guess cause I'm new I can't post a link - I'm posting with extra spaces.)

    lcatdesigns. com/reviews/index_instr. php

    You can see the randomness by going to the "Reviewer Index" which is an identical layout with different data. That page is currently fine, but sometimes has problems also.

    If there are any ideas or insight on how I can fix this (without allowing my wrapper div to collapse and losing my sidebar extension) I would be very grateful!

    thanks, Lisa

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    overflow:auto is known for having scrollbars sometimes appear. Change it to overflow:hidden; or use the clearfix method instead.

    Edit:

    You have a column drop in IE which is probably causing it. I'll brb with the answer
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I could have sworn I tried changing my value to "hidden" last night, but maybe not. This seems to have fixed things and my sidebar is still good.

    Thanks so much for your quick reply!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your welcome, but the column drop in IE is caused by #wrapper not having layout (well that's not the reason), but something in the <form> element is pushing it too wide...perhaps someone can find what is..

    Code:
    * html #wrapper{height:1&#37;;}
    * html #mainContent form{height:1%;margin-left:-7px;}
    THe #wrapper code gives haslayout to it (IE7 displays the background image because overflow gives haslayout to IE7 (but not iE6)).

    And the form needs haslayout so I used height:1%; there. The negative left margin makes the sidebar not drop.

    Though this is just a bandaid fix as the form still is screwed up (and I think the cause may be "Search by Name" button.

    I'll keep looking.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Alright I figured it out. The form was messing up (the input has a class of "btn") because of this style
    Code:
    input.center.btn { margin: 1em 40&#37;; }
    Normally in good browsers, if an element has <input class="center btn", etc etc> then it will do the margin:1em 40%. But because IE6 doesn't understand that, it will only read "input.btn" thus putting a huge margin on it. Remove that line or feed it to good browsers only by making it
    Code:
    html>body input.center.btn { margin: 1em 40%; }
    Though I would just give that particular <input> an ID instead to reference it instead of doing the .btn.center technique.

    Also that wasn't the cause of the drop, so let's continue
    Code:
    ul.vert-one li a {
    	display:block;
    	text-decoration:none;
    	color:#fff;
    	/*width:95%; remove this because it will automatically make room for the 5% padding, also causing the drop*/
    	padding-left: 5%;
    	background-color: #666699;
    }
    Naturlaly, 95% + 5% = 100%. Well IE rounded up the odd pixel up to make it 100% + 1px or 2. Thus that was cuasing the drop.

    Since it is a block element and by the nature, it will automatically amke room for the 5% padding so you can comment out the width:95%.

    Or if you want to keep it in give it a negativfe 1px margin, as such
    Code:
    margin-left:-1px;


    Also, it didnt' take me an hour and a half lol, I was doing other stuff. (Just so others don't think I'm an idiot for the posting times to be this far apart lol)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan, Thanks so much, for solving both problems! (And I learned some things too.) You're definitely no idiot, IMO - you could have taken all day, and I still wouldn't think so.

    thanks, Lisa

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vg123 View Post
    Ryan, Thanks so much, for solving both problems! (And I learned some things too.) You're definitely no idiot, IMO - you could have taken all day, and I still wouldn't think so.

    thanks, Lisa
    Lol well I had to manually go through the stylesheet and find the cause-firebug was worthless :/, but it did the correct job in not tleling me the answer.

    Your welcome
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •