Pesky gray vertical line in bulletmenu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
GSP

Pesky gray vertical line in bulletmenu

Post by GSP »

Hello,

I can't for the life of me figure out how to get rid of a vertical gray line within my bullet menu located to the right of the text.  All that I want is to have an all white background which I almost have but this pesky gray line just won't go away. 

Is there anyone who might have experienced the same problem or know of a quick fix for making the entire bullet menu space display with a white background.

This is my first post and I hate that this is my first question but I've been stuck on this for too long.  Any help would be greatly appreciated.

Thanks,

Tom
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Pesky gray vertical line in bulletmenu

Post by Dr.CSS »

Were here to help, but we will need a link or HTML and CSS to see...
Top
palan
Forum Members
Forum Members
Posts: 12
Joined: Wed Oct 03, 2007 1:43 pm

Re: Pesky gray vertical line in bulletmenu

Post by palan »

Where I've had similar problems, it's when I've copied and pasted a bulleted list into the cmsms wysiwyg text editor. Try removing the formatting and re-applying it within the editor. The pestky grey line has usually been on the left in my case though - and hasn't been on an active menu item.
Last edited by palan on Sat Oct 27, 2007 8:24 pm, edited 1 time in total.
Top
GSP

Re: Pesky gray vertical line in bulletmenu

Post by GSP »

Thank you Mark,

Here's a link to my test site:

http://www.memypetsandi.ca/cms

Tom
Top
GSP

Re: Pesky gray vertical line in bulletmenu

Post by GSP »

Sorry, you did ask for these too didn't you.

Code: Select all

body {

background-image:url(uploads/images/templates/horsegreen/body.gif);

color:#D1D1D1;

background-color:#ffffff;

font-size:13px;

font-family:arial;

}


a {

text-decoration:underline;

color:#666666;

background-color:#ffffff;

}

a:hover {

text-decoration:underline;

color:#ADBA5E;

background-color:#ffffff;

}


#main {

width:750px;

margin:auto;

background-color:#ffffff;

padding-bottom:10px;

}


#logo {

background-image:url(uploads/images/templates/horsegreen/logo.jpg);

background-position:left;

background-repeat:no-repeat;

margin-left:10px;

width:212px;

height:65px;

}


#layoutimage {

background-image:url(uploads/images/templates/horsegreen/horse_your-horse.jpg);

background-position:right;

background-repeat:no-repeat;

margin-left:10px;

width:493px;

height:241px;

}

.boxleft {

margin-left:10px;

}


#date {

float:right;

margin-right:20px;

font-size:12px;

color:#ffffff;

}


.tablenews {

width:209px;

background-position:right;

background-repeat:repeat-y;

color:#666666;

background-color:#ffffff;

}

.tablecontent {

width:483px;

align: center;

background-position:right;

background-repeat:repeat-y;

color:#666666;

background-color:#ffffff;

}

#menu {

width:189px;

margin-bottom:-5px;

margin-top:-5px;

color:#666666;

background-color:#ffffff;

}

#menu ul  {

list-style-image:url(uploads/images/templates/horsegreen/bullet1.jpg);

padding-left:5px;

background: #FFFFFF;

}

#menu a {

text-decoration:bold;

color:#666666;

background-color:#ffffff;

}

#menu a:hover {

text-decoration:none;

color:#ADBA5E;

background-color:#ffffff;


}

#contentbox {

float:right;

width:493px;

}

#content {

background-position:left;

background-repeat:repeat-y;

margin-bottom:-20px;

margin-top:-22px;

padding-left:20px;

padding-right:20px;

color:#666666;

background-color:#ffffff;

font-size:12px;

font-family:arial;

}


#footer {

text-align:center;

margin-top:2px;

margin-bottom:2px;

font-size:11px;

color:#ffffff;

}

#footer a {

text-decoration:none;

color:#ffffff;

background-color:#ADBA5E;

}

#footer a:hover {

text-decoration:none;

color:#666666;

