SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast Plate_of_Shrimp's Avatar
    Join Date
    Jun 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  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)
    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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast Plate_of_Shrimp's Avatar
    Join Date
    Jun 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  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)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast Plate_of_Shrimp's Avatar
    Join Date
    Jun 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    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)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast Plate_of_Shrimp's Avatar
    Join Date
    Jun 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    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)
    That space will probably go away if you set this CSS code in.

    Code:
    img{vertical-align:bottom;}
    Again, IE7 being flaky with me, so a shot in the dark.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I'd set the image to display:block and that will clear the whitespace gap next to the inline element.

    Code:
    #twitter_div img{display:block}

  10. #10
    SitePoint Enthusiast Plate_of_Shrimp's Avatar
    Join Date
    Jun 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, that worked. Excellent! Thanks to you both for your help.


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
  •