Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

Nested Div 1 pixel shift

Even worse in Internet Explorer

     
9:10 am on Apr 3, 2009 (gmt 0)

Junior Member

5+ Year Member

joined:June 7, 2007
posts:82
votes: 0


Hey all

I have the following nested div setup on my page:

<div class="r_bg">
<div class="r_foot">
<div class="r_head">
<div class="r_content">

Content

</div></div></div></div>

In an attempt to put some content in a shaded, rounded corner box. Here's the CSS:

div.r_head {
background-image:url(../gfx/layout/r_header.jpg);
background-repeat:no-repeat;
background-position:top left;
width:251px;
overflow:hidden;
}

div.r_bg {
background-image:url(../gfx/layout/r_bg.jpg);
background-repeat:repeat-y;
background-position:top left;
width:251px;
overflow:hidden;
}

div.r_foot {
background-image:url(../gfx/layout/r_footer.jpg);
background-repeat:no-repeat;
background-position:bottom left;
width:251px;
overflow:hidden;
}

div.r_content {
padding:25px 25px 25px 15px;
width:221px;
min-height:80px;
}

The problem is in both Firefox and IE the footer chunk is shifted 1 pixel to the left (or head and bg 1px to the right depending on your take). In IE in fact, the bg is 1px to the right and the header is a further 1px to the right.

Does anybody know why this is?

... and how to get around it?!

Thanks

3:00 pm on Apr 3, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Did you try zeroing out the margins, and all the padding except the innermost div? Might fix it.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members