[Solved] Block background for categories not showing in ie7

To me, the categories block is showing dark brown, just like the Statistics and Fanart blocks on Pretender 2. Pretender 1 has them all dark blue.

Arrgghhhh i HATE  ie
it works, it doesnt.
grrr

that block shoudl be dark brown too

that is what me and many of my authors are seeing in ie7 at the moment

and i KNOW it wasnt doing that before cos i always check what is going on in ie

opera and firefox is all good

Ah! I get it. 🙂 LOL, I didn't notice the IE part. Silly me.

Hmmm. But they don't do that in your other skins. Whats different between the categories blocks of the three Pretender skins, and your other skins?

Pretender 4

<div id="categories">
       <div class="blocktitle">&nbsp;</div>
       <div class="blockcontent"><div id="categoryblock">
   <div class="row"><a href=""browse.php?type=categories&amp;id=28">Non" - Fiction</a> [16]</div>
   <div class="row"><a href=""browse.php?type=categories&amp;id=2">Stories</a>" [1475]</div>
   </div></div>

   <div class="blockbottom">&nbsp;</div>	<br /><br />
     </div>

Pretender 2

<div id="categories">
       <div class="blocktitle">&nbsp;</div>
       <div class="blockcontent"><div id="categoryblock">
   <div class="row"><a href=""browse.php?type=categories&amp;id=28">Non" - Fiction</a> [16]</div>
   <div class="row"><a href=""browse.php?type=categories&amp;id=2">Stories</a>" [1475]</div>
   </div></div><br />

    </div>

They look alright. It's probably the differences in the css declarations... maybe Pretender4 has an actual background image and Pretender2 has a background color.

The artblock that shows up right in Pretender2:

<div id="fanart">
       <div class="blocktitle">&nbsp;</div>
       <div class="blockcontent"><br /><a href="" http://..." ;" target="_blank" title="Go to artwork by Onisius">
<img src="" http://..."</img><b r" /><br /></div>
   <div class="blockbottom">&nbsp;</div>	<br /><br />

     </div>

The category block has an extra div when compared, so it's probably the categoryblock in the css.

The css:

}
#content {
 margin-left: 4px;
 padding: 10px;
 background-color: #CDB38B;
 color: #000;
 line-height: 1.5em;
}

#leftindex .content {background-color:#CDB38B; color:#25303F; margin-right: 20px; margin-left: 20px;}

#categories .blocktitle {background:url(images/sidebar_categories.gif); color:#000; line-height:15px;}
#categories .blockcontent {background-color:#9A725D
; line-height:16px; color: #000000; border-left: 1px solid black;
border-bottom: 1px solid black;border-right: 1px solid black;text-align:left; padding-left: 1.2em; padding-right: 1.2em;
}


/* This controls the look of the blocks on the index page.   */

/* The box around the block */
.block { 
margin: 1em;
border: 1px solid #000;
}

/* The block's title */
.block .title {
background: #385238;
color: #FFF;
font-weight: bold;
padding: 6px;
border-bottom: 1px solid #000;
}

/* The block's content */
.block .content {
padding: 6px;
background: #FFF;
}

You don't see to have "categoryblock" anywhere in Pretender2's css. Try adding one with the right background color declared. You might want to look into the extra contents... I'm not sure which one you are using... but having more than one can cause problems.

I have NO idea at all.

That code was actually copied from the other blocks, that way it was all uniform, just copy/paste and change the #name

I knwo it was fine when i checked last time in ie7, just after i moved it and all was good. I always check ie because it usally causes me no end of problems with niggly little things. then today somebody emailed me to say hey, what is going on with categories. I havent messed with the skins since i got them sorted, it is just a spontaenous kind of thing.

the only thing i can think of is that the block was changed in the upgrade and the divs are different somehow, although why they woudl behave differently in ie and firefox/opera is anybody's guess.

the other skins have a uniform background, the block background is the same as the main page background so the div coloring for the categories failing is not apparent.

My index template doesnt actaully have that extra div, it must be 'growing' it somehow

<div id="categories">
       <div class="blocktitle">&nbsp;</div>
       <div class="blockcontent">{categories_content}</div><br />
    </div>

that is straight from my index.tpl for pretendr 2

You don't seem to have "categoryblock" anywhere in Pretender2's css. Try adding one with the right background color declared. You might want to look into the extra "contents"... I'm not sure which one you are using... but having more than one can cause problems. I see them for left/right index, blocks, content, ect. You're supposed to list the most general one first, and afterwards the specific ones in order because the last one put down is the one that overwrites the ones before.

(not that I know that much about css, but that's my guess as to what the problem is, IE is probably reading the css weirdly)

i have been poking around in the categories.php and noticed that category block too, then saw your edits and came to same conclusion

this has never been an issue before so i am assuming it probably came with the 3.2.1 upgrade and some changes made to the block? Or ie is just having a freaking huge dummy spit

i know that the css is a bit of a hodge pogde, it grew out out of the css i inherited with the archive from a version 1 skin and have been stumbling my way thru learning as i go (didnt even know what css was back then) and it is alway ie that causes the damn problems.

perhpas i shoudl look at reskinnning from the defautl tpls

have tried a few things and nothign workign and it is far to late (or early now) for me to function even remotlely close to properly so going to just say screw ie for now and give this a bash later.

thanks jan for your help, as always, wonderful.

Update on what i have tried and still no success.

Starting rebuilding a skin from scratch, based on the default_tpls
you can see progress here:
http://www.pretendercentre.com/missingtest/index.php?skin=Pretender    (pretender skin)

and the same problem on old skin too (which i havent touched yet)
http://www.pretendercentre.com/missingtest/index.php?skin=Pretender2

it is a work in progress so still has many hangovers from the default templates but I have done enough to demonstrate the problem witht he category block on index page.

all the other blocks are working fine with a much more stripped down coding than i was using beofre, all except category.

the background for the #rightindex div is overriding the .block.content for this block only.

i dont have any excess contents in there now, in fact there isnt much of anything since it is the default css

my index.tpl

<!-- INCLUDE BLOCK : header -->
<div id="welcome">{welcome}</div>
<div id="leftindex">
       <div id="newstitle">{news_title}</div>
       <div id="newscontainer">{news_content}</div>
       <div id="newsarchive">{newsarchive}</div>
</div>
<div id="rightindex">
<div class="block">
       <div class="infotitle">&nbsp;</div>
       <div class="content">{info_content}</div>
     </div>

<div class="block">
       <div class="arttitle">&nbsp;</div>
       <div class="content"><br /><div align="center"><a href="" http://www.pretendercentre.com/pretendergallery/thumbnails.php?album=24" ;" target="_blank" title="Go to artwork by Onisius">
<img src="" http://www.pretendercentre.com/pretendergallery/albums/userpics/10007/thumb_Smile_a.jpg "</img><br" /><br /></div></div>
  	<br />
     </div>

 <div class="block">
       <div class="categtitle">&nbsp;</div>
       <div class="content">{categories_content}</div>
     </div>

 <div class="block">
       <div class="recenttitle">&nbsp;</div>
       <div class="content">{recent_content}</div>
     </div>

     <div class="block">
       <div class="title">{random_title}</div>
       <div class="content">{random_content}</div>
     </div>
    
    
     <div class="block">{skinchange_content}</div>

<div class="block">{rss}</div>
</div>

<!-- INCLUDE BLOCK : footer -->

everything seems to be working just fine except for the categories block.
this is my css at the moment:

/* Some definitions used everywhere */
BODY { 
 margin:0px;
 padding:0px;
 font-family: Verdana, helvetica, sans-serif;
 background-color: #7b5c4a;
 background:url(images/pretend3.gif);
 font-size: 10px;
 color: #000;
}

#container {
width: 700px;
margin: auto;
text-align: center;
 	 background-color: #CDB38B;
}
IMG { 
border: 0;
padding: 0;
margin: 0;
}
/* Header cells in tables throughout the site */
TH { 
background: #000;
color: #FFF;
font-weight: bold;
}
/* links */
A { 
color: #333;
font-weight: bold;
text-decoration: underline;
}
/* hovering links */
A:hover {
text-decoration: underline overline;
}
/* the box at the top of the page */
#banner {
 height: 487px;
 background-color: #000;
 background-image: url(images/tphead.jpg);
 border-bottom: 1px solid #000;
}


/* The location of the div containing the skin change drop menu  in the banner area */
#skin {
position: absolute;
right: 30px;
top: 25px;
}
/* The location of the div containing the RSS link in the banner area */
#rss {
position: absolute;
right: 50px;
top: 55px; 
}

/* the following defines your menu below the banner div */

/* the box around the menu and aligning the text to center */
#menu { 
margin-top: .25em;
margin-bottom: .25em;
padding-left: 5px;
padding-right: 5px;
 background-color: #CDB38B;
}
#menu UL {
 margin-left: 3px;
 padding-left: 5px;
padding-right: 5px;
 white-space: nowrap;
}

#menu LI {
padding-left: 5px;
padding-right: 5px;
 display: inline;
 list-style-type: none;
}

/* links in the menu */
#menu a {color: #5E2612;
 background-color:#CDB38B;
 text-decoration: none;
 font-weight: bold;
padding-left: 5px;
padding-right: 5px;
}

/* Hovered links in the menu */
#menu a:hover {
 color: #AA6600;
 background-color: none;
 text-decoration: underline;
 font-weight: bold;
padding-left: 5px;
padding-right: 5px;
}

/* The link for the currently displayed page in the menu */
#menu #current {
padding-left: 5px;
padding-right: 5px;
 background-color: #CDB38B;
}

#submenu {
 padding: 3px;
 background-color: #CDB38B;
 
}

#submenulist {
 padding: 0px;
 margin: 0px;
 text-align: center;
}

#submenulist ul {
 margin-top: .25em;
 margin-bottom: .25em;
 margin-left: 0;
 padding-left: 0;
 white-space: nowrap;
}

#submenulist li {
 display: inline;
 list-style-type: none;
}

#submenulist a { 
 padding-top: 3px;
 padding-bottom: 3px;
 padding-left: 7px;
 padding-right: 7px;
 margin-right: 3px;
}

#submenulist a:link, #submenulist a:visited {
 color: #5E2612;
 background-color: none;
 text-decoration: none;
 font-weight: bold;
}

#submenulist a:hover{
 color: #AA6600;
 text-decoration: underline;
 font-weight: bold;
}
/* end menu setup */

/* the footer box at the bottom of the page */
#footer {
border-top: 3px double #CCC;
background: #000;
color: #FFF;
padding: 10px;
clear: both;
}

/* End universal page setup */

/* this is a carryover from 1.1.  Generally it is used around tables and table cells. */
.tblborder { 
border: 1px solid #000;
padding: 6px;
border-collapse: collapse;
}

/* Main page surrounds the text between the header and the footer.  
For IE, height is set to 650 to force the footer down to the bottom of the page where the content is short.  
And the second declaration is for everyone else so that it will scroll if longer but be a minimum of 650px
*/
#mainpage {
height: 550px;
padding-bottom: 1em;
background:  #CDB38B;
color: #000;
}
html>body #mainpage { 
height: auto;
min-height: 550px;
}

/* Most pages use pagetitle to format the page's title */
#pagetitle { 
text-align: center;
font-size: 25px;
color: #333;
margin-top: 1em;
}

/* 
Where there's a list of alphabet links #alphabet controls their look. 
Just to make things simpler #pagelinks controls the look of the links at the bottom of multi-page results
and will be set here too. Generally, they look alike.
*/
/* the box around the links */
#alphabet, #pagelinks {
text-align: center;
word-spacing: -.3em;
margin: 1em;
}
/* each link */
#alphabet A, #pagelinks A {
color: #FFF;
text-decoration: none;
font-weight: bold;
background: #000;
border: 1px solid #CCC;
border-collapse: collapse;
padding: 0 2px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
background: #CCC;
color: #333;
}
/* the currently selected letter and currently selected page */
#alphabet #current_letter, #pagelinks #currentpage {
background: #FFF;
color: #333;
font-weight: bold;
border: 1px solid #CCC;
padding: 0 2px;
}
/* End alphabet and page link declarations */

/* labels throughout the site in forms and in other places */
LABEL, .classification {
color: #666;
font-weight: bold;
}
/* Admin options in various places.  */
.adminoptions { 
color: #666;
font-weight: bold;
}

/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #333;
}

/* The box around each individual story */
.listbox {
margin: 1em 5%;
border: 1px solid #000;
}

/* The title bar for each story box. */
.listbox .title {
background: #000;
padding: 6px;
color: #FFF;
font-weight: bold;
}
/* Because the background is black, the link colors need to be changed. */
.listbox .title A {
color: #CCC;
}
/* The content of the box...summary, categories, etc. */
.listbox .content {
padding: 6px;
}

/* The tail info published date etc. on the last line */
.listbox .tail {
background: #000;
padding: 6px;
color: #FFF;
}
/* And again because of the black background change the color of the links. */
.listbox .tail A {
color: #CCC;
}

/*End story/series listings */

/* titleblock is used for the title information in series and challenges */
#titleblock {
margin: 0 10%;
}

/* The pulldown jump menus on several pages. */
.jumpmenu {
text-align: right;
margin-right: 1em;
}

/* On the story page, there's a jumpmenu at the bottom. It looks better centered, so this will replace the declaration above for that 
drop down list ONLY */
#pagelinks .jumpmenu {
text-align: center;
}

/* This is used on series and challenges and other places where a response is solicited */
.respond { 
text-align: center;
padding: 6px;
}

/* The sort menu on the categories page */
#sort { text-align: center; }


/* On pages that don't use listings, the content is surrounded by a div labeled output to */
#output { 
padding: 10px;
}

/* User Profile stuff */
/* The top list of information */
#profile {
margin: 1em 10%;
}
/* The sort menu in the profile */
#profile #sort {
text-align: right;
font-weight: bold;
color: #666;
 }
/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
background: #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
margin: 0;
padding: 0;
}
/* The individual tabs. */
#tabs span {
font-size: 12px;
background: #CCC;
border: 1px solid #000;
padding: 3px;
}
/* Links in the tabs */

#tabs #active {
background: #FFF;
color: #666;
}


/* Your welcome message */
#welcome {  margin-left: 0px; margin-top: 0; text-align: left; background: #CDB38B; padding-bottom: 2em; padding-top: 1em;
 padding-left: 1em; padding-right: 2em;	}

#rightindex {
background: #CDB38B;
float: right;
width: 180px;
padding-right: 0.5em;
padding-left: 0.5em;
border-left:0px solid #CDB38B;
}

/* This controls the look of the blocks on the index page.   */

/* The box around the block */
.block { 
margin: 1em;

}

/* The block's title */
.block .title {
background: #000;
color: #FFF;
font-weight: bold;
padding: 6px;
}

/* The block's content */
.block .content {
padding: 6px;
    text-align: left;
background-color:#9A725D;
    border-left: 1px solid #000; border-right: 1px solid #000;border-bottom: 1px solid #000;
}
#categoryblock {
padding: 6px;
    text-align: left;
background-color:#9A725D;
}

.infotitle {background:url(images/sidebar_statistics.gif); color:#000; line-height:15px;}
.arttitle {background:url(images/fanart.gif); color:#000; line-height:15px;}
.categtitle {background:url(images/sidebar_categories.gif); color:#000; line-height:15px;}
.recenttitle{background:url(images/sidebar_recent.gif); color:#000; line-height:15px;}


#leftindex {
float: left;
width: 500px;
 margin: 0px;
 margin-top: 0;
 text-align: left;
 background: #CDB38B;
}

html>body #leftindex {
margin-top: -1em;
}

#newstitle {
font-family: verdana;
font-size: 10pt;
font-weight: bold;
color: #0000000;
text-align: center;
}
#newscontainer {
margin: 1em;
    text-align: center;
}

.news {
margin: 1em;
    border-bottom: 1px solid #000;
    text-align: center;
}
.newstitle {
padding: 4px;
margin: 0 10px;
border: 1px solid #000;
border-bottom: 0;
background: #696;
color: #FFF;
font-size: 14pt;
font-weight: bold;
}

.newssig {
border: 1px solid #000;
background: #CDB38B;
color: #FFF;
padding: 3px 7px;
}
.newssig .label { color: #FFF; }
.newssig A { color: #A8C4A8; }
.newscontent {
padding: 7px;
background: #CDB38B;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0 10px;

}

#newsarchive {
text-align: center;
margin: 1em;
}



/* The next link at the bottom of a multi-chapter story */
#next { float: right; }
/* The previous link at the bottom of a multi-chapter story */
#prev { float: left; }

#browse #category_content { width: 95% !important; margin: 1em auto; }

i have no idea why this won't work anymore, and no idea why it is only ie it wont work in.
Had a look in the categories block and the divs in there  and added a #categoryblock and no good, and i also tried a #browesblock  and still the same

thanks
jacci

Instead of putting {categories_content}, try putting in some dummy text so we can narrow the problem down. {categories_content} adds extra coding in. I suspect that the problem is somewhere in the hardcoded part of the categories block, but this will narrow it down for us.

I see that didn't help, and I know why.

Look here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pretendercentre.com%2Fmissingtest%2Findex.php%3Fskin%3DPretender&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1

and fix the errors. Then we'll know what's going on. (Hopefully...)

Hey carissa, you beat me to the post by about 1 minute

i figured it out!!!

it was a damn </a> missing
grrrrrrrr

i checked that code 100 times over and i dont know why i didnt see it.

I will go thru that validator too once i go and check to see if this fixes all of them but i think it will

thanks once again for all your help, this has been driving me mental now for about 2 days.

Ohh you dont know how good that felt to mark that as SOLVED

thanks and hugs to jan and carissa for all your help!!!!!