background-color:#ADBA5E;

}


#pagetitle {

text-align:left;

padding-left:10px;

width:455px;

font-size:15px;

color:#ADBA5E;

}

.bulletmenu {

width:212px;

background-color:#ffffff;

}

td.announcement{

background-color:#ECECEC;

color:#ff9900;

padding-left:5px;

font-size:13px;

font-family:arial;

}


.NewsSummary {

width:100%;

margin-top:5px;

background:#ffffff;

}

/********NEWS CSS******************/

.NewsSummaryCategory {

  font-style: italic;

  margin: 5px 0;
  
 }



.NewsSummaryPostdate {

  font-size: 90%;

  font-weight: bold;
  
 }



.NewsSummarySummary {

}



#NewsPostDetailDate {

  font-size: 90%;

  font-style: italic;

  margin-bottom: 5px;
  
  }



#NewsPostDetailSummary {

   margin-bottom: 10px;

  line-height: 150%;
  
   }



#NewsPostDetailContent {

  margin-bottom: 15px;

  line-height: 150%;
  
  }


#NewsPostDetailReturnLink {

margin-bottom:20px;

}

Code: Select all

<head>
<title>{title}</title>
{stylesheet}
{metadata}
</head>

</__body>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
     <td><div align="left"><img src="uploads/images/templates/horsegreen/tlc.jpg" width="9" height="10" alt=""></div></td>
     <td><div id="topbackground"><img src="uploads/images/templates/horsegreen/top-bg.jpg" width="748" height="10"></div></td>
     <td><div align="left"><img src="uploads/images/templates/horsegreen/trc.jpg" width="9" height="10" alt=""></div></td>
     <td></td>
  </tr>
   <tr>
     <td background="uploads/images/templates/horsegreen/bg-left.jpg"> </td>
     <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
                <td height="8" bgcolor="#ffffff"></td>
        </tr>
</table>
<table width="100%"  border="0" cellpadding="6" cellspacing="0" bgcolor="#ADBA5E">
                          <tr>
                            <td align="right"><span id="date">{current_date format="%A %d-%b-%y %T "}</span></td>
                          </tr>
       </table>
	   <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
                <td height="8" bgcolor="#ffffff"></td>
        </tr>
</table>
	   
						<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <td><div id="main">
	<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
 <tr>
    <!-- TemplateBeginEditable name="Right" -->
	
    <td width="209" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
 
  <tr>
    <td valign="top"><div id="logo"></div>	</td>
     </tr>
  <tr>
    <td width="212" valign="top"><div class="boxleft">
      <div id="menu">
<br /><br /> {bulletmenu collapse="1"}
 </div>
</div></td>
  </tr>
  <tr>
  <td> </td>
  </tr>
    <tr>
  <td><div class="boxleft"><table width="100%" align="center" cellpadding="0" cellspacing="0">
 
   <tr>
  <td><table class="tablenews" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="uploads/images/templates/horsegreen/tlc1.jpg" width="5" height="5" alt=""></td>
    <td><div id="topbackground"><img src="uploads/images/templates/horsegreen/bg-top1.jpg" width="199" height="5"></div></td>
    <td><img src="uploads/images/templates/horsegreen/trc1.jpg" width="5" height="5" alt=""></td>
  </tr>
  <tr>
     <td background="uploads/images/templates/horsegreen/bg-left1.jpg"> </td>
    <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td height="22" class="announcement"><strong>Announcements</strong></td>
  </tr>
  <tr>
   <td height="10"></td>
  </tr>
  <tr>
    <td align="center" valign="top"><img src="uploads/images/templates/horsegreen/horse_1.jpg" width="173" height="69" alt=""></td>
  </tr> 
  <tr>
    <td>{cms_module module="news"}</td>
  </tr>
 
</table>
</td>
  </tr>
