Can't get LI right [solved]

[Gregor]

Hello,

On http://www.uisge-beatha.eu I try to get a square (f.i.) as li, however if I do so, than all albums and thumbs show that square too. been trying for a while, and probably something I overlook. Any help is much appreciated!

I have two css, the main (partly):

Code: Select all

#main {
float: left;
}

#main ul li a:hover,p a:hover {
text-decoration:none;
color:#61363c;
background:#b39887;
}

#main p img {
float:left;
margin-top:10px;
margin-left:10px;
margin-right:10px;
}

#ads img {
display:block;
padding-top:10px;
}

.core-float-right {
float:right;
width:28%;
}

#header {
clear:both;
float:left;
width:100%;
height:180px;
background:#61363c url(/uploads/images/cms/Haiku.png) no-repeat right center;
}

#header p,#header h1,#header h2 {
color:#8af753;
margin:0;
padding:.4em 15px 0;
}

#header ul {
width:100%;
list-style:none;
text-indent:-999em;
display:none;
}

#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}

#header ul li a {
display:block;
float:left;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
margin:0 0 0 1px;
padding:3px 10px;
}

#header ul li a:hover {
color:#fff;
background-color:#369;
}

#header ul li a.active,#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:700;
}

#search {
width:178px;
position:relative;
bottom:15px;
border-style:outset;
}

#search label {
text-indent:-9999em;
display:none;
}

#search input.search-input {
width:143px;
font:bold .9em Arial, Helvetica, sans-serif;
background:url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/search.png) no-repeat;
float:left;
border-style:none;
padding:7px 0 4px 10px;
}

* {
font-weight:inherit;
font-style:inherit;
font-family:inherit;
}

div#header_banner {
display:inline-block;
height:180px;
position:absolute;
float:left;
top:-5px;
}

div#search input.search-button {
width:37px;
height:28px;
text-indent:-9999em;
float:right;
cursor:pointer;
font-size:0;
line-height:0;
background:transparent url(/uploads/images/cms/search.png) no-repeat;
border-style:none;
margin:0;
}

.accessibility {
position:absolute;
top:-999em;
left:-999em;
}

#bar {
height:20px;
font:10px "Lucida Grande", Lucida, Verdana, sans-serif;
width:98%;
display:inline-block;
margin-top:5px;
margin-bottom:5px;
background-color:#fffeff;
padding-left:11px;
}

.breadcrumbs {
width:40%;
display:inline-block;
}

.icons {
text-decoration:none;
margin-top:0;
margin-bottom:0;
width:190px;
float:right;
padding-right:10px;
}

.icons img {
text-decoration:none;
width:20px;
height:20px;
float:right;
margin:0 0 0 7px;
}

a.twitter-share-button {
float:left;
}

.col30 {
float:left;
width:20%;
}

.col30 textarea {
width:300px;
height:100px;
}

.col70 {
float:left;
margin-left:30px;
width:50%;
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

* html > body .clearfix {
display:inline-block;
width:100%;
}

#layoutdims {
clear:both;
background:#e5d6cc;
border-top:4px solid #000;
text-align:right;
margin:0;
padding:6px 15px!important;
}

.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}

.colright,.colmid,.colleft {
float:left;
width:100%;
position:relative;
}

.col1,.col2,.col3 {
float:left;
position:relative;
overflow:hidden;
   padding: 0 0 1px;
}

.threecol {
background:#e5d6cc;
}

.threecol .colmid {
right:25%;
background:#fff;
}

.threecol .colleft {
right:50%;
background:#e5d6cc;
}

.threecol .col1 {
width:46%;
left:102%;
}

.threecol .col2 {
width:21%;
left:31%;
}

.threecol .col3 {
width:22%;
left:85%;
}

.leftmenu {
background:#fff;
}

.leftmenu .colleft {
right:75%;
background:#f4f4f4;
}

.leftmenu .col1 {
width:71%;
left:102%;
overflow:scroll;
overflow-y:scroll;
overflow-x:hidden;
height: 550px;
}

.leftmenu .col2 {
width:21%;
left:6%;
}

.col2 p {
line-height:115%;
}

#zeiluitspraken {
height:185px;
}

#zeiluitspraken a:link {
text-decoration:underline;
}

#zeiluitspraken ul.slider {
height:auto;
display:block;
margin:0;
}

#zeiluitspraken ul.slider li {
width:180px;
height:auto;
list-style-type:none;
margin-top:5px;
color:#61363c;
}

#zeiluitspraken ul.slider li em {
font-size:12px;
}

#print {
width:20px;
height:20px;
}

.tweetwhen {
font-size:10px;
}

