IE7 layout woes (I know....RARE!) ;)

**Plate_of_Shrimp** · Mar 8, 2012 23:03

I've been doing static sites for a few years now, and I guess I've been mostly lucky so far, because I haven't had to become intimately familiar with IE bugs. But the site I just finished today was pretty messed up in IE7. I did some reading and was able to solve almost all of the layout issues simply by making sure everything had explicit widths. But there's one pesky issue remaining: a recent tweets section in the sidebar. Looks fine in real browsers as well as IE 8 and 9, but in IE7 the top margin seems to increase by a couple of hundred pixels, and I can't figure out how to solve it.

It looks like a margin issue, but for all I know it could be something completely different...possibly even related to the javascript (??). I have the the twitter widget in a div that sets at the bottom of a floated sidebar, which contains a couple of floated elements above the tweet section. It has a big top margin, spacing it down relative to the top of the sidebar. In IE7, it's spaced down a lot more...not quite double the specified top margin, but close to that

The page I'm talking about is here: http://rachelklapper.com/schedule.html

The html is simply:

Code:

<div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul></div>

and then there's the script for grabbing the tweets:

Code:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/racheldragonfly.json?callback=twitterCallback2&count=4"></script>

The CSS for the tweets section is:

Code:

#content #twitter_div {
	width: 219px;
	clear: left;
	margin: 346px auto 20px;
	
	}
	
#twitter_update_list {
	width: 219px;
	}
	
#twitter_update_list li {
	list-style-type: none;
	padding: 12px 7px 12px 12px;
	background: #A4A4A4 url(images/twitter_tile.gif) top left repeat;
	border-bottom: 1px solid black;
	color: #282828;
	font-size: 14px;
	}
	
#twitter_update_list li a {
	color: #5B6C97;
	}
	
#twitter_update_list li span {
	line-height: 16px;
	}

IE7 looks fine if I simple reduce the top margin of the twitter div...so I suppose I could just make a conditional comment for that browser and add one CSS rule. But I'm thinking there must be a better way, and that if someone points me to it, I'll learn something that will make me write better CSS the next time. Heh...I'm an optimist.

Grateful for any help or suggestions.

**RyanReese** · Mar 8, 2012 23:14

Hi, for some reason your page isn't updating for me in IETester, so here are a few suggestions

Try clear:both on the twitter div. Does it do anything?

Add this property *+html #content #twitter_div{margin-top:0;}

Do you have anything on your server settings that would prevent me from getting a local copy of your website going?

**Plate_of_Shrimp** · Mar 8, 2012 23:26

Thanks for your help, Ryan. I don't think anything would stop you. Feel free to grab all of the files here:

http://iowacitywebservices.s3.amazon...ive_030812.zip

Headed off to bed soon, was planning on addressing this in the morning, as I don't have any IE7 here at home.

**RyanReese** · Mar 8, 2012 23:38

Thanks for the files but IE7 still is being annoying about it.

Oh well, educated guess here I go. IE is quirky when you try to have static elements push against floats. Try to put the margin on the floated element instead

. Something like this.

#content #twitter_div{clear:both;margin-top:0}
#socons{margin-bottom:20px;}

Though honestly, why are the divs in the sidebar even floated? They don't need to be, and honestly, if my above suggestion doesn't work, try removing the sidebar inner divs as floats.

**Plate_of_Shrimp** · Mar 8, 2012 23:44

Thanks, man, I'll try both of those things in the morning.

As for why the sidebar divs are floated, I can't say. I probably did it hurriedly because it solved some other minor issue at the time, and just left it that way. :P

If removing the floats works, I have no compelling reason to keep them. I don't typically position things with huge margins like that, but if I recall correctly, I had to because they were collapsing. Probably due to the floats?

**RyanReese** · Mar 8, 2012 23:55

Well we will find out soon enough

. Floating right now is really only hurting yourself right now because nothing is side-by-side, and IE is buggy with static content pushing against floats.

I'm willing to bet that one of my suggestions will solve the issue. Perhaps someone who has IE7 working could test it. But it's getting late here (1 A.M.) so I best be off to bed now.

**Plate_of_Shrimp** · Mar 9, 2012 12:34

I just removed all the floats and adjusted margins and now it looks OK. There's still a 4 pixel-ish gap between the tweets and the title graphic for the tweet box, but not a huge deal. Probably not worth chasing after, but I am curious about it, and if there's an easy way to fix it. Removing the floats also introduced that gap in Firefox, and it wouldn't go away until I set the image to line-height: 0. See attached image for what I mean.

gap.jpg