IE7 adding a vertical scrollbar to my header

HTML & CSS
1

and I’m d@mned if I can figure out why…

It’s most likely caused by something in the #header 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! :slight_smile:

2

It looks like it is being caused by this


html,body {
    [COLOR=Red]overflow: auto;[/COLOR]
}

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.

#wrapper {
    color: #fff8f0;
    font-family: "Segoe UI", Segoe, "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    [COLOR=Red]/*width:100%;*/[/COLOR]
    min-width:700px;
    max-width:1200px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    padding: 0 [COLOR=Blue]10px[/COLOR];
}

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,

* html #wrapper {height:1%;}[COLOR=Blue]/*IE6 haslayout*/[/COLOR]
3

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.:slight_smile:

Just set it on html if you really need it.

4

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 :tup: when it’s through.

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

5

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

Yeah, I’m rethinking my approach to the reset as well. You have an interesting CSS reset/initial structure on your page.

7

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

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

Besides IE7’s slider being messed up all is good in IE7 :slight_smile:

10

Thanks, Ryan. I saw that slider problem, but you know, I don’t care… :slight_smile: Okay, yes I do, but it works properly in IE8, and sometimes I just get sick of catering to IE.