a.external,p a {
   display: inline;
   padding-right: 12px;
}

a.external {

}

a.external span {
position:absolute;
left:-5000px;
width:4000px;
}

.main-main {
width:auto;
border-right:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
background:#f0f0f0;
padding:0 20px 20px;
}

.left49,.right49 {
font-size:.85em;
font-weight:700;
margin:7px 5px 5px 0;
}

.left49 span {
display:block;
padding-top:0;
margin-bottom:0;
color: #4d2b43;
}

.left49 {
   
   font-variant: small-caps;
   font-size: 13px;
}

.right49 {
width:44px;
background:url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/bull.png) no-repeat 0 4px;
float:right;
}

.right49 a,.right49 a:visited {
display:block;
height:15px;
background:url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/bull.png) no-repeat left top;
color:#000;
clear:none;
padding:7px 4px;
}

#main h3,#main h4,#main h5,#main h6 {
color:#301e12;
}
#main h2 {
   line-height: 25px;
   color: #b0757e;
   font-size: 30px;
   margin-bottom: 15px;
   margin-top: 0;
}

#main h4 {
margin-bottom:10px;
margin-top:0;
padding-top:5px;
font-size: 20px;
   color: #B29887;
}

#main h5 {
margin-bottom:10px;
margin-top:0;
font-size: 18px;
   color: #80AB72;
}

div#main ul,div#main ol,div#main dl,#footer ul,#footer ol {
line-height:1em;
margin:0 0 1.5em;
}

div#main ul,#footer ul {
list-style:circle;
}

div#main ul a:hover {
color:#01208b;
}

div#main ul li,div#main ol li,#footer ul li,#footer ol li {
margin-left:20px;
padding:2px 2px 2px 5px;
   list-style-type: square;
}

#main ul li a {
padding-right:12px;
line-height:15px;
   list-style-type: square;
}

a.external, p a, a.external, #main ul li a {
background:url(/uploads/images/cms/external.gif) no-repeat 100% -100px;
}

#main ul li.thumb a {
background-image:none;
}

div#main dl dt {
font-weight:700;
margin:0 0 0 1em;
}

div#main dl dd {
margin:0 0 1em 1em;
}

div#main dl {
margin-bottom:2em;
padding-bottom:1em;
border-bottom:1px solid silver;
}

The Album css:

Code: Select all

 [[strip]]
/* Default style sheet for Album templates */
* {
	margin: 0;
	padding: 0;
	list-style: none;
	outline: none;
}
.thumb a {
	border: none;
}
.thumb a img {
	border: none;
}
.clear {
	clear: both
}
/* Picture List UL */
.picturelist {
	margin-left: 0;
	padding-left: 0;
}
.album_content, div#main ul li, #main ol li {
   list-style-type: none;
}
/* Album and Picture Lists */
.picturelist .thumb {
	width: auto;
/* Thumbnail spacing */
	text-decoration: none;
	line-height: normal;
	list-style-type: none;
	text-align: center;
	float: left;
   margin: 0 0.5em 0.5px 0;
}
/* Set link formatting*/

.picturelist .thumb a:hover {
	background-color: #eee;
/*Background of thumb on hover - sort of light blue/green */
}
/* Set link formatting radius/shadows */
.picturelist .thumb a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	margin: 6px;
	display: inline-block;
	background: white;
	padding: 6px;
	line-height: 0;
	-webkit-border-radius: 4px 4px;
	-moz-border-radius: 4px 4px;
	border-radius: 4px 4px;
	-moz-box-shadow: 0px 0px 8px #AAA;
	-webkit-box-shadow: 0px 0px 8px #AAA;
	box-shadow: 0px 0px 8px #AAA;
	-webkit-transition: -webkit-box-shadow 0.1s ease-out;
	-moz-transition: -webkit-box-shadow 0.1s ease-out;
	-o-transition: -webkit-box-shadow 0.1s ease-out;
	transition: -webkit-box-shadow 0.1s ease-out;
}
.picturelist .thumb a img {
	border: none;
	padding: none;
	-webkit-border-radius: 4px 4px;
	-moz-border-radius: 4px 4px;
	border-radius: 4px 4px;
}
.picturelist .thumb a:hover {
	-moz-box-shadow: 0px 0px 8px #222;
	-webkit-box-shadow: 0px 0px 8px #222;
	box-shadow: 0px 0px 8px #222;
	background: white;
}
* html .picturelist .thumb a {
	display: inline;
	height: 72px;
/* Thumb height*/
	width: 100px;
/* Thumb width*/
	padding: 10px;
/* Thumb padding to form thumb frame */
/* You can set the above to 0px = no frame - but no hover indication!*/
	margin: 0 auto;
	background-color: white;
/*Background of thumb */
	border-top: 1px solid #eee;
/* Borders of thumb frame */
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 1px solid #eee;
	text-decoration: none;
}
*:first-child+html .picturelist .thumb a {
	display: inline;
	height: 72px;
/* Thumb height*/
	width: 100px;
/* Thumb width*/
	padding: 10px;
/* Thumb padding to form thumb frame */
/* You can set the above to 0px = no frame - but no hover indication!*/
	margin: 0 auto;
	background-color: white;
/*Background of thumb */
	border-top: 1px solid #eee;
/* Borders of thumb frame */
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-left: 1px solid #eee;
	text-decoration: none;
}
* html .picturelist .thumb a:hover {
	background-color: #F2F2F2;
}
*:first-child+html .picturelist .thumb a:hover {
	background-color: #F2F2F2;
}
/* Styling of text and navigation for Album */
.picturelist .thumb p {
	margin: 2px;
   width: 120px;
}
.albumname {
	font-size: smaller;
	text-align: center;
	font-weight: bold;
	font-style: normal;
}
.albumname a {
	display: inline;
	border: none;
	margin: none;
	padding: none;
	background-color: transparent;
}
.albumpicturecount {
	font-size: smaller;
	text-align: center;
	font-weight: normal;
	font-style: italic;
}
.albumcomment {
	text-align: center;
	font-weight: normal;
	font-style: normal;
   font-size: 11px;
}
.albumnav {
	text-align: center;
	font-weight: normal;
	font-style: normal;
	font-size: smaller;
}
.instructiontext {
	font-weight: normal;
	font-style: normal;
	font-size: smaller;
	font-style: italic;
}    
.album_content h3 {
	clear:left;
}
 [[/strip]]

Thanks for your time to look at it!
Gregor

[mcDavid]

Can you please only post the RELEVANT code for your problem? I'm not going to dig through all of it to see if I can find a little problem anywhere.

Having that said, you probably just have to give the list you want to edit a classname you don't use anywhere else, so you can add CSS to it.

[Gregor]

Ok McDavind, fair enough. Just wanted to be complete

Overall css for http://www.uisge-beatha.eu

Code: Select all

#main ul li a:hover,p a:hover {
text-decoration:none;
color:#61363c;
background:#b39887;
}


div#main ul,div#main ol,div#main dl,#footer ul,#footer ol {
line-height:1em;
margin:0 0 1.5em;
}

div#main ul,#footer ul {
list-style:circle;
}

div#main ul a:hover {
color:#01208b;
}

div#main ul li,div#main ol li,#footer ul li,#footer ol li {
margin-left:20px;
padding:2px 2px 2px 5px;
   list-style-type: square;
}

#main ul li a {
padding-right:12px;
line-height:15px;
   list-style-type: square;
}

a.external, p a, a.external, #main ul li a {
background:url(/uploads/images/cms/external.gif) no-repeat 100% -100px;
}

#main ul li.thumb a {
background-image:none;
}

div#main dl dt {
font-weight:700;
margin:0 0 0 1em;
}

div#main dl dd {
margin:0 0 1em 1em;
}

div#main dl {
margin-bottom:2em;
padding-bottom:1em;
border-bottom:1px solid silver;
}

The relevant Album CSS

Code: Select all

/* Picture List UL */
.picturelist {
   margin-left: 0;
   padding-left: 0;
}
.album_content, div#main ul li, #main ol li {
   list-style-type: none;
}
/* Album and Picture Lists */
.picturelist .thumb {
   width: auto;
/* Thumbnail spacing */
   text-decoration: none;
   line-height: normal;
   list-style-type: none;
   text-align: center;
   float: left;
   margin: 0 0.5em 0.5px 0;
}
/* Set link formatting*/

.picturelist .thumb a:hover {
   background-color: #eee;
/*Background of thumb on hover - sort of light blue/green */
}
/* Set link formatting radius/shadows */
.picturelist .thumb a {
   text-decoration: none;
   color: inherit;
   cursor: pointer;
   margin: 6px;
   display: inline-block;
   background: white;
   padding: 6px;
   line-height: 0;
   -webkit-border-radius: 4px 4px;
   -moz-border-radius: 4px 4px;
   border-radius: 4px 4px;
   -moz-box-shadow: 0px 0px 8px #AAA;
   -webkit-box-shadow: 0px 0px 8px #AAA;
   box-shadow: 0px 0px 8px #AAA;
   -webkit-transition: -webkit-box-shadow 0.1s ease-out;
   -moz-transition: -webkit-box-shadow 0.1s ease-out;
   -o-transition: -webkit-box-shadow 0.1s ease-out;
   transition: -webkit-box-shadow 0.1s ease-out;
}

Hope this helps to help me sort it out.

[mcDavid]

The CSS is quite a mess, especially the * selector makes it very complicated. I still don't get why people keep using those "resets" that only make things harder (and much slower). But I think you just downloaded this template?

the problem is specificity. The list-style is overwritten many times, by many CSS rules. The last is:

Code: Select all

.album_content, div#main ul li, #main ol li {
    list-style-type: none;
}

this one seems to overrule all the other list-style rules. I think you will get the effect you want by removing the div#main ul li and #main ol li selectors from this rule.

[Gregor]

I'm working on cleaning up the stylesheet, and already reduced it. The stylesheet, it's a combination of two stylesheet, one from Matthew Taylor (Three column fluid) and one of the cmsms blue theme. The album css is part of the latest Album version + the float template.

I followed your suggestion, however that did not work out. The list-item remains. Quite strange. Maybe the template from Album helps:

Code: Select all

{assign var='set_photoalbum' value='1'}
{* floatbox stuff *}
<link type="text/css" rel="stylesheet" href="modules/Album/templates/db/floatbox/floatbox.css" />
<__script__ type="text/javascript" src="modules/Album/templates/db/floatbox/floatbox.js"></__script>
{* same as Thickbox *}
{* Album List *}
{if !$album}
<ul class="picturelist">
{foreach from=$albums item=album}
 <li class="thumb">
  <p class="albumname">{$album->name|strip_tags}</p>
   <a href="{$album->link}"><img src="{$album->thumbnail}" alt="{$album->name}" title="{$album->name}"{$album->autothumbnailsize} /></a>
    <p><span class="albumpicturecount">({$album->picturecount} images)</span></p>
     <p><span class="albumcomment">{$album->comment|truncate:75|strip_tags}&nbsp;</span></p>
 </li>
{/foreach}
</ul>

{else}
{* Photo List *}
{if $pagecount>1}
<p class="albumnav">
<a href="{$link.page.first}" title="first page"><<&nbsp;</a>
{if $link.page.previous}<a href="{$link.page.previous}" title="previous page"><&nbsp;</a>{/if}
 page {$pagenumber}/{$pagecount}
 {if $link.page.next}<a href="{$link.page.next}" title="next page">&nbsp;></a>{/if}
<a href="{$link.page.last}" title="last page">&nbsp;>></a>
</p>
{/if}

<p><strong>{$album->name}</strong><br />
{$album->comment|strip_tags}<br />
<span class="instructiontext">Klik op een kleine foto om een grotere foto te zien. Door buiten de grote foto te klikken of druk op 'Esc' (escape) om deze te sluiten.<br/>{if $returnlink}<a href="{$returnlink}">Keer terug naar het albumoverzicht.</a>{/if}</span></p>

<ul class="picturelist">
{foreach from=$pictures item=picturesrow}
{foreach from=$picturesrow item=onepicture}
 <li class="thumb">

    <a href="{$onepicture->picture}" rel="{$album->name|escape:'html'}" class="floatbox" rev="numIndexLinks:10  showIndexThumbs:true indexLinksPanel:control group:images" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>


  {* <a href="{$onepicture->picture}" rel="{$album->name|escape:'html'}" class="floatbox" title="{$onepicture->name|escape:'html'}{if ($onepicture->comment != "")} - {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'}" title="{$onepicture->name|escape:'html'}"{$onepicture->autothumbnailsize} />
  </a> *}
 </li>
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}{/foreach}{/foreach}
</ul>
{if $picturecount==0}No image{/if}
{/if}
<div style="width:100px">&nbsp;</div>

[deactivated010521]

----------

[Gregor]

Thank for you reply. Currently in the album css I have:

Code: Select all

/* Album and Picture Lists */
.picturelist .thumb {width: auto;/* Thumbnail spacing */text-decoration: none;line-height: normal;list-style-type: none;text-align: center;float: left;margin: 0 0.5em 0.5px 0;}

Code: Select all

div#main ul li,
div#main ol li,
#footer ul li,
#footer ol li {margin-left:20px;padding:2px 2px 2px 5px;list-style-type: square;}

If I understand you correct, the child won't be able to change the list-type. Does that mean I have to change the album css to make picturelist and thumb a div?

[Dr.CSS]

If you want square on all li etc. but not on album add #main, if that is the div it's in, in front of picture list in album style sheet and remove any offending calls for #main ul/li in album style sheet...

[Gregor]

Thanks Mark. Arnoud helpt me out. You both came up with the same solution