Page displays incorrectly in IE, correct in Firefox

[rickster70]

Hello,
First time posting.
I'm designing a site for a friend's business and can't seem to solve this issue. I have a sidebar with a background that also serves as the right and left border. The bottom and top portions of the border are images placed before and after a paragraph. Firefox is displaying it fine, but IE is dropping the top image down. I'm a self taught hobbyist web designer using CS4. Any help would be appreciated. www.patinastyle.net

Thanks

 

[PixelPusher]

First off welcome Rick

Looking at your code, dont use empty tags (P) for spacing. This is a hack, and there are more efficient ways of creating this space. By the sounds of it there will be text inside of this frame (bordered image)? I would suggest doing something like this:

HTML

<div id="sidebar1">
   <div class="frametxt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
   <div class="frameftr"><span>Frame Footer<span></div>
</div>

CSS

div.frametxt {
background:url(images/home/sideboardbgrdtop.png) top center no-repeat;
width:227px;
min-height:200px;    /* SET YOUR MIN HEIGHT FOR THE SIDEBAR */
font:normal 9pt Arial, sans-serif;
color:#fff;
text-align:justify;
padding:10px;
}
div.frameftr {
background:url(images/home/sideboardbgrdbottom.png) center no-repeat;
width:247px;
height:78px;
}
div.frameftr span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}

The span style on "frameftr" is just so you dont have an empty tag.

 

[rickster70]

PixelPusher,

Thanks for that. I played around with it and got it almost right. The text needs to start lower, under the chalk designs. I tried separating the top image as a, "framehdr", but couldn't get it to place properly. Then with all of this I still have the same IE issue, it's displaying the top image too low, but Firefox is still correct. I published new code so you could see. http://www.patinastyle.net

Thanks

Rick

 

[PixelPusher]

Rick, try adding/adjusting this for the frametxt div:

width:177px;
min-height:156px;
padding:90px 35px 0;
position:relative;
top:0;
left:0;

(i adjusted the padding a little for the text in the frame, gave more breathing room)

Not sure if you know this already, but when you add padding to a block element, you will need to subtract that padding amount from the width/height of the element to keep it the same size.

 

[rickster70]

Revisiting problem

Ok I'm still having issues getting IE to display the sidebar correctly. All the help so far has been great for cleaning up my code, and I thank you, but I need to solve this display issue. The website is www.patinastyle.net.

IE is placing the top border of the sign too low, or showing the sides and backgound too tall, not sure which. It still displays in firefox correctly.

Can anyone help me solve this issue?

Thank you for your help

Rick