Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Question Make Whole <div> Box Clickable

    Hi guys, I'm doing a slight redesign to our website and wanted to know how I can make the links on our top nav bar clickable. Not just the text, but the whole div box itself, colored red. Notice on the left nav bar, the links are already like that; the whole div box is clickable. I did it by adding display: block; but I don't know where I need to add it to make the top nav bar buttons clickable. No javascript please, just straight CSS.

    http://www.unitedfleetparts.com/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello JAG,
    It's funny how things seem to go in cycles here on codingforums.com. I only just discovered this IE8 bug myself yesterday, if you look at your site in FF the display: block; works to make the entire .item-right-side clickable.

    The problem is the way IE8 treats absolutely positioned empty anchors. I guess it needs something in them?
    Your issue seems a little different... in IE8, the hover affect works on the div contained in the li but you don't get the link until you move to the anchor text.
    Have a look at this thread from yesterday and see if it helps you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Post

    Hey Excavator,

    I think you're on to something here about it needing something inside. I tried your suggestion about using

    display: block;
    background: url(fakeimage.jpg);

    but it did not work. What I'm looking for is when you hover over the red buttons in the top nav bar, it turns gold colored but it should also be clickable, not just the text. Right now, it's not working in both IE and FF.

    http://www.unitedfleetparts.com

    Here's my CSS:
    Code:
    body{
    	font:1em normal Verdana, Helvetica, Arial, sans-serif;
    	margin:0;
    	padding:12px 0 0 0;
    	font-size:12px;
    	color:#000000;
    	text-align:center;
    }
    
    td{ font-size:1em; }
    
    form{
    	display:inline;
    	margin:0;
    	padding:0;
    }
    
    h1{ font:bold 1.5em Helvetica, Verdana, Arial, sans-serif; }
    h2{ font:bold 1.3em Helvetica, Verdana, Arial, sans-serif; }
    h3{ font:bold 1.1em Helvetica, Verdana, Arial, sans-serif; }
    
    h2.header{
    	color:#333333;
    	padding:4px;
    	background-color:#cccccc;
    	color:#333333;
    	font-weight:bold;
    }
    
    a img{ border:0; }
    
    a:link			{ color: blue; text-decoration: none; } /* Original color: #333333. Original didn't have text-decoration: none. */
    a:visited		{ color: blue; text-decoration: none; } /* Original color: #000000. Original didn't have text-decoration: none. */
    a:active		{ color: red; text-decoration: underline; } /* Original color: #999999. */
    a:hover			{ color: red; text-decoration: underline; } /* Original color: #333333. */
    
    .clear			{ clear:both; font-size:0em; height:0em; }
    
    .floatright		{ float:right; }
    .floatleft		{ float:left; }
    
    .alignright		{ text-align:right; }
    .alignleft		{ text-align:left; }
    
    .aligncenter	{ text-align:center; }
    .margincenter	{ margin:0 auto; }
    
    .small			{ font-size:.9em; }
    .smaller		{ font-size:.8em; }
    .smallest		{ font-size:.7em; }
    .large			{ font-size:1.1em; }
    .larger			{ font-size:1.2em; }
    .largest		{ font-size:1.3em; }
    .bold			{ font-weight:bold; }
    .italic			{ font-style:italic; }
    .red			{ color:#dd0000; }
    .blue			{ color:#0000ff; }
    .grey			{ color:#999999; }
    .nowrap			{ white-space:normal; }
    
    .link-pipe		{ color:#999999; }
    
    .input_error{ border-color:#cc0000 #ff0000 #ff0000 #ff0000; }
    
    select{
    	border-width:1px;
    	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
    	padding:1px 2px;
    }
    
    .error-message{ 
    	padding:4px;
    	text-align:center;
    	width:60%;
    	margin:0 auto;
    	color:#dd0000;
    	font-weight:bold;
    }
    
    .LOGN .error-message,
    .AFCL .error-message,
    .ORDL .error-message{
    	margin:12px 24px;
    	width:auto;
    }
    
    .information-message{ 
    	padding:4px;
    	text-align:center;
    	width:60%;
    	margin:0 auto;
    	color:#0000dd;
    }
    
    .LOGN .information-message{
    	margin:12px 24px;
    	width:auto;
    }
    
    .textfield, select, textarea,
    #tax-fields .form_row input{
    	border-width:1px;
    	border-style:solid;
    	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
    	padding:1px 2px;
    	font:normal 1em Arial, Helvetica, Verdana, sans-serif;
    }
    
    .textfield, textarea{
    	width:160px;
    }
    
    .button{
    /*	border-width:1px;
    	border-style:solid;
    	border-color:#999999 #000000 #000000 #999999;
    */
    	background-color: red; /* Original color: #999999. */
    	color:#ffffff;
    	font-weight: bold;
    	font-size:.9em;
    /*	padding:1px 2px;
    */
    	margin:0;
    	cursor:pointer;
    }
    
    #site-container{
    	width: 1000px; /* Original width: 770px; */
    	margin:0 auto;
    	text-align:left;
    	border-collapse:collapse;
    }
    
    #bottom-wrap	{ clear:both; font-size:0em; height:0em; }
    
    /*** Top Navigation Bar ***/
    
    #navigation-bar{
    	line-height:24px;
    	padding:4px 4px 0 0;
    }
    
    #navigation-bar ul{ 
    	margin:0;
    	padding:0;		
    	float:right;
    	clear:both;
    	width:100%;
    }
    
    #navigation-bar li{
    	color: white;
    	list-style:none;
    	line-height:12px;
    	float:right;
    	text-align:center;
    	margin:0 2px;
    	font-weight:bold;
    }
    
    #navigation-bar li.navigation-item-on	{ background-color: darkred; } /* Original color: #999999. */
    #navigation-bar li.navigation-item-off	{ background-color: red; } /* Original color: #666666. */
    #navigation-bar li.navigation-item-off:hover	{ background-color: goldenrod; }
    
    /* tab padding */
    #navigation-bar li div div{ padding:5px 18px; }
    
    /* tab off side images */
    #navigation-bar li.navigation-item-off div.item-left-side	{ background:transparent url() no-repeat scroll left top; }
    #navigation-bar li.navigation-item-off div.item-right-side	{ background:transparent url() no-repeat scroll right top; }
    
    /* tab on side images */
    #navigation-bar li.navigation-item-on div.item-left-side	{ background:transparent url() no-repeat scroll left top; }
    #navigation-bar li.navigation-item-on div.item-right-side	{ background:transparent url() no-repeat scroll right top; }
    
    /* navigation bar links */
    #navigation-bar li a:link,
    #navigation-bar li a:visited,
    #navigation-bar li a:hover,
    #navigation-bar li a:active{ 
    	color: white;
    	text-decoration: none;
    }
    
    #nav-checkout		{}
    #nav-search			{}
    #nav-basket			{}
    #nav-account		{}
    #nav-all-products	{}
    #nav-storefront		{}
    
    /*** Left Navigation ***/
    
    #left-navigation{
    	width:20%;
    	border-right:1px solid #eeeeee;
    	padding:0 0 0 4px;
    	vertical-align:top;
    }
    
    /*** One Column Pages ***/
    .one-column #left-navigation{ display:none; }
    
    #category-tree{
    	padding:1px;
    	margin:0;
    }
    
    #category-tree-top-image{}
    #category-tree-bottom-image{}
    
    #category-tree a{
    	display:block;
    	text-decoration:none;
    	color:#ffffff;
    	font-weight:bold;
    }
    
    #category-tree div{
    	background-color: red; /* Original color: #666666. */
    	border-bottom:1px solid #ffffff;	
    }
    
    #category-tree div:hover {
    	background-color: goldenrod;
    }
    
    #category-tree .level-1 a{ padding:4px 6px 4px 12px; }
    #category-tree .level-2 a{ padding:4px 6px 4px 24px; }
    #category-tree .level-3 a{ padding:4px 6px 4px 36px; }
    #category-tree .level-4 a{ padding:4px 6px 4px 48px; }
    #category-tree .level-5 a{ padding:4px 6px 4px 60px; }
    #category-tree .level-6 a{ padding:4px 6px 4px 72px; }
    
    #category-tree div.active{ background-color: darkred; } /* Original color: #999999. */
    #category-tree-header{}
    
    #category-tree-footer{
    	padding:4px;
    	margin:10px 0;
    }
    
    /*** Right Navigation ***/
    
    #right-navigation{
    	width:20%;
    	border-left:1px solid #eeeeee;
    	padding: 0 4px 0 0;
    	vertical-align:top;
    }
    
    /*** Content ***/
    
    #content-container{
    	clear:both;
    	width:100%;
    	border-style:solid;
    	border-color: red; /* Original color: #666666. */
    	border-width:1px 0;
    	padding:0 0 12px 0;
    	margin:0;
    	/* ie6 min-height hack */
    	height:270px;
    	max-height:270px !important;
    }
    
    #main-content{
    	padding: 8px; /* Original padding:16px; */
    	vertical-align:top;
    }
    
    /*** Global Header/Footer ***/
    
    #global-header{}
    
    #logo{
    	clear:both;
    	margin:0 0 0 5px;
    }
    
    #logo a{
    	width:759px;
    	height:85px;
    	display:block;
    	background:transparent url( graphics/en-US/new/banner.jpg ) no-repeat scroll left top;
    	cursor:pointer;
    }
    
    #search{
    	float:right;
    	padding:4px 6px 4px 0;
    }
    
    #header-links{
    	float:right;
    	padding:4px 12px 0 0;
    	line-height:22px;
    	color:#000000;
    	text-align:right;
    }
    
    #global-footer{ margin:16px 0; }
    #footer-links{ text-align:right; }
    
    #footer-links ul{
    	font:.9em normal Verdana, Helvetica, Arial, sans-serif;
    	margin:8px 0;
    	padding:0;
    }
    
    
    #footer-links ul li{
    	list-style-type:none;
    	border-left:1px solid #999999;
    	padding:0 2px 0 6px;
    	margin:0;
    	text-align:center;
    	display:inline;
    }
    
    #footer-links ul li.first-child{ border:0; }
    #global-footer #footer-links #footer-sitemap-link{ display:none; }
    
    #miva-link{
    	font-size:.8em;
    	text-align:right;
    	margin:16px 0;
    }
    
    #miva-link a{ color:#999999; }
    
    #page-header{ clear:both; }
    #page-footer{ clear:both; }
    
    #maintenance{
    	color:#dd0000;
    	font-weight:bold;
    }
    
    /*** ACAD, ACED, AFAD, AFED, OCST ***/
    
    .logout-link{
    	margin:12px 0;
    	float:right;
    }
    
    #customer-fields label,
    #affiliate-fields label{
    	float:left;
    	width:150px;
    	white-space:nowrap;
    	text-align:right;
    	padding:2px 5px 3px 0;
    	clear:both;
    }
    
    #affiliate-commissions label,
    .OSEL .non-editable label{
    	float:left;
    	width:120px;
    	font-weight:bold;
    	text-align:right;
    	padding:0 6px 0 0;
    }
    
    #customer-fields input.textfield,
    #affiliate-fields input.textfield,
    #tax-fields input,
    #affiliate-commissions div.form_row div,
    .non-editable div.form_row div{
    	width:170px;
    	margin:0 0 4px 0;
    }
    
    #affiliate-commissions div.form_row div{ float:left; }
    
    #customer-fields select,
    #affiliate-fields select{
    	width:176px;
    	margin:0 0 4px 0;
    }
    
    #login-details,
    #affiliate-information{
    	margin:0 0 16px 0;
    }
    
    #affiliate-commissions .form_row{ margin:0 0 8px 0; }
    
    .AFAD #affiliate-fields{
    	width:50%;
    	margin:0 auto;
    }
    
    .AFED #affiliate-fields #affiliate-contact,
    .AFED #affiliate-fields #affiliate-commissions{
    	float:left;
    	width:50%;
    }
    
    #affiliate-commissions .affiliate-code{
    	width:230px !important;
    }
    
    #affiliate-commissions #affiliate-image{
    	width:236px !important;
    	overflow:auto;
    }
    
    #affiliate-terms{ margin-left:155px; }
    
    #affiliate-fields .form_row div.non-editable{
    	margin:0 0 8px 0;
    	padding:2px 0 0 0;
    }
    
    .save-button,
    .continue-button{
    	clear:both;
    	text-align:right;
    	padding:24px 0 0 0;
    }
    
    .required{ font-weight:bold; }
    
    h2.fields-heading{
    	background-color:#cccccc;
    	color:#333333;
    	margin:0 0 12px 0;
    	padding:4px 4px 4px 12px;
    }
    
    .address2-label{ margin:0 0 14px 0; }
    
    .controls{ 
    	font:normal .7em Verdana, Helvetica, Arial, sans-serif;
    	visibility:hidden;
    }
    
    #customer-fields .controls label{
    	float:none;
    }
    
    #ship-to,
    #bill-to{
    	width:50%;
    	float:left;
    }
    
    #ship-to h2 input.checkbox,
    #bill-to h2 input.checkbox{
    	margin:0 2px 0 12px;
    	padding:0;
    	width:13px;
    	height:13px;
    	overflow:hidden;
    }
    
    div.invalid input.textfield,
    div.invalid select,
    #tax-fields div.invalid input{
    	border-color:#cc0000 #ff0000 #ff0000 #ff0000;
    }
    
    div.invalid label{ color:#dd0000; }
    
    .warning-message{
    	padding:4px;
    	text-align:center;
    	width:60%;
    	margin:0 auto;
    	color:#dd0000;
    }
    
    #customer-fields.editable .form_row,
    #affiliate-fields.editable .form_row{
    	margin:0 0 6px 0;
    	text-align:left;
    }
    
    #customer-fields.non-editable .form_row{
    	margin:0 0 4px 0; 
    	text-align:left;
    }
    
    #customer-fields.non-editable label,
    #affiliate-fields.non-editable label{
    	margin:0 0 0 30px;
    	padding:0 4px 0 0;
    	font-weight:bold;
    	width:110px;
    	text-align:right;
    	float:left;
    	clear:both;
    	white-space:nowrap;
    }
    
    #customer-fields.non-editable .form_row div,
    #affiliate-fields.non-editable .form_row div{
    	float:left;
    }
    
    #update-record{
    	clear:both;
    	margin:24px 0 0 24px;
    }
    
    .tax-fields label{ font-weight:bold; }
    
    /*** LOGN, AFCL, ORDL, ORHL ***/
    
    .AFCL #main-content,
    .LOGN #main-content{
    	padding:28px 126px;
    }
    
    .ORHL #main-content{ padding:28px 126px 28px 116px; }
    
    .ORDL #main-content{ padding:28px 16px; }
    
    .AFCL .section,
    .LOGN .section{
    	float:left;
    	height:220px;
    	width:49%;
    }
    
    .ORDL .section{
    	float:left;
    	height:220px;
    	width:33%;
    }
    
    .ORHL .lookup-section{ 
    	float:left;
    	height:220px;
    	width:50%;
    }
    
    .ORHL .signin-section{
    	float:left;
    	height:220px;
    	width:48%;
    }
    
    .section h3,
    .lookup-section h3,
    .signin-section h3{
    	text-align:center;
    }
    
    .form_row{ margin:0 0 6px 0; }
    
    .LOGN label,
    .ORDL label,
    .AFCL label{
    	float:left;
    	clear:both;
    	width:80px;
    	text-align:right;
    	padding:3px 5px;
    }
    
    .ORHL label{ 
    	white-space:nowrap;
    	float:left;
    	clear:both;
    	width:90px;
    	text-align:right;
    	padding:3px 5px;
    }
    
    .grey-border-right{ border-right:1px solid #cccccc; }
    
    .logn-input{ width:120px; }
    
    #invalid-key{
    	width:23px;
    	float:left;
    	margin:0 4px 0 0;
    	border-width:1px;
    	border-style:solid;
    	border-color:#cc0000 #ff0000 #ff0000 #ff0000;
    }
    
    .sign-in-buttons{ 
    	text-align:center;
    	margin:12px 0 0 0;
    }
    
    .forgot-password{ 
    	font-size:.9em; 
    	text-align:center;
    	margin:12px 0 0 0;
    }
    
    /*** BASK, OCST, OPAY, OSEL ***/
    
    #basket-contents.non-editable,
    #basket-contents.editable,
    #order-contents table{
    	width:100%;
    	border-left:1px solid #ffffff;
    	border-top:1px solid #ffffff;
    }
    
    #basket-contents.non-editable table,
    #basket-contents.editable table,
    #order-contents table{
    	border-collapse:collapse;
    }
    
    #basket-contents.non-editable td,
    #basket-contents.editable td,
    #order-contents td{
    	background-color:#eeeeee;
    	border-bottom:1px solid #ffffff;
    	border-right:1px solid #ffffff;
    	vertical-align:top;
    	padding:6px;
    	font:normal 1em Arial;
    }
    
    #basket-contents table tr.basket-heading td,
    #basket-contents table tr.basket-heading td,
    #order-contents table tr.heading td{
    	background-color:#cccccc;
    	color:#333333;
    	font-weight:bold;
    	text-align:center;
    	font-size:1em;
    	white-space:nowrap;
    }
    
    #basket-contents .basket-qty-input{ width:34px; }
    
    #basket-contents .item-remove{
    	width:8%;
    	vertical-align:middle;
    }
    
    #basket-contents table .basket-heading td.item-name{
    	text-align:left;
    }
    
    #basket-contents.editable .item-quantity{
    	width:13%;
    	text-align:center;
    	white-space:nowrap;
    }
    
    #basket-contents.non-editable .item-quantity{
    	width:6%;
    	text-align:center;
    }
    
    #basket-contents .item-options .item-name{ padding-left:16px; }
    
    #basket-contents.non-editable .item-name{ width:59%; }
    #basket-contents.editable .item-name	{ width:66%; }
    
    #basket-contents td.item-name{ text-align:left; }
    
    #basket-contents .item-price{
    	width:10%;
    	text-align:right;
    	white-space:nowrap;
    }
    
    #basket-contents .item-total{
    	width:10%;
    	text-align:right;
    }
    
    #basket-contents .basket-charges .charge-description,
    #basket-contents .basket-charges .formatted-charge{
    	font-style:italic;
    	text-align:right;
    	white-space:nowrap;
    }
    
    
    #basket-contents #basket-totals .formatted-total,
    #basket-contents #basket-totals .total-prompt{
    	font-weight:bold;
    	text-align:right;
    }
    
    #basket-contents .item-options td{}
    
    .checkout .item-quantity	{ width:8% !important; }
    .checkout .item-name		{ width:64% !important; }
    
    #fields-key{ margin:16px 0; }
    
    .checkout-button{
    	margin:12px 0;
    	text-align:right;
    }
    
    #payment-fields input{
    	border-width:1px;
    	border-style:solid;
    	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
    	padding:1px 2px;
    	font:normal 1em Arial, Helvetica, Verdana, sans-serif;
    }
    
    #payment-fields label{
    	white-space:nowrap;
    	text-align:left;
    	padding:3px 5px 3px 0;
    	clear:both;
    	margin:2px 0 0 0;
    }
    
    #payment-fields td{
    	padding:0 0 6px 0;
    }
    
    #shipping-payment .form_row{ margin:10px 0 0 0; }
    
    #shipping-payment label{
    	float:left;
    	width:65px;
    	white-space:nowrap;
    	text-align:left;
    	padding:3px 5px 3px 0;
    	clear:both;
    	margin:2px 0 0 0; 
    }
    
    .OSEL .continue-button,
    .OPAY .continue-button{ 
    	margin:0 0 12px 0;
    }
    
    .OCST #basket-contents{ margin: 0 0 32px 0; }
    
    .OPAY .fields-key{ margin:0 0 16px 0; }
    #payment-fields .form_row{ margin:10px 0 0 0; }
    
    #customer-fields.non-editable{ margin:0 0 32px 0; }
    #basket-contents.non-editable{ margin:16px 0 32px 0; }
    
    /*** CTGY, SRCH, PLST, OUS1, OUSM ***/
    
    .categoy-listing,
    .all-products,
    .related-products,
    .search-results{
    	clear:both;
    }
    
    .product-item{
    	width:50%;
    	float:left;
    }
    
    .product-item .padding{
    	padding:12px;
    	margin:12px;
    	height: 230px; /* Original: height: 300px;. This affects the container box of the item. */
    	border:1px solid #cccccc;
    	overflow:hidden;
    }
    		
    .product-next-previous{ 
    	clear:both;
    	margin:12px 0; 
    }
    
    .CTGY .product-details,
    .PLST .product-details,
    .SRCH .product-details{
    	height: 190px; /* Original: height: 245px;. This affects the container box of the thumbnail and text description. */
    	overflow:hidden;
    }
    
    .product-item .product-thumbnail{ 
    	margin: 0;
    	margin:0 0 12px 0;
    	text-align:center;
    	min-height:100px; /* Original: min-height: 136px; */
    	height:auto !important;
    	height: 100px; /* Original: height: 136px; */
    }
    
    .product-item .product-thumbnail img{
    	max-width:100px; /* 136 */
    	max-height:100px; /* 136 */
    	height:auto !important;
    	height:100px; /* 136 */
    }
    
    .purchase-buttons{
    	text-align:center;
    	margin:16px 0 0 0;
    }
    
    .purchase-buttons input.button{
    	margin:0 2px;
    }
    
    .line-item td.item-buttons{
    	white-space:nowrap;
    }
    
    .line-item tr.header-row td{ font-weight:bold; }
    
    .thumbnail-not-available{
    	display:block;
    	width:110px;
    	height:110px;
    	background:transparent url() no-repeat scroll left top;
    	margin:0 auto;
    }
    
    .image-not-available{
    	display:block;
    	background:transparent url() no-repeat scroll left top;
    }
    
    .next-previous{ margin:12px 0 0 0; }
    
    .next-button	{ float:right; }
    .previous-button{ float:left; }
    
    .search-again{ margin:0 0 16px 0; }
    
    .OUS1 #main-content{
    	padding-left:225px;
    	padding-right:225px;
    }
    
    .upsale-heading{ text-align:center; }
    
    .OUS1 .product-thumbnail{
    	margin:12px 0; 
    	text-align:left;
    	height:116px;
    	min-height:116px;
    }
    
    .OUS1 .product-description		{ margin:16px 0 0 0; }
    .OUS1 .thumbnail-not-available	{ margin:16px auto; }
    
    .OUSM #main-content{ 
    	padding-left:160px;
    	padding-right:160px;
    }
    
    .upsale-batch{
    	width:100%;
    	padding:2px;
    }
    
    .upsale-batch .heading td	{ font-weight:bold; }
    
    .upsale-checkbox{ width:32px; }
    .upsale-name{ width:175px; }
    
    .OUS1 .purchase-buttons textarea{
    	text-align:center;
    	width:390px;
    	height:100px;
    }
    
    .OUSM .continue-button{ text-align:center; }
    
    .line-item table{ width:100%; }
    .line-item table tr.heading td{ font-weight:bold; }
    .line-item table td{ 
    	padding:2px;
    	vertical-align:top;
    }
    
    .line-item .item-code{ 
    	padding-left:2px;
    	padding-right:2px;
    }
    
    .line-item .item-price{
    	padding-left:2px;
    	padding-right:2px;
    }
    
    .line-item .item-name{ width:80%; }
    .line-item tr.alt_row{ background-color:#f4f4f4; }
    
    /*** PRODUCT DISPLAY ***/
    
    .product-details-1,
    .product-details-2{
    	width:50%;
    	float:left;
    }
    
    .product-image{ margin:0 auto 16px auto; }
    
    .product-image img{
    /*	width:305px; */
    	max-width: 400px; /* Original max-width: 280px; */
    }
    
    .product-quantity-input{
    	width:34px;
    	margin:0 4px;
    }
    
    .related-products{
    	clear:both;
    	margin:32px 0 16px 0;
    }
    
    .product-attributes{
    	margin:16px 0;
    	text-align:left;
    }
    
    .product-attributes td{
    	padding:4px 0;
    }
    
    .product-attributes td.prompt{
    	vertical-align:top;
    	text-align:right;
    	padding-right:4px;
    }
    
    .product-attributes td.field{
    	text-align:left;
    }
    
    /*** INVC ***/
    
    .INVC .order-id,
    .ORDS .order-id{
    	float:left;
    	font-weight:bold;
    }
    
    .INVC .order-date,
    .ORDS .order-date{
    	float:right;
    	text-align:right;
    }
    
    .INVC .order-date span,
    .ORDS .order-date span{
    	font-weight:bold; 
    }
    
    .INVC h3,
    .ORDS h3{ 
    	clear:both;
    	margin:16px 0 24px 0;
    }
    
    /*** PATR ***/
    
    .PATR .continue-button{
    	text-align:right;
    	margin:12px 0;
    }
    
    /*** SMAP ***/
    
    .SMAP h3{
    	
    }
    
    .SMAP .category{
    	width:33%;
    	text-align:left;
    	float:left;
    }
    
    .SMAP .category .padding{
    	padding:2px;
    }
    
    .SMAP .product{
    	width:33%;
    	text-align:left;
    	float:left;
    }
    
    .SMAP .product .padding{ padding:2px; }
    
    /*** ORDH, ORDS ***/
    
    #orderhistory-list table{ border-collapse:collapse; }
    
    #order-contents table{
    	width:100%;
    }
    
    #order-contents table td, 
    #orderhistory-list table td{ 
    	vertical-align:top;
    }
    
    #orderhistory-list .order-reorder		{ text-align:center; }
    #orderhistory-list .order-invoice		{  }
    #orderhistory-list .order-description	{ text-align:left; }
    #orderhistory-list .order-date			{  }
    #orderhistory-list .order-purchased		{ text-align:center; }
    #orderhistory-list .order-quantity		{ text-align:center; }
    #orderhistory-list .order-status		{ text-align:center; }
    #orderhistory-list .order-tracking		{ text-align:left; }
    #orderhistory-list .order-total			{ text-align:right; }
    #orderhistory-list .order-price			{ text-align:right; }
    #orderhistory-list .order-view			{ 
    	vertical-align:middle;
    	padding:0 8px;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning JAG,
    This is not a very elegant menu I think... There are a lot of extra nested divs that aren't doing anything right now other than making the menu way more complicated than it needs to be.

    This might work for you though, kind of a hack job really though -
    Code:
    /* 
    tab padding 
    #navigation-bar li div div{ padding:5px 18px; }
    */
    /* navigation bar links */
    #navigation-bar a {
    display: block;
    padding: 5px 18px;
    }
    #navigation-bar li a:link,
    #navigation-bar li a:visited,
    #navigation-bar li a:hover,
    #navigation-bar li a:active{ 
    	color: white;
    	text-decoration: none;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    JAG (02-11-2011)

  • #5
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts

    Thumbs up

    Brilliant Excavator, you really know your stuff.
    The key was that you noted out the padding declarations from above and brought them down to a new link class #navigation-bar a {}, then added the display: block as well. Very effective and efficient code.
    Thanks very much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •