CSS3 Woes

notarypublic

New Member
On my latest project, since it's less likely to get professional traffic they've given me more leeway to make a flashy site.

http://www.psych.ndsu.nodak.edu/test/CAL/index.php

A couple cool things to note -

* It's a site with a php template (which is something I'm just getting my feet wet in)
* It uses a jquery slideshow (that I took half from a tutorial, and have been modifying to my own nefarious ends)
* It uses CSS3 in some cool ways. Yay!

There's a couple issues, currently - the biggest of which is that the CSS3 is not behaving the way I expect. What I'm trying to do is a semi-transparent clear border around each of the sections of the site (navigation, content, slideshow, etc.).

I want the border to be rounded on the inside as well - I thought about making a separate, universal class for a rounded, semi-transparent box, and then a rounded each content box inside that, but then I have issues with floating. Is there an easier fix than this?

(also, if you look at the slideshow you notice that the image repeats itself for 5 px across the bottom. It wasn't doing this yesterday, but I haven't changed the code! Ahhh! Any ideas?)
 

DHDdirect

New Member
It's a bit hard to tell if the border is transparent because it's a gray border with gray background (viewing in chrome 11 and firefox 4). It does show up lighter than the rest of the content box so I'd assume it is showing transparent.

If it is going to be gray on gray then it doesn't matter if it's transparent, just set the border color as a lighter gray and call it good.

At this point I don't see a border around anything else but the content

**Definately need a fallback when working with CSS3. Not sure if !important will work if a browser doesn't support the CSS3 sytle
 
Last edited:
Top