Forums

benkenobi77

I went off of example #2 in the video tutorial to do a semi-transparent box with rounded corners but all of my corners are in the top left and overlapping - can't figure out what the hell i did wrong.

CSS

		
			.text_box {position: relative; margin: 0; width: 200px; background:  url(../images/trans_box.png) 0 0 repeat; border: 1px solid black;}	
			.tl {position: absolute; width: 13px; height: 13px; background: url(../images/box_tl.png); top: -1px; left: -1px;}
			.tr {position: absolute; width: 13px; height: 13px; background: url(../images/box_tr.png); top: -1px; left: -1px;}
			.bl {position: absolute; width: 13px; height: 13px; background: url(../images/box_bl.png); top: -1px; left: -1px;}
			.br {position: absolute; width: 13px; height: 13px; background: url(../images/box_br.png); top: -1px; left: -1px;}
			.inside {padding: 20px;}

HTML:

	<div class = \"text_box\">
						<div class = \"inside\"><p>content here</p></div>
						
						<div class = \"tr\"></div>
						<div class = \"tl\"></div>
						<div class = \"br\"></div>
						<div class = \"bl\"></div>
					
					</div>

chazzwick

youve given tr, tl, br & bl all an absolute position of top: -1px; left: -1px;.

try this instead:


.tr {top: -1px; right: -1px;.  }
.tl {top: -1px; left: -1px;  }
.br {bottom: -1px; right: -1px;  }
.bl {bottom: -1px; left: -1px;  }

benkenobi77

i'm an idiot - didn't see that. thanks!

treehouse : what would you like to learn today?

Forums

rounded corners not working