CSS Nightmare

safeastinkywinky · 1 May 2006 at 16:48

I've been asked to sort a family members' website out and have found rather messy css styles to define menus etc... The whole site is coded in modular fashion using asp. There are blue boxed menu headings down the left hand side n white bold font which I need to unlink, only retaining links on the sub menus http://www.chasebuckingham.com/version5 (So the blue bits need to be unlinked and the white bits are fine down the left hand side).

This is the module used for the left menus

Code:

<ul id="navLeft">
	<li class = "productHTop"> :confused: <a href="#"><strong>Personal Protection</strong></a> :confused: </li>
	<li><a href="#">Term Assurance</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Term_Assurance">Guide</a></li>
			<li><a href="product.aspx?productID=1">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Family Income Benefit</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Family_Income_Benefit">Guide</a></li>
			<li><a href="product.aspx?productID=2">Quote</a></li>
		</ul>
	</li>
        <li><a href="#">Mortgage Protection</a>	
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Mortgage_Protection">Guide</a></li>
			<li><a href="product.aspx?productID=3">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Critical Illness</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Critical_Illness">Guide</a></li>
			<li><a href="product.aspx?productID=4">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Income Protection</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Income_Protection">Guide</a></li>
			<li><a href="product.aspx?productID=5">Quote</a></li>
		</ul>
	</li>
	<li class="productH"><a href="#"><strong>Business Protection</strong></a></li>
	<li><a href="#">Key Employee Protection</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Key_Employee_Protection">Guide</a></li>
			<li><a href="product.aspx?productID=6">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Loan Protection</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Loan_Protection">Guide</a></li>
			<li><a href="product.aspx?productID=7">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Shareholder Protection</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Shareholder_Protection">Guide</a></li>
			<li><a href="product.aspx?productID=8">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Group Policies for Employees</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Group_Policies_for_Employees">Guide</a></li>
			<li><a href="product.aspx?productID=9">Quote</a></li>
		</ul>
	</li>
	<li class="productH"><a href="#"><strong>Pensions</strong></a></li>
	<li><a href="#">Stakeholder</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Stakeholder_Pension">Guide</a></li>
			<li><a href="product.aspx?productID=10">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Personal</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Personal_Pension">Guide</a></li>
			<li><a href="product.aspx?productID=11">Quote</a></li>
		</ul>
	</li>
	<li class="productH"><a href="#"><strong>Savings and Investments</strong></a></li>
	<li><a href="#">ISAs</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_ISAs">Guide</a></li>
			<li><a href="product.aspx?productID=12">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Bonds</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Bonds">Guide</a></li>
			<li><a href="product.aspx?productID=13">Quote</a></li>
		</ul>
	</li>
	<li><a href="#">Tax-free Savings Plans</a>
		<ul>
			<li><a href="default.aspx?section=products&page=Guide_to_Tax-free_Savings_Plans">Guide</a></li>
			<li><a href="product.aspx?productID=14">Quote</a></li>
		</ul>
	</li>
</ul>

and this is the style sheet:

Code:

body {
    margin:0px;
    padding:0px;
    color:#000;
    text-align:center;
    background-color: rgb(17, 51, 85);
    background-image: url(../i/bg_pg_blue.gif);
    background-repeat: repeat;
    background-attachment: scroll;
    font-family: Arial,Verdana,Sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: small;
    line-height: 1.6em;
} 

#body
{
    background:#fff;
    width:700px;
    border-left:solid 1px #765;	
    border-bottom:solid 1px #765;	
    border-right:solid 1px #765;	
    text-align:left;
}

html > body {
    font-size:small;
}

#title {
    float:left;
    width:100%;
    background: url("../i/bg.gif") repeat-x bottom;
/*	background-repeat:no-repeat;
    background-image: url(http://www.chasebuckingham.com/version4/img/banner.gif);*/
}

#navTop 
{
    float:left;
    width:670px;
    font-size:small;
    line-height:normal;
    background:url("../i/logo.gif") no-repeat right center;
}

#sitename {
    display:block;
    float:left;
    width:600px;
    height:60px;
    padding-left:10px;
    padding-top:10px;
    line-height:normal;
    font:xx-large/1.5em Georgia,Serif;
    color:#0066cc;
/*    color:#fff;*/
}

#header {
/*    background:url("../i/bg.gif") repeat-x bottom;
    font-size:small;
    line-height:normal;
*/    font:small/1.5em Georgia,Serif;
}

#header ul {
    margin:0;
    padding: 10px 10px 0;
    list-style:none;
}

#header li {
    float:left;
    background:url("../i/left_both.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    border-bottom:1px solid #765;
}

#header a {
    float:left;
    display:block;
/*    width:.1em;*/
    background:url("../i/right_both.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:normal ;
    color:#0066cc;
}

#header > ul a {
    width:auto;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {
    float:none;
}
/* End IE5-Mac hack */

#header a:hover {
    color:#333;
}

#home #nav-home, #news #nav-news, #products #nav-products, #about #nav-about, #contact #nav-contact, #privacy #nav-privacy {
    background-position:0 -150px;
    border-width:0;
}

#home #nav-home a, #news #nav-news a, #products #nav-products a, #about #nav-about a, #contact #nav-contact a, #privacy #nav-privacy a {
    background-position:100% -150px;
    padding-bottom:5px;
    color:#333;
}

#header li:hover, #header li:hover a {
    background-position:0% -150px;
    color:#333;
}

#header li:hover a {
    background-position:100% -150px;
}

#breadcrumb {
    font-size:small;
    line-height:normal;
    border-bottom: solid 3px #765;
    padding: 7px 0 5px 10px ;
    width: auto;
}

 :confused: 
#productNav 
{
        margin: 20px 0px 5px 5px;
	font: normal 11px verdana;
	display:block;
	float:left;
	border-top: 1px solid #765;
}

#productNav ul 
{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #765;
}

#productNav ul li 
{
	position: relative;
}
	
#productNav li ul 
{
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
}

/* Styles for Menu Items */
#productNav ul li a
{
	display: block;
	text-decoration: none;
	color: #0066cc;
	background: #fff;
	padding: 5px;
	border:  1px solid #765;
	border-bottom: 0;
        padding-left:20px;
}

/* Fix IE. Hide from IE Mac \*/
* html #productNav ul li { float: left; height: 1%; }
* html #productNav ul li a { height: 1%; }
/* End */

#productNav ul li a:hover { color: #fff; background: #0066cc; } /* Hover Styles */
		
#productNav li ul li a a:hover {color: #fff background: #f9f9f9; padding: 2px 5px; } /* Sub Menu Styles */
		
#productNav li:hover ul, #productNav li.over ul { display: block; } /* The magic */

#productNav .productH /*a:hover,*/ a
{
        padding: 5px;
	border:  1px solid #765;
	border-bottom: 0;
        padding-left:20px;	
        background: #0066cc;
        color: #FFF;
       
       /* font: small Georgia,Serif;
	color: #0066cc;*/
}

#productNav .productHT
{
    padding: 5px;
	border:  1px solid #765;
	border-bottom: 0;
        padding-left:20px;	
        background: #0066cc;
        color: #FFF;
/*
background: #dcf6ff;
    font:small Georgia,Serif;
	color: #000000;/*#0066cc;*/
padding-left:5px;*/
}

#productNav .productHTop /*a:hover,*/ a
{
	
        padding: 5px;
	border:  1px solid #765;
	border-bottom: 0;
        padding-left:20px;	
        background: #0066cc;
        color: #FFF;


        /*background: #dcf6ff;
        font: small Georgia,Serif;
	color: #000000;/*#0066cc;*/
	border-top:0;*/
}

#productNav .productHTTop
{
	
        padding: 5px;
	border:  1px solid #765;
	border-bottom: 0;
        padding-left:20px;	
        background: #0066cc;
        color: #FFF;

       /* background: #dcf6ff;
        font:small Georgia,Serif;
	color: #000000;/*#0066cc;*/
	border-top:0;
        padding-left:5px;*/
}
 :confused: 
#content
{
    float:left ;
    display:block;
    width:520px;
    padding:5px 5px 5px 10px;
}

#content h1
{
    font: x-Large Georgia;
	color: #0066cc;
    padding-top:16px;
}

#content h2
{
    font: x-Large Georgia;
	color: #cc0000;
}

#content h3
{
    font: x-Large Georgia;
	color: #999;
    line-height: .5;	
}

#content h4
{
    font: Large Georgia;
	color: #0066cc;
    line-height: 1;	
}

#content h5
{
    font: Large Georgia;
	color: #0066cc;
    line-height: 1;	
    padding-top:19px;
}

#content p
{
    text-align:justify;
}

#content .pIdent
{
    text-indent:2em;
    margin-top:-1em;
}

#sitebody
{
	padding: 0;
	margin: 0;
	border: 0;
	text-align: left;
	color: #444;
	background: transparent;
	clear: both;
width:700px;
	}

#footer {
    border-top:solid 3px #765;	
    margin-top:8px;
	color: #000;
    background-color: #ffffff;/*rgb(17, 51, 85);*/
/*    background-image: url(../i/bg_cnav_blue.gif);*/
    background-repeat: repeat-x;
    background-attachment: scroll;
	padding:  6px  0 6px 8px;
	text-align: left;
	clear: both;
	font-size: xx-small;
	voice-family: "\"}\""; 
	voice-family:inherit;
	font-size: x-small;	
	}

html>#footer	{
	font-size: x-small;
	} 

#footer p	{
	margin: 10px 0;
	padding: 0;
    line-height:.5;
    color: #000;/*rgb(68, 119, 153);*/
    text-align: center;
	}

#footer ul	{
	margin: 10px 0 0 0;
	padding: 0;
	}

#footer li	{
	display: inline;
	margin: 0;
	padding: 0 15px 0 0;
	text-align: left;
	border: 0;
	}	
	
.story
{
    border:solid 1px #ccc;
    display:block;
    float:none;
    width:500px;
    margin-bottom: 10px;
    background-color:#dcf6ff ;
    padding:5px;
}