</table>
</td>
     <td background="uploads/images/templates/horsegreen/bg-right1.jpg"> </td>
  </tr>
 <tr>
    <td><img src="uploads/images/templates/horsegreen/blc1.jpg" width="5" height="5" alt=""></td>
    <td><div id="topbackground"><img src="uploads/images/templates/horsegreen/bg-bott2.jpg" width="199" height="5"></div></td>
    <td><img src="uploads/images/templates/horsegreen/brc1.jpg" width="5" height="5" alt=""></td>
  </tr>
</table><br />
</td>
  </tr>
</table></div></td>
  </tr>  
</table></td> 
    <!-- TemplateEndEditable --><td> </td>
	
    <td width="530" valign="top"><!-- TemplateBeginEditable name="Body" --><table width="100%" cellspacing="0" cellpadding="0">
  <tr>
       <td rowspan="2"><div id="layoutimage"></div></td>
  </tr>
</table>

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="left"></div></td>
    <td valign="top"><div id="contentbox">
<div align="left"><img src="uploads/images/templates/horsegreen/top2.gif" height="20" width="483" alt="" /></div>

</table>
<div class="boxleft"><table class="tablecontent" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="uploads/images/templates/horsegreen/tlc1.jpg" width="5" height="5" alt=""></td>
    <td><div id="topbackground"><img src="uploads/images/templates/horsegreen/bg-top1.jpg" width="483" height="5"></div></td>
    <td><img src="uploads/images/templates/horsegreen/trc1.jpg" width="5" height="5" alt=""></td>
  </tr>
  <tr>
     <td background="uploads/images/templates/horsegreen/bg-left1.jpg"> </td>
    <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td height="22" bgcolor="#ECECEC"><div id="pagetitle"><strong>{breadcrumbs}</strong></div></td>
  </tr>
   <tr>
    <td align="center" valign="top"><div id="content"> 
  <div align="left"><br />{content}</div>
</div><br /></td>
  </tr> 
  
</table>
</td>
  </tr>
</table>
</td>
     <td background="uploads/images/templates/horsegreen/bg-right1.jpg"> </td>
  </tr>
 <tr>
    <td><img src="uploads/images/templates/horsegreen/blc1.jpg" width="5" height="5" alt=""></td>
    <td><div id="topbackground"><img src="uploads/images/templates/horsegreen/bg-bott2.jpg" width="483" height="5"></div></td>
    <td><img src="uploads/images/templates/horsegreen/brc1.jpg" width="5" height="5" alt=""></td>
  </tr>
</table></div>
<div align="left"><img src="uploads/images/templates/horsegreen/bottom2.gif" height="20" width="483" alt="" /></div>
<!-- TemplateEndEditable --></td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
                <td><table width="100%" cellspacing="0" cellpadding="0">
                         <tr>
                        <td bgcolor="#ADBA5E"><div id="footer">
Designed & Powered by:<br/>
<a href="http://www.mangomediahouse.com" target="_blank">Mango Media House</a></div></td>
                      </tr>     
       </table></td>
        </tr>
</table>

</td>
  </tr>
</table>	 </td>
    <td> </td>
  </tr>
   <tr>
     <td><div align="left"><img src="uploads/images/templates/horsegreen/blc.jpg" width="9" height="10" alt=""></div></td>
     <td><div id="topbackground"><img src="uploads/images/templates/horsegreen/bg-bott.jpg" width="748" height="10"></div></td>
     <td><div align="left"><img src="uploads/images/templates/horsegreen/brc.jpg" width="9" height="10" alt=""></div></td>
     <td></td>
  </tr>
</table>
<__body>
</__html>
Palan,

I don't believe I ever copied and pasted the bulleted list into the cmsms wysiwyg text editor.

Tom
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Pesky gray vertical line in bulletmenu

Post by Dr.CSS »

You would be doing your self and disabled visitors a favor by using a non table layout...

The menu goes off to the left in Firefox...

The line in your CSS...


#menu {

width:183px;

background-image:url(uploads/images/templates/round/linie.gif);
Top
Locked

Return to “Layout and Design (CSS & HTML)”