CSS3 Woes

Discussion in 'Web Design' started by notarypublic, May 16, 2011.

to remove all ads.
  1. notarypublic

    notarypublic New Member

    Messages:
    235
    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?)
     
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Try using rgba for the border color, and set the "a" to the transparency you want. Here's a quick intro to rgba: http://www.css3.info/introduction-opacity-rgba/

    EDIT: Don't forget to set a fallback. Place it before the rgba declaration.

    I don't see the repeating image issue.
     
  3. DHDdirect

    DHDdirect New Member

    Messages:
    383
    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: May 16, 2011

Share This Page