Author Topic: radius property not showing in Chrome or Foxfire  (Read 2092 times)

shulamis

  • Guest
radius property not showing in Chrome or Foxfire
« on: November 22, 2012, 12:19:48 am »
Hi,

I have several issues in getting my code to work. The radius property is not showing in Chrome or Foxfire. The background color is not showing.

Here's the code                                                          Here is the link http://sd-smdesigns.com/SMDesigns.html

#body {
   background-color: #eadef9;
   text-align: center;
   margin: 0px;
   padding: 0px;
}
#wrapper {
   border-width: 2px 2px;
   border-style: solid;
   border-color: #5f41ff;
   margin: 0px auto;
    text-align: left;
   overflow: hidden;
   width: 960px;
   -moz-border-radius: 40px  / 75px;
     border-radius: 40px  / 75px;
   -moz-box-shadow: 8px 8px 8px #9d9dad;
   box-shadow: 8px 8px 8px #9d9dad;
}

Thanks
Shulamis

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: radius property not showing in Chrome or Foxfire
« Reply #1 on: November 22, 2012, 06:42:42 am »
You need to set the border-radius of the header page element for Chrome: 

#header {
font-family: "Delius Swash Caps","cursive";
font-size: 48px;
color: #29ABE2;
height: 251px;
width: 960px;
position: relative;
background-color: #DCF1FD;
radius: 10px;
border-radius: 40px / 75px;
}

You would need to do the same for your footer. For the body, you need to remove the # sign in your CSS:

#body {
   background-color: #eadef9;
   text-align: center;
   margin: 0px;
   padding: 0px;
}

When you target a specific HTML tag such as the <body>, <p>, <div>, etc, you do not include the # sign in front of it. The # sign is only used with an ID selector.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

shulamis

  • Guest
Re: radius property not showing in Chrome or Foxfire
« Reply #2 on: November 22, 2012, 08:58:52 pm »
Thanks Erikk,

The #body was a silly mistake. Now I know why it wasn't even changing in DW!

For Chrome radius challenge, the top worked partially, but the bottom didn't work.
In the header the bottom is now rounded, which  shows the background!           Here's the linkhttp://sd-smdesigns.com/SMDesigns.html
#footer {
   font-family: "Imprima";
   font-size: 16px;
   background-color: #780DFF;
   width: 960px;
   text-align: center;
   height: 45px;
   float: left;
   position:relative;
   radius: 10px;
    border-radius: 40px / 75px;
   
}

#wrapper {
   border-width: 2px 2px;
   border-style: solid;
   border-color: #5f41ff;
   margin: 0px auto;
    text-align: left;
   overflow: hidden;
   width: 960px;
    -moz-border-radius: 40px  / 75px;
     border-radius: 40px  / 75px;
   -moz-box-shadow: 8px 8px 8px #9d9dad;
   box-shadow: 8px 8px 8px #9d9dad;
}
#header {
   font-family: "Delius Swash Caps","cursive";
   font-size: 48px;
   color: #29ABE2;
   height: 251px;
   width: 960px;
   position:relative;
   background-color: #DCF1FD;
   radius: 10px;
    border-radius: 40px / 75px;

}

Thanks and Happy Thanksgiving!

Shulamis

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: radius property not showing in Chrome or Foxfire
« Reply #3 on: November 24, 2012, 09:38:58 pm »
Looks like it has to do with the height of the footer. Since it isn't as high you have to modify the radius settings:

#footer {
font-family: "Imprima";
font-size: 16px;
background-color: #780DFF;
width: 960px;
text-align: center;
height: 45px;
float: left;
position: relative;
radius: 10px;
border-radius: 0px 0px 63px 63px / 75px;
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu