Как разделить границы блока меню?

[Nightwalker]

Всем привет! Скажите пожалуйста как разделить контент блока меню,от границ модуля? Вот что получается.

 

Вот так выглядит блок в HTML это тот результат который хотим получить!

 

 

Теперь выделим данный блок!

 

 

Как видим контент блока выделился отдельно от границ блока.

 

Вот что получилось у меня при переносе данного html блока в шаблон Joomla 2.5

 

Сам блок

 

 

 

Как видно на рисунке даже текст перекосило сверху,и шрифт получился не по размеру.

 

Теперь выделим сам блок

 

 

Как видим контент меню блока выделился вместе с границами.Вопрос как сделать так как в первом примере?

 

Вот HTML Код блока который пытаюсь встроить в шаблон джумлы!

 

 

<table style="border:1px solid #1c1c1c" cellpadding="0" cellspacing="0" width="198">

<tr><td height="32px" style="border-bottom:1px solid #1c1c1c;background:url(/img/block_head.png); text-shadow: 0.1em 0.1em 0.05em #000000;"><font color="#cbcbcb"><center>TITLE</center></font></td></tr>

<tr><td style="background:#242424;padding:7px;">CONTENT</td></tr>

<tr><td><img src="/img/block_foot.png" border="0"></td></tr>

</table><div style="padding-top:4px;"></div>

<!-- </block> -->

 

 

Его состав(кнопки)

 

<div class="menublock"><a onclick="$('#menu1').slideToggle('slow');" href="javascript://"><center>Название</center></a></div></center><div style="padding-top:3px;"></div><div class="bBlok31" id="menu1" style="display:none;"><ul class="uz"> <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  <li><a href="Ссылка">Название</a></li>  </ul></div><div style="padding-top:3px;"></div>

 

И CSS Данного блока

 

.bBlok31 {padding:2px;background:url(/img/b4.gif);border:1px solid #1c1c1c;}.menublock {padding:2px;background:url(/img/bg2.png);border:1px solid #1c1c1c;}

 

 

Вот CSS код который я изменял.Где закомментировано это оригинальный код.

 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ul,li,fieldset,form,label,legend,table,caption,tfoot,thead{background: transparent;border: 0;font-style: inherit;font-weight: inherit;margin: 0;padding: 0;outline: 0;vertical-align: baseline;}tr,th,td {background: transparent;border: 1px solid #e1e1e1;font-style: inherit;font-weight: inherit;margin: 0;padding-left: 7px;outline: 0;vertical-align: baseline;} table {border-collapse: collapse;border-spacing: 0; width: 100%; border: 1px solid #e1e1e1;}html {overflow-y: scroll;}   /* Main Layout */html {height: 100%;}body {text-shadow:#080808 1px 1px 0px;font-family:verdana,arial,helvetica; font-size:8pt; color:#dedede;  /* font-family: Helvetica, Arial, sans-serif; font-size:13px; line-height: 1.3; color: #555; */ }body.contentpane { background:#fff; color:#555;}.background { background:url(../images/fon_nk.png); margin:0; background-attachment:fixed;}h1,h2,h3,h4,h5,h6 {margin:0; padding:10px 0; font-weight:bold; color:#134E8B;font-family:Arial, Helvetica, sans-serif;}.componentheading { font-style:italic;font-size:25px; margin:0; padding:0 0 10px 0; color:#1a528c;}h1 { font-size: 20px;}h2 { font-size: 18px;}h3 { font-size: 16px;}h4 { font-size: 14px;}/* a:link, a:visited { text-decoration: none; color: #1aa8fb;}a:hover { text-decoration: underline; color: #2f7ac0;} */a:link, a:visited { text-decoration: none; color: #dedede;}a:hover { text-decoration: none; color: #ffffff;}ul {margin:0 0 0 15px;}p {margin-top: 0;margin-bottom: 10px; padding: 0 5px 0 5px;}blockquote { background:#eee; border:3px solid #ccc; margin:5px; padding:5px; font-size:18px; font-family:Arial, Helvetica, sans-serif; font-style:italic}element.style { height:auto;}hr { width:100%; clear:both; border:none; height:2px; background:#eee; margin:0; padding:0;}.clr {clear: both;} /* Header */#header { position:relative; height:125px; width:960px; margin:0 auto; background:url(../images/banner.jpg) repeat-x; -moz-border-radius: 5px; border-radius:5px;-moz-box-shadow: 0 0 5px #b9b9b9;-webkit-box-shadow: 0 0 5px#b9b9b9;box-shadow: 0 0 5px #b9b9b9;}#header-w {position:relative;}.top {color:#fff;width:450px;overflow:hidden; padding:20px 0 0 0; margin:0 0 0 500px;z-index:1;}.top a {color:#fff; text-decoration:underline}.logo { position:absolute; left:30px; color:#fff; top: 27px;}.slogan { position:absolute; left:67px; color:#555; top: 80px;}.tguser { position:absolute; right:10px; top: 0px; color:#fff; float:right;} /*.topmenu {right:130px; top:10px; float:right; height:22px;font-family: segoe ui, verdana, arial, sans-serif; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px ;} */.topmenu ul {margin:0; padding:0; float:left; background:#fff; -moz-border-radius: 5px; border-radius: 5px;}.topmenu ul li {list-style:none;float:left;height:100%;position:relative;}.topmenu ul li a { display:block;padding:0 10px 0 10px; margin:0; line-height:22px; color:#555; text-decoration:none;font-size:12px;font-weight:normal; text-shadow:#fff 0 1px;}.topmenu ul li.active {}.topmenu ul li.active a {}.topmenu ul li:hover {}.topmenu ul li a:hover{ text-decoration:none; font-weight:normal; font-size:12px; -moz-border-radius: 5px; border-radius: 5px; color:#03b6dd;text-shadow:none;}.topmenu ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}.topmenu ul li:hover ul, #menu ul li.sfHover ul {left:0;}.topmenu ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}.topmenu ul li:hover ul li a {text-shadow:none;}.topmenu ul li:hover ul li { background:none;}.topmenu ul li:hover ul li a, .topmenu ul li ul li a, .topmenu ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}.topmenu ul li ul li a:hover, .topmenu ul li ul li.active a, .topmenu ul li.active ul li a:hover, .topmenu ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}.topmenu ul li ul ul, .topmenu ul li:hover ul ul, .topmenu ul li:hover ul ul ul, .topmenu ul li:hover ul ul ul ul, .topmenu ul li.sfHover ul ul, .topmenu ul li.sfHover ul ul ul, .topmenu ul li.sfHover ul ul ul ul {left:-999em;} #slide-w { margin:0; padding:0; background:#EAEAEA url(../images/bg.png) 0 0 repeat-x; border-bottom:1px solid #d6d6d6;border-top:1px solid #f5f5f5;}#slide { width:960px; margin:0 auto;} /* Navigation */#nav {}#navl {}#navr {height:40px; background:url(../images/mainmenu.png) 0 0 repeat-x; font-family: 'Cuprum', sans-serif; font-size:15px; margin-top: 5px;margin-top: -4px;}#nav {z-index:10; position:relative;}#nav-left { float:left; width:80%;}#nav-right { float:right; width:20%;}#nav ul {margin:0; padding:0; float:left;}#nav ul li {list-style:none;float:left;height:100%;position:relative; padding:0; margin:0;}#nav ul li a { display:block;padding:0 15px 0 15px; margin:0; line-height:40px; color:#fff; text-decoration:none;font-size:15px;font-weight:normal;}#nav ul li.active {}#nav ul li.active a {background:url(../images/mainmenu-h.png) repeat center; color:#555;}#nav ul li:hover {}#nav ul li a:hover{ text-decoration:none; font-weight:normal; font-size:15px; background:url(../images/mainmenu-h.png) repeat center; color:#555;}#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}#nav ul li ul li {padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}#nav ul li ul li:hover ul {left:180px; top:0}#nav ul li:hover ul li a {text-shadow:none;}#nav ul li:hover ul li { background:none;}#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:12px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:13px;text-shadow:none;}#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;} /* Sidebar */#leftbar-w {padding:0px;width:209px;float:left;}#addthis {float:center; padding-left: 12px; padding-top: 5px;}#rightbar-w {padding:0px;width:209px;float:right; }#sidebar {padding:0;}#sidebar .module {border:1px solid #1c1c1c; margin-bottom: 5px; /* -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px; */}#sidebar .module-title {font-size:8px;font-weight:100;margin:0;height:32px; line-height:34px; color: #cbcbcb; padding:0 0 0 22px; /* font-family: 'Cuprum', sans-serif; */ font-size:12px; border-bottom:1px solid #1c1c1c; text-shadow: 0.1em 0.1em 0.05em #000000;/*  -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 0px 0px 3px #b9b9b9; -webkit-box-shadow: 0px 0px 3px #b9b9b9; box-shadow: 0px 0px 3px #b9b9b9; */}#leftbar-w .module-title {padding: 0 0 0 15px; background:#202020; background: url(../images/block_head.png);}#rightbar-w  .module-title {padding: 0 0 0 15px; background: #fff;}#sidebar .module-body {margin:0; padding:7px; background:#242424;/*  -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; color:#555; -moz-box-shadow: 0px 0px 3px #b9b9b9; -webkit-box-shadow: 0px 0px 3px #b9b9b9; box-shadow: 0px 0px 3px #b9b9b9; */}/* #sidebar .module-body p{padding:0; margin:0;} */#sidebar  ul li { margin:0 5px; padding:0;}#sidebar .module ul.menu{margin:5px 0 0 0; padding:0;list-style:none; padding:0; list-style-type:none;}#sidebar .module ul.menu li{list-style:none; list-style-type:none;margin:6px; padding:0; border:1px solid #1c1c1c;  /* border-bottom:1px dotted #6e99c2; */}#sidebar .module ul.menu li a {display:block;margin:0; padding:3px 0 3px 15px;font-weight:bold;line-height:12px;background: url(../images/bg2.png) 0% 50% no-repeat; text-decoration:none; font-size:10px; text-align:left;}#sidebar .module ul.menu li a:hover { color:#ffffff; text-decoration:none;}#sidebar .module ul.menu li.active a{color:#dedede;}#sidebar .module ul.menu li ul {border-top:1px solid #e4e4e4; margin:0;}#sidebar .module ul.menu li ul li {background:none; border:none; margin: 0 0 0 15px;   }#sidebar .module ul.menu li ul li a{ border: 0; color:#999; background: url(../images/arrow2.png) 0% 50% no-repeat; text-align:left;}#sidebar .module ul.menu li ul li a:hover{ border: 0; color:#134E8B; background: url(../images/arrow2.png) 0% 50% no-repeat; }#sidebar .module ul.menu li.active ul li a{color: #6e99c2;}#sidebar .module ul.menu li ul li.active a, #sidebar .module ul.menu li.active ul li a:hover{color:#134E8B;}

 

 

Помогите пожалуйста исправить.

 

p.s кроме стилей больше ничего не менял.