4 replies [Last post]
roscoe
roscoe's picture
Offline
Enthusiast
Last seen: 12 years 43 weeks ago
Joined: 2006-03-09
Posts: 138
Points: 0

html: http://roscoecreations.com/help/footer_help.html
css: http://roscoecreations.com/help/css/footer.css

As you can see if you look in IE6/7 after my rounded corners at the bottom of my div there is an extra gray area. It looks fine in everything else. I have been toying with this for some time now and I just can't get it resolved I've broken my whole design down to just the footer and all the elements that cause it.

The only thing I can do to stop this is to add another element below the paragraph like an image and the corners appear where they are suppose to.

I really need some help with this. I will try any suggestions, I would appreciate the help. Thanks.

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 6 years 12 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

can Use one image for footer

Hello,
The way you have done is really troublesome..if you can use one rounded image for the footer, that will be easy...for experiment you do one thing..save that rounded corners image as gif, one separate left corner, one separate right corner & one image with two rounded corner both left & right...you wil find there sizes same..so why to use three div to display a round corner. & increase the code better you can use one background image with bottom center property & thats done...
what ever you have done here..i could not understand it..
thats why i am suggesting this..
save small tiny images as gif's only..the top image i saved as gif was just 343 bytes & yours(jpeg) is 1.16kb..what a vast difference..

remember one formula...
many colors, gradients : use JPEG
single, two, three clr, icons images: use gif

see if this works
thanks
suraj..

roscoe
roscoe's picture
Offline
Enthusiast
Last seen: 12 years 43 weeks ago
Joined: 2006-03-09
Posts: 138
Points: 0

Almost there...

html: http://roscoecreations.com/help/footer_help2.html
css: http://roscoecreations.com/help/css/footer2.css

That worked perfect but it is only a temporary fix because there has to be at least two images. One for the top because I need that angle that is at the top that separates the gray from the white. As you can see in the image below it finishes a curve in my design. And the second image needs to be the bottom so that the div can grow vertically incase the content changes.

AttachmentSize
Picture 3.png 9.8 KB
roscoe
roscoe's picture
Offline
Enthusiast
Last seen: 12 years 43 weeks ago
Joined: 2006-03-09
Posts: 138
Points: 0

PROBLEM SOLVED

html: http://roscoecreations.com/help/footer_help2.html
css: http://roscoecreations.com/help/css/footer2.css

Looks like I got it all figured out. I ended up making a div to store the top and then I put the rounded corner bottom image as the background of the footer div and then I made the overflow hidden on the top image div and everything fell right into place. Thanks for your help, it led me right to my answer.

You can view all my code in the links above.

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 6 years 12 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

that's great

hamm... i was not knowing your footer size may increase...
but you have done is right..but you got to give overflow:hidden to footer images also, some times when these rounded corners comes in body containt also.. it should be done the same way...this is the power of using Div tags..
your no of images reduces..so accordingly reduces the bandwidth..
great.. :thumbsup:
thanks
suraj..