Topic: positioning images over repeating bg with html/css Pages that link to <a href="https://ozoneasylum.com/backlink?for=26878" title="Pages that link to Topic: positioning images over repeating bg with html/css" rel="nofollow" >Topic: positioning images over repeating bg with html/css\

 
Author Thread
Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 10-21-2005 17:24 Edit Quote

hey guys, working on a site that has a repeating angled striped background, a square content area is centered on the page and has rounded corners and a light drop shadow. i've managed to get everything aligned in the header and content areas using css positioning for the background (centered at top and then repeats) but the problem happens when i hit the bottom of the content area:



I'm having a hard time getting this to line up correctly, since the content area varies it may or may not line up with the background. i tried a transparent gif but the shadow doesn't correctly mesh with the background if i go that direction. one thought is to set a fixed height for the content area and use css to scroll within it, but even doing that the bottom edge seems to fall at different places in IE than it does in Firefox. any ideas? thanks.

chris


KAIROSinteractive | tangent oriented

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-21-2005 17:36 Edit Quote

You should use transparent PNGs and just sent IE to hell. Or you could use one of the many PNG fix that exists for IE. Or you could stick to GIF and add few lines of JS that will make the height of the content area snap to the closest superior multiple of the height of the diagonals.

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 10-21-2005 17:39 Edit Quote

well, transparency isnt working because the shadow creates a blurry solid color area around the image unfortunately, would PNG be any different than gif in that respect? and unfortunately, while i'd love to ditch IE entirely that's what most of our clients use

the JS idea is interesting but a little out of my coding league unforunately. good thoughts tho, thanks.

chris


KAIROSinteractive | tangent oriented

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-21-2005 18:14 Edit Quote
quote:

Fig said:

would PNG be any different than gif in that respect?



Yes, PNG files support true transparency - no matte required.

However, IE support just isn't there (don't know anything about the hacks Poi mentioned though).

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 10-21-2005 18:39 Edit Quote

gotcha, i'll have to look into it more. it looks like i'm going to set the cell at a fixed height and set a css scrolling property to scroll within it, not ideal but it works for this application.

chris


KAIROSinteractive | tangent oriented



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu