Problème de liste

[new_user]

Bonjour,

Je me permets de poster ce message afin de savoir si quelqu'un pourrait m'aider concernant un petit problème de mise en forme sur une liste ..

Le problème :

J'ai une liste à puces catégories dans un menu. Le truc c'est que le retrait avec ' list-style: inside ; ' dans le css (afin que les puces ne dépassent pas du menu [sur la gauche]) fait sauter les liens à la ligne ...

• 
  lien
• 
  lien 2
• 
  lien 3

Or j'aimerai bien que les puces et les liens soient sur la même ligne ... question d’esthétique.

Malheureusement j'ai un peu bidouillé le css (en faisait des recherches sur internet dont le site du zero) histoire d'essayer de m'en sortir avant de demander de l'aide mais ca n'a pas marché. J'ai réduit l'espacement (le lien qui est a la ligne était au début décalé vers la droite, il ne l'ai plus. Mais c'est pas trop grave c'est dans les pading je crois a un endroit j'ai retiré les 3px de pading. Ou bien les margins ...)

Je laisse le css (dont j'ai retiré la partie header et la partie footer pour que le message passe (sinon + de 10.000 caractères) si il y en a besoin je vous l'envois), si quelqu'un veut bien jeter un oeil :

[ Ps: l'endroit concerné je suppose est colright (colonne de droite) les lignes #colright h4 et #colright li mais vu que j'ai touché ca et que ca ne réctifie pas peut etre est-ce ailleurs.

En remerciant par avance pour l'avis, le coup de main. Bonne soirée.

[Ps 2 : ca c'est le css template (après ya un css joomla je sais pas si vous en avez besoin ? ]

* {padding:0; margin:0; border: 0px;}

html
{
height: 100%;
}

body
{
background-color: #FFFFFF;
background-image: url(../images/top_bg.png);
background-repeat: repeat-x;
background-position: left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #272727;
text-align: left;
vertical-align: top;
}

table
{
width: 100%;
}

img
{
border: 0;
vertical-align: top;
}

p
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

p img
{
margin: 0px 15px 15px 0px;
padding: 0px 0px 0px 0px;
}

a
{
text-decoration: none;
color: #272727;
border-bottom: 1px;
border-style: dotted;
outline-style: none;
}

a:hover
{
color: #6699FF;
border: none;
outline-style: none;
}

ul
{
list-style: none
}

li
{
list-style: none;
}

form
{
padding: 5px 0px 0px 0px;
}

fieldset
{
margin: 5px 0px 5px 0px;
padding: 2px 0px 2px 0px;
}

input,
select
{
width: 215px;
margin: 0px 0px 0px 0px;
padding: 1px 3px 2px 3px;
font-size: 11px;
color: #272727;
border: 1px;
border-color: #DDDDDD;
border-style: solid;
vertical-align: bottom;
background-color: transparent;
}

input
{
height: 15px;
}

search input
{
background-image: url(../images/search.png);
background-position: left;
background-repeat: no-repeat;
border-color: #F6F6F6;
color: #F6F6F6;
}

option
{
line-height: 30px;
padding: 1px 1px 2px 3px;
margin: 0px 0px 2px 0px;
}

textarea
{
width: 450px;
margin: 2px 2px 10px 0px;
padding: 2px 2px 2px 2px;
font-size: 12px;
border: 1px;
border-color: #DDDDDD;
border-style: solid;
color: #272727;
font-family: Arial, Helvetica, sans-serif;
vertical-align: bottom;
}

caption
{
}

label
{
float: left;
line-height: 18px;
padding: 2px 5px 0px 0px;
font-weight: normal;
}

/************************************************** ************************************/
/* Column Right
/************************************************** ************************************/

#colright
{
float: right;
width: 275px;
padding: 0px 0px 15px 40px;
margin: 20px 0px 20px 0px;
text-align: left;
}

#colright h1,
#colright h2,
#colright h3
{
height: 24px;
text-align: left;
margin: 0px 0px 1px 0px;
padding: 7px 0px 0px 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background-image: url(../images/h_bg.png);
background-position: left top;
background-repeat: repeat-x;
background-color: #FFFFFF;
color: #F6F6F6;
}

#colright h4,
#colright .bannerheader
{
height: 15px;
margin: 10px 0px 10px 0px;
padding-left: 10px
font-weight: bold;
font-size: 13px;
vertical-align: top;
}

#colright p
{
margin: 0px 0px 0px 0px;
font-weight: normal;
text-align: justify;
}


#colright ul
{
margin: 10px 0px 10px 0px;
}

#colright li
{
padding: 0px;
list-style: inside;
list-style-image: url(../images/mark_grey.png);

}

#colright a,
#colright li a
{
text-decoration: none;
font-weight: normal;
border: none;
color: #272727;
}

#colright a:hover
{
color: #F09100;
border: none;
cursor: pointer;
}

#colright form
{
padding: 0px 0px 0px 0px;
}

#colright input
{
width: 225px;
margin: 0px 0px 0px 0px;
}

#colright input[type="checkbox"],
#colright input[type="radio"]
{
float: left;
width: 5px;
height: 5px;
margin: 2px 0px 0px 5px;
border: none;
}

#colright button,
#colright .button
{
clear: both;
float: right;
width: 100px;
height: 25px;
margin: 10px 0px 0px 20px;
color: #F6F6F6;
background-image: url(../images/btnof_right.png);
background-repeat: no-repeat;
border: none;
font-weight: bold;
outline-style: none;
}

#colright button:hover,
#colright .button:hover
{
cursor: pointer;
background-image: url(../images/btnon_right.png);
background-repeat: no-repeat;
border: none;
color: #272727;
border: none;
}

#colright .colrightcustom
{
}


/************************************************** ************************************/
/************************************************** ************************************/
/* General IDs and Classes
/************************************************** ************************************/
/************************************************** ************************************/

#general
{
width: 1000px;
text-align: center;
margin: 0px auto 0px auto;
}

.alignleft
{
text-align: left;
}

.alignright
{
text-align: right;
}

.center
{
padding: 10px;
text-align: center;
}

.left
{
float: left;
}

.right
{
float: right;
}

.clear
{
clear: both;
}

.separator
{
width: 1px;
height: 20px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_5
{
clear: both;
width: 5px;
height: 5px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_7
{
clear: both;
width: 7px;
height: 7px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_10
{
clear: both;
width: 10px;
height: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_15
{
clear: both;
width: 15px;
height: 15px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_20
{
clear: both;
width: 20px;
height: 20px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_20_left
{
float: left;
width: 20px;
height: 20px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_30
{
clear: both;
width: 30px;
height: 30px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_30_left
{
float: left;
width: 30px;
height: 30px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_50
{
clear: both;
width: 50px;
height: 50px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.separator_ver
{
margin: 0px 15px 0px 15px;
width: 2px;
background-image: url(../images/sep_ver.png);
background-repeat: repeat-y;
background-position: bottom;
}

.separator_hor
{
padding: 25px 0px 25px 0px;
height: 2px;
background-image: url(../images/sep_hor.png);
background-repeat: repeat-x;
background-position: center;
}

.separatordotted_hor
{
clear: both;
margin: 20px 0px 20px 0px;
height: 1px;
background-image: url(../images/sep_hor.png);
background-repeat: repeat-x;
background-position: bottom;
}

.separatordotted_ver
{
margin: 0px 0px 0px 0px;
width: 1px;
background-image: url(../images/sep_ver.png);
background-repeat: repeat-y;
background-position: bottom;
}


#slogan
{

}

.border
{
}

.button,
button
{
outline-style: none;
}

.button:hover,
button:hover
{
cursor: pointer;
}

.label
{
font-weight: bold;
}

.asterisk
{
float: left;
width: 10px;
padding: 0px 0px 0px 3px;
color: #F09100;
}