SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    IE7 adding a vertical scrollbar to my header

    and I'm d@mned if I can figure out why....

    http://www.iraqtimeline.com/maxdesign/

    It's most likely caused by something in the #header css:

    Code CSS:
    #header {
    	clear:both;
    	float:left;
    	width:100%;
    	min-width:700px;
    	max-width:1200px;
    	margin: 1em 0;
    }

    but I can't be sure. It's not there in any other browser, even IE6. Hadn't had a chance to look at it in 7 until today, and I almost dropped my teeth. Any thoughts?

    Side note: Alex, I'm gonna fix the graphic tomorrow, I promise!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It looks like it is being caused by this
    Code:
    html,body {
        overflow: auto;
    }
    Next you need to take the 100% width off of your wrapper since you have 10px side paddings. That causes the width to exceed 100% and gives a horizontal scrollbar.

    Code:
    #wrapper {
        color: #fff8f0;
        font-family: "Segoe UI", Segoe, "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        /*width:100%;*/
        min-width:700px;
        max-width:1200px;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
        padding: 0 10px;
    }
    The min-max widths will give haslayout to IE7 but you will need to set haslayout for IE6 now that the width:100% is removed,

    Code:
    * html #wrapper {height:1%;}/*IE6 haslayout*/

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As Ray pointed out it's not a vertical scrollbar on your header its a scrollbar on your body because you have set the html element to have a scrollbar and also the body element to have a scrollbar.

    Just set it on html if you really need it.

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Thanks, guys. In part, it's that ding-danged reset causing me problems again. I am going to take a hatchet to that thing. I'll test-drive the code (have to test IE7 through Browsershots) and give you the when it's through.

    (Edit: I'll have to try Browsershots later, I've exceeded my request limit for the day. Curses!)

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thats why I use either a limited reset or all reset (*). Otherwise it's just more to think about. Add js and some php to that and now you have hundreds of things that could mix up with one another. Less is easier to trouble shoot.

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm rethinking my approach to the reset as well. You have an interesting CSS reset/initial structure on your page.

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're better off not using a large css reset. For example, you could set an uniformed anchor typographical/color config, or a small box config on arbitrary elements... etc.

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Cooper, I'm changing out the reset on my basic template layouts. Much less intrusive. Found a nice compilation of resets here, both minimalistic and very large.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Besides IE7's slider being messed up all is good in IE7
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ryan. I saw that slider problem, but you know, I don't care... Okay, yes I do, but it works properly in IE8, and sometimes I just get sick of catering to IE.


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
  •