#picA, #picB, #picC, #picD
{
    width:70px;
    height:70px;
    float:left;
    margin-right: 10px;
}

#picA
{
    background:url("../i/picA.jpg") no-repeat right top;
}

#picB
{
    background:url("../i/picB.jpg") no-repeat right top;
}

#picC
{
    background:url("../i/picC.jpg") no-repeat right top;
}

#picD
{
    background:url("../i/picD.jpg") no-repeat right top;
}

.storyText
{
    float:left;
}

.storyHeading
{
    font: Large Georgia;
/*	color: #0066cc;*/
	color: #000000;
    line-height: 1;	
}

.story p
{
    line-height:normal;
}

#contactDetails li
{
    list-style:none;
}

.priceCompany
{
    width:200px;
    float:left;
    padding-left:2px;
}
    
.priceAmount
{
    width:100px;
    float:left;
    font: courier;
    text-align:right;
    padding-right:2px;
}

.priceCompanyAlt
{
    width:200px;
    float:left;
    background-color:#f9f9f9;
    padding-left:2px;
}
    
.priceAmountAlt
{
    width:100px;
    float:left;
    font: courier;
    text-align:right;
    background-color:#f9f9f9;
    padding-right:2px;
}

.priceCompanyCB
{
    width:200px;
    float:left;
    padding-left:2px;
}
    
.priceAmountCB
{
    width:100px;
    float:left;
    font: courier;
    text-align:right;
    padding-right:2px;
}

#priceComparison
{
    text-align:center;
    width:auto;
}

.priceTable
{
    border:solid 1px #ccc;
    display:block;
    float:none;
    width:300px;
    margin-bottom: 10px;
    background-color:#dcf6ff ;
    padding:5px;
    text-align:left;
}

.priceTotal
{
    border:solid 1px #ccc;
    display:block;
    float:none;
    width:300px;
    margin-bottom: 10px;
    background-color:#ff9999 ;
    padding:5px;
    font-size:large;
    text-align:left;
}


#contentProduct
{
    float:left ;
    display:block;
    width:670px;
    padding:5px 5px  5px 10px;
}

#contentProduct h1
{
    font: x-Large Georgia;
	color: #0066cc;
}

#contentProduct h2
{
    font: x-Large Georgia;
	color: #cc0000;
}

#contentProduct h3
{
    font: x-Large Georgia;
	color: #999;
    line-height: .5;	
}

#contentProduct h4
{
    font: Large Georgia;
	color: #0066cc;
    line-height: 1;	
}

#contentProduct p
{
    text-align:justify;
}

#contentProduct .pIdent
{
    text-indent:2em;
    margin-top:-1em;
}

#terms
{
    overflow:auto;
    display:block;
    width:535px;
    padding:5px 5px  5px 10px;
    border:1px solid #ccc;
    height:200px;
}

.productSection
{
    border:solid 1px #ccc;
    display:block;
    float:none;
    width:650px;
    margin-bottom: 10px;
    background-color:#dcf6ff ;
    padding:5px;
}

.fieldLabel
{
    width:100px;
    font:courier;
    background-color:#ccc ;
    padding:5px;
    float:left;
    display:block;
}

.fieldValue
{
    width:150px;
    font:courier;
    background-color:#ccc ;
    padding:5px;
    float:left;
    display:block;
}

.fieldLine
{
    width:650px;
    display:block;
    background-color:#dcf6ff ;
    padding:5px;
}

.contactList {
    list-style:none;
}

So I tried getting rid of the <a href="#"></a> attributes and calling the relevent div classes from the css style sheet so that the text is boxed and coloured in the same manor as the linked sub-menus. But whatever I try totally screws everything up. I've made numerous other fixes to this site but this seemingly easy one is eluding me. Oh yeah and the whole site is screwed up in firefox and I've only ever used php for scripting before, so not sure whether it's the asp or poor html that's making it look so shabby. Please help!!!

blade007 · 1 May 2006 at 21:42

I hope you get it sorted.

but that looks like a commercial site, and I know from experience that you'll be lucky if some soul helps you out here.

hope you are lucky, though...

safeastinkywinky · 2 May 2006 at 02:59

Touché! Thanks blade, I wondered why no one helped me! I've found oc really useful before and hopefully helped others along the way. Yeah it is a commerical site- but I've got no commercial interest in it, just as I said helping a relative who's web developer left them in the lurch. I hope next time I get asked to do something it's for non-commercial needs of others and if I get stuck then maybe someone will help me!!!

Fx-Overlord · 2 May 2006 at 09:37

These are the tags which control the styling of the headers in the menu:

#productNav .productH /*a:hover,*/ a
#productNav .productHTop /*a:hover,*/ a

It should just be a matter of deleted the a tag in the html and the css. You'll have to be wary of any rules that overide this new changed selector further down in the CSS though.

But the css sheet isn't nice too look at. Too many commented out rules and no use of shorthand :/

safeastinkywinky · 2 May 2006 at 14:26

Thank's a lot mate. Yeah, tell me about it- wish I'd never volunteered to help out. I'm used to high level programming and annotate everything and refactor- even in CSS!