homepage Welcome to WebmasterWorld Guest from 54.205.242.179
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
IE7 Bug (It never ends)
Height is 20 pixels off
Bluestreak




msg:3992362
 6:25 am on Sep 20, 2009 (gmt 0)

Hello,

I'm trying to set a fixed height for a small block on my site that contains side posts that I make on occasion. basically I split it in two paragraphs, one containing my side post and the second paragraph containing the time stamp. I've set it so the timestamp remains in a fixed position. The code below works in all browsers, even IE8, except for course, IE7 (at this point I dont care what it looks like in IE6). IE7 pushes the fixed height another 20 pixels, so my timestamp is pushed further down the block than I want it, messing up the look. I can't figure out why it adds 20 pixels to the set height so instead of 70 pixels, the fixed height is effectively 90 pixels instead. Can anyone take a look and see if I could resolve the code so that IE7 renders it correctly too?

<div style="min-height:70px; height:auto !important; height:70px;">

<img class="asides" src="http://www.example.com/wp-content/uploads/asides.png" alt="Asides" align="top" width="50" height="80" />

<p style="text-align: left;"><small> Text goes here.... </small></p>

</div>

<p style="text-align: left; margin-left: 54px;"><small><small><em>Posted at &nbsp; September 19, 2009 @ 5:06 pm &nbsp; <a href="http://www.example.com/category/asides" rel="nofollow">(Archive)</a></em></small></small></p>

[edited by: swa66 at 8:20 am (utc) on Sep. 21, 2009]
[edit reason] use example.com, it can't be owned [/edit]

 

caribguy




msg:3992371
 7:29 am on Sep 20, 2009 (gmt 0)

Set the width attribute. Is the parent container positioned?

If adding width doesn't fix it, you might want to try to also add

#mydiv {
position: relative;
top: 0px;
left: 0px;
}

Check with the IEDev toolbar [google.com] to see if somehow the element has extra margins or padding that you did not intend to set.

Final tip: consider using an external stylesheet. Your pages will be much easier to troubleshoot and maintain.

Bluestreak




msg:3992558
 6:23 pm on Sep 20, 2009 (gmt 0)

Thank you for the help! After more research, I noticed that adding "max-height" to my inline style did the trick. It now looks correctly in IE7 as well. Thanks again!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved