#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    64
    Rep Power
    15

    IE rendering CSS issue


    This is a bit of a weird one as its thrown me completely! I have a very simple collection of styled divs which when viewed in IE look rubbish as they have added a few extra pixels in height to the bottom. I've realized that this looks like a rendering issue as when you scroll the window down and back up the extra image thats appearing sometimes changes according to the speed you scroll at!!! (sometimes the line disappears and then re-appears if you scroll faster) I'm using IE 7 (emulated through IE8 as the real IE7 doesn't work on my vista machine????) also the IE tab mod for firefox and my brothers old xp machine with a working IE7 and the issue is occurring on all 3. However when put in IE8 mode it works

    Here is a lovely images to show whats going on...



    css + html...

    Code:
    	<div style="padding:10px;">
    		<div style="background:url(/images/forums/middle.jpg) repeat-x left top;">
    			<div style="background:url(/images/forums/left.jpg) no-repeat left top;">
    				<div style="background:url(/images/forums/right.jpg) no-repeat right top; padding-bottom:10px;">
    					<div style="padding:18px; color:#FFFFFF; font-size:18px; padding-bottom:30px;">Catagories</div>
    
    					<div style="padding-left:40px; padding-right:40px;">
    						<div style="font-size:14px;">Help and support with the Site</div>
    						<div style="font-size:10px;">Need help with something on the site?</div>
    					</div>
    					
    					<hr size="1" color="#999999" style="margin:10px 40px 10px 40px;">
    					
    					<div style="padding-left:40px; padding-right:40px;">
    						<div style="font-size:14px;">Help and support with the Site</div>
    						<div style="font-size:10px;">Need help with something on the site?</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div style="background:url(/images/forums/middle_bottom.jpg) repeat-x left top; height:4px;">
    			<div style="background:url(/images/forums/left_bottom.jpg) no-repeat left top; height:4px;">
    				<div style="background:url(/images/forums/right_bottom.jpg) no-repeat right top; height:4px;"></div>
    			</div>
    		</div>
    	</div>
    thanks in advance for any reply
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    I think you'll need to provide a link to a live example. I didn't see this issue in IE7 after copying that code into a local page.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    64
    Rep Power
    15
    ok sure

    I will warn you the entire site is still being developed!!

    http://www.readinginfo.co.uk/forum/General-1/
    Last edited by mavoric; May 7th, 2008 at 12:45 PM. Reason: making the link an actual link!!
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Try triggering hasLayout on the first-child of the outer <div>.

    I hope those inline styles are only temporary and that you'll fix the HTML errors eventually.

    To understand what hasLayout is, read some of these: (I discourage the use of the underscore hack, which the first one recommends though.)
    http://www.satzansatz.de/cssd/onhavinglayout.html
    On Having "Layout"
    "HasLayout" Overview
    hasLayout Property
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2004
    Posts
    64
    Rep Power
    15
    i tried using a few of the haslayout and they didn't work. However after a bit of tinkering I managed to get it work by moving the last 3 divs back a level.

    yes the inline styles are temp and so are the html errors. i just want to get the basics running then clean it up

    Thanks though for the advice

IMN logo majestic logo threadwatch logo seochat tools logo