Rotating Image in CSS - Post ID 124656

User 364143 Photo


Guest
5,410 posts

No. It looks the same in FF and IE.


In your CSS change min-height from 288 to 290 as I have here.
#content {
BACKGROUND-IMAGE: url(images/bg.png); MIN-HEIGHT: 290px; WIDTH: 462px; MARGIN-LEFT: 254px
}


EDIT: Well that works in FF but IE is still jacked.
CoffeeCup... Yeah, they are the best!
User 47216 Photo


Registered User
210 posts

OK I changed it - how does it look now?

Also I noticed that if the gray content area is going to have more data that the current height of the window, the 2 bottom rounded corners we added do not move down to the bottom of the content area. Any idea on how to fix this? I have an example of this problem at
http://www.reverendjillpidcock.com/index3.php
User 364143 Photo


Guest
5,410 posts

That looks good in FF and IE. I guess I changed something else and jacked it on my end when fiddling with it.

I believe you will have to adjust (increase) the margin-top in this code to lower the corners on the bottom. Not the way I would have done things so that may be wrong.

<DIV class=clear></DIV><IMG
style="MARGIN-TOP: 267px; FLOAT: left; MARGIN-LEFT: 0px" title=toprightcorner
alt=toprightcorner src="Reverend%20Jill%20Pidcock_files/body_bottom_left.jpg">
<IMG style="MARGIN-TOP: 267px; FLOAT: right; MARGIN-RIGHT: 0px"
title=bottomrightcorner alt=bottomrightcorner
src="Reverend%20Jill%20Pidcock_files/body_bottom_right.jpg">
CoffeeCup... Yeah, they are the best!
User 47216 Photo


Registered User
210 posts

nope that didnt work - guess I am going to have to play with it until i find the right setting
User 364143 Photo


Guest
5,410 posts

Yes, It's working for me. I just tested it. Make sure you are increasing the margin-top for both the lower images the same amount you increase the content MIN-HEIGHT: 290px;. Then the box and both lower corners will travel down the page together.
<IMG
style="MARGIN-TOP: 267px; FLOAT: left; MARGIN-LEFT: 0px" title=toprightcorner
alt=toprightcorner src="Reverend%20Jill%20Pidcock_files/body_bottom_left.jpg">
<IMG style="MARGIN-TOP: 267px; FLOAT: right; MARGIN-RIGHT: 0px"
title=bottomrightcorner alt=bottomrightcorner
src="Reverend%20Jill%20Pidcock_files/body_bottom_right.jpg">
CoffeeCup... Yeah, they are the best!
User 47216 Photo


Registered User
210 posts

OK I see what you are saying now.... I just had to play with the numbers for the top margin until I found the right value to use. I got it working on this page
http://www.reverendjillpidcock.com/contact.php

thanks for all of your help!
User 364143 Photo


Guest
5,410 posts

Cool. :)
CoffeeCup... Yeah, they are the best!
User 364143 Photo


Guest
5,410 posts

I prefer using CSS rounded corners. :)
CoffeeCup... Yeah, they are the best!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.