Footer con bordi arrotondati

[PinkBetta]

Ciao, volevo mettere dei bordi arrotondati al footer del mio sito e per farlo ho inserito un'immagine.
Il problema è che la parte del contenuto "container" sborda sotto il l'immagine del footer


Io penso che sia per colpa dell'altezza che è impostata su "auto", solo che io non voglio dargli un'altezza fissa!

Dove sbaglio?

body {
	font-family:Arial, Times New Roman, Verdana;
	background-image:url(img/sfondoindex.jpg);
	background-position:center;
	margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
	margin-top:10px;   
	text-align:center;
	font-size:16px;
	
}

h1  {
  font-size:14px;
  font-style:italic;
  
}

h2  {
  font-size:15px;
  font-style:italic;
	text-align:justify;
  
}


h3  {
  font-size:18px;
  font-style:italic;
  
}

p  {
	font-size:15px;  
 	text-align:justify;
  	padding:10px;
    
}

#container {

  	margin:0px auto;
	text-align:center;
	width:800px;
	height:auto;
	background-color:#000;
		
}

#header	{

	background-image:url(img/headerfoto.png);
	width:800px;
	height:150px;
	background-repeat:no-repeat;
	background-position:center;
	margin:0px auto;
}



#csx	{
	
	width:150px;
  	height:auto;
  	margin:100px 0px 0px 0px;
	padding:0px;
	text-align:left;
	float:left;
	background-color:#f6eadd;
	
}

#content {

 	width:500px;
  	height:auto;
	margin:30px 0px 0px 0px;
	padding:0px;
	text-align:center;
	background-color:#f6eadd;
	float:left;
			
}



#cdx	{

	width:150px;
  	height:auto;
  	margin:100px 0px 0px 0px;
	padding:0px;
	text-align:left;
	float:right;
	background-color:#f6eadd;
	
}


#menusx {
	width:150px;
	height:auto;
}

#menusx ol {

	list-style-type:none;
  	font-weight:bold;
	font-size:13px;
	padding:0px 0px 0px 20px;
								
}

#menusx ol li {

	margin:0px 0px 0px 0px;
						
}

#menusx ol li a{

	text-decoration:none;
	color:#4b1146;
				
}

#menusx a:hover {

	text-decoration:none;
	color:#a478b2;

}

#menudx {
	width:150px;
	height:auto;
}

#menudx ol {

	list-style-type:none;
  	font-weight:bold;
	font-size:13px;
	padding:0px 0px 0px 30px;
								
}

#menudx ol li {

	margin:0px 0px 0px 0px;
						
}

#menudx ol li a{
	
	text-decoration:none;
	color:#4b1146;
					
}

#menudx a:hover {

	text-decoration:none;
	color:#a478b2;

}

#gallery {

	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	

}


#scritte	{

		border:1px solid;
		width:160px; /*per cambiare riquadro img*/
		height:200px;
		text-align:center;
		float:left;
		margin:0px 3px 20px 0px;
		background-color:#ffffff;
			
}


img {
	
	border:none;
	margin:10px 0px 0px 0px;
}


#footer {
	
	background-image:url(img/footerfoto.png);
	background-position:center;
	background-repeat:no-repeat;
	width:800px;
	height:50px;
	clear:both;
	margin:0px auto;
	padding:0px 0px 0px 0px;
		 
}

 

[andre9004]

guarda qui...

http://css3generator.com/

 

[PinkBetta]

Avevo provato con border-radius, ma da quanto ne so non è ancora presto per usarlo?

Grazie comunque della risposta!

 

[alessandro1997]

Mi sembra che sia abbastanza supportato. Dai un'occhiata qua: http://muddledramblings.com/table-of-css3-border-radius-compliance/.

 

[PinkBetta]

Se dite che sia il caso di usare border-radius a me va benissimo, la mia paura era che tanti non lo potessero visualizzare.
Tra l'altro con i css3 ho visto che si potrebbero fare tanti effetti molto belli.

Ma a questo punto mi sorge un dubbio (non ho mai usato i css3, gli ho solo dato un'occhiata); posso inserire queste nuove proprietà nel mio foglio di stile (quello che ho allegato) o devo cambiare qualcosa? E nell'html (che non è il 5)? Insomma di cosa hanno bisogno per funzionare bene?

 

[alessandro1997]

Di nulla: basta che inserisci la proprietà nel foglio di stile.

 

[marco_rx]

Se dite che sia il caso di usare border-radius a me va benissimo, la mia paura era che tanti non lo potessero visualizzare.

Il problema principale sono le vecchie versioni di internet explorer che non li supportano, ma puoi in parte risolvere con utility tipo css3pie che permettono il rendering di molte proprietà CSS3 anche su IE.

 

[alessandro1997]

Un'altra soluzione è impedire agli utenti che usano vecchie versioni di Internet Explorer (e, più in generale, Internet Explorer) di accedere al tuo sito Web.

 

[PinkBetta]

Via mi sono convinta, userò delle proprietà dei css3, che sembrano semplificare la vita.

Grazie a tutti per le risposte!