View Single Post
  #1 (permalink)  
Old September 3rd, 2005, 03:07 PM
AGS AGS is offline
Wrox Technical Editor
Points: 267, Level: 5
Points: 267, Level: 5 Points: 267, Level: 5 Points: 267, Level: 5
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: May 2005
Location: Russia
Posts: 60
Thanks: 0
Thanked 0 Times in 0 Posts
Default Dealing with IE for Round-Cornered Boxes

I have a question concerning “Dealing with Internet Explorer” part of section “Creating Fixed-Width, Round-Cornered Boxes”. There is an example of .box h2 {…} selector which applies image with rounded corners to the top of our box. But when I tried to use the same technique for the bottom <p/> element (there is no such example in the book) my attempt failed. The border of the box just shifted up the number of pixels designated in margin-bottom (for example -24px as I am using 20px for padding and 4px for border) and the image is overlapped with background color. The CSS I am using is
#box p.last {
    background: url("i/bottom.gif") left bottom no-repeat;
    margin: 0px -24px -24px -24px;
    padding: 0px 20px 20px 20px;  
 The same code is working for Firefox just fine but my goal is Internet Explorer.
Best regards,

Alexey Gorkov