some css help for a newbie

Hi.

I am trying to build my first ever css and tableless template and could do with some advice. Firstly the template can be seen here:

http://www.bakingsocial.com/tltg/index.html

The first problem i am having is the our sites at the bottom. In firefox i have this looking correctly but in IE9 they are not aligned right and not sure what to do. Below is the css that i have.

Secondly I have round corners showing in firefox but can not get them to show in IE9. I have an example below of the css.

I am self taught and know i still have a lot to learn so please be patient with me.

css sample for our sites section:


#feature1a
{
color:#B4B89C;
font-size:14px;
width:30%;
float:left;
padding: 1%;
margin-right: 1%;
}


#feature2a
{
width:30%;
float:left;
padding: 1%;
margin-right: 1%;
}
#feature3a
{
width:30%;
float:left;
padding: 1%;
margin-right: 1%;
}
#feature1b
{
color:#B4B89C;
font-size:16px;
width:24%;
float:left;
padding: 4%;
margin-right: 1%;
}


#feature2b
{
color:#B4B89C;
font-size:16px;
width:24%;
float:left;
padding: 4%;
margin-right: 1%;
}
#feature3b
{
color:#B4B89C;
font-size:16x;
width:24%;
float:left;
padding: 4%;
margin-right: 1%;
}
#feature1c
{

width:24%;
float:left;
padding: 4%;
margin: -30px 0 0 0;

}


#feature2c
{

width:24%;
float:left;
padding: 4%;
margin: -30px 0 0 0;
}
#feature3c
{

width:24%;
float:left;
padding: 4%;
margin: -30px 0 0 0;
}

feature 1a,2a & 3a is the image logo for the 3 sites. 1b,2b & 3b is the description text and 1c, 2c, 3c is the read more icon.

Sample css for round corners. For this sample I am using the css code for the content2 section which is the white background where the welcome text and our sites section is:

#content2
{
background:#ffffff;
width:960px;
height:600px;
margin-top:10px;
padding:0px 8px 0px 8px;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

-moz-box-shadow:0 3px 5px #999999;
-webkit-box-shadow:0 1px 6px #999999;
box-shadow:0 1px 6px #999999;
}

Thanks in advanced for any help.

Regards

Stephen

 

Can anyone help?

 

i think google can help u,he is great man

 

I have sed google and read many articles but still cant find the solution hence posting here.

 

what word editor are you using? some editors can detect if there is a problem with your code and what is and isnt supported by which browser. i use aptana studios. i am also new and self taught. also lynda.com would probably be a great help in your self learning. good luck!

 

thanks,

Just worpad.

 

You could try replacing every % with px.. Im not sure as i never use % for widths but it might be the problem.
BTW for those margin i would suggest using margin-left: 20px; instead of margin: 20px 0 0 0; or if you insist on using margin: try adding px after every 0. I cant really try it out to tell you if that is the issue but other than those i dont see what the issue can be.

 

Hi Mark.

Thank you for your constructive advice. I will try this later today.

Kind Regards

Stephen