Some help troubleshooting CSS menu

Discussion in 'Web Design and Development' started by Cabbit, Aug 2, 2009.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    http://development.abcomforts.com/

    My main navigation bar is 1px short on the right hand side on safari yet is the right size on firefox and i can't for the life of me find out why.

    HTML:
    body {
    	background-color: #ccbbfe;
    }
    #language-bar,
    #login-nav,
    #store-nav {
    	float: right;
    }
    
    #language-bar li,
    #login-nav li,
    #store-nav li {
    	float: left;
    	margin-right: 1em;
    	list-style: none;
    }
    #wrapper {
    	width: 1004px;
    	margin: 0 auto;
    }
    .crumbs {
    	float: left;
    	width: 100%;
    	padding: 0;
    	margin: 0;
    	overflow: hidden;
    }
    
    #inner-nav li {
    	margin-right: 5px;
    	float: left;
    	list-style: none;
    	display: inline;
    }
    
    input.default {
    	color: #999;
    }
    
    input.default:focus {
    	color: inherit;
    }
    
    p.help-text {
    	font-style: italic;
    	font-weight: normal;
    	margin-bottom: 0;
    	color: #999;
    }
    
    h1 {
    	font-weight: normal;
    	color: #222222;
    	font-size: 3em;
    	line-height: 1;
    	margin-bottom: 0.5em;
    }
    h1.logo {
    	float: left;
    	width: 50%;
    	font-weight: normal;
    	color: #222222;
    	font-size: 3em;
    	line-height: 1;
    	margin-bottom: 0.5em;
    }
    
    h1 img {
    	margin: 0;
    }
    
    h2 {
    	font-weight: normal;
    	color: #222222;
    	font-size: 1em;
    	margin-bottom: 0.75em;
    }
    h2.sub_logo {
    	display: block;
    	text-indent: 130px;
    	float: left;
    	font-weight: normal;
    	color: #000;
    	font-size: 1.4em;
    	margin-bottom: 0.75em;
    }
    
    h3 {
    	font-weight: normal;
    	color: #222222;
    	font-size: 1.5em;
    	line-height: 1;
    	margin-bottom: 1em;
    }
    
    h4 {
    	font-weight: normal;
    	color: #222222;
    	font-size: 1.2em;
    	line-height: 1.25;
    	margin-bottom: 1.25em;
    }
    
    h5 {
    	font-weight: normal;
    	color: #222222;
    	font-size: 1em;
    	font-weight: bold;
    	margin-bottom: 1.5em;
    }
    
    h6 {
    	font-weight: normal;
    	color: #222222;
    	font-size: 1em;
    	font-weight: bold;
    }
    
    
    
    p {
    	font-size: 1.2em;
    }
    
    #header,
    #footer {
    	padding: 1em 1em 0;
    	clear: both;
    }
    
    #content {
    	background: #ddd;
    	color: #111;
    	min-height: 400px;
    }
    h1.logo {
    	float: left;
    	margin: 10px;
    }
    
    h1.logo a {
    	background: url(images/basic/bg/logo.png) left center no-repeat;
    	padding-left: 120px;
    	display: block;
    	height: 50px;
    	text-decoration: none;
    	line-height: 50px;
    	color: #000;
    }
    
    #menu {
    	clear: both;
    	width: 978px;	
    	margin: 0 auto;
    	-webkit-border-top-left-radius: 5px;
    	-webkit-border-top-right-radius: 5px;
    	-moz-border-radius-topleft: 5px;
    	-moz-border-radius-topright: 5px;
    }
    
    #menu ul,
    #sub-menu ul {
    	padding: 0;
    	margin: 0;
    }
    
    #menu ul li,
    #sub-menu ul li {
    	float: left;
    	margin-right: 1em;
    	list-style: none;
    }
    
    #menu ul li,
    #sub-menu ul li {
    	margin-right: 0;
    	margin-bottom: -1px;
    }
    
    #menu ul li a,
    #sub-menu ul li a {
    	display: block;
    	padding: 10px 20px;
    	color: #fff;
    	text-decoration: none;
    	outline: none;
    }
    
    #menu ul li.selected a,
    #sub-menu ul li.selected a {
    	background-color: #89b8e7;
    }
    
    #menu ul li a:hover,
    #sub-menu ul li.selected a {
    	background-color: #89b8e7;
    	border-bottom: 1px solid #89b8e7;
    }
    
    #menu ul li.selected {
    	border-bottom: 1px solid #89b8e7;
    }
    
    #IE7 #menu {
    	height: 39px;
    }
    
    #menu {
    	background-color: #ffa1ff;
    	border-top: 1px solid #ccc;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px solid #ababab;
    }
    
    #menu ul {
    	margin-bottom: -1px;
    }
    
    #menu ul li:first-child {
    	
    }
    
    #menu ul li.selected {
    	background: #89b8e7;
    	border-left: 1px solid #ccc;
    	border-top: 1px solid #ccc;
    	border-right: 1px solid #ababab;	
    	height: 40px;
    	margin-top: -2px;
    }
    
    #sub-menu {
    	background: #89b8e7;
    	border-left: 1px solid #89b8e7;
    	border-right: 1px solid #89b8e7;
    	border-bottom: 1px solid #89b8e7;
    }
    
    #IE7 #sub-menu ul {
    	height: 26px;
    }
    
    #sub-menu ul li a {
    	padding: 3px 7px;
    	margin: 10px 5px;
    	color: #fff;
    	background: none;
    }
    
    #sub-menu ul li.selected a {
    	background: #fff;
    	color: #000;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    }
    
    #slide-content {
    	margin: 0 1em;
    	background-color: #cdf;
    }
    
    .toolbar {
    	float: right;
    	margin-bottom: 1em;
    }
    
    .toolbar ul.actions {
    	margin: 0;
    	padding: 0;
    	float: right;
    }
    
    .toolbar ul.actions li {
    	float: left;
    	margin-right: 1em;
    	list-style: none;
    }
    
    .toolbar ul.actions li {
    	margin-right: 0;
    }
    
    .toolbar.order-links a {
    	text-transform: capitalize;
    }
    
    .search-form {
    	display: none;
    	padding: 1em;
    }
    
    .search-form label {
    	display: block;
    }
    
    a.button {
    	background: transparent url(images/buttons/right_01.png) no-repeat scroll top right;
    	display: block;
    	float: left;
    	margin-right: 6px;
    	padding-right: 20px;
    	text-decoration: none;
    	color: #111 !important;
    	font-weight: bold;
    	outline: none;
    }
    
    a.button span {
    	background: transparent url(images/buttons/left_01.png) no-repeat;
    	display: block;
    	line-height: 22px;
    	padding: 7px 0 5px 14px;
    	text-shadow: #efefef 1px 1px 0px;
    }
    
    a.button img {
    	vertical-align: middle;
    	margin: 0 3px 0 0;
    }
    
    a.button.cancel span {
    	font-weight: normal;
    }
    
    a.button.small {
    	font-size: 1em;
    	background: transparent url(images/buttons/right_01_small.png) no-repeat scroll top right;
    	padding-right: 20px;
    }
    
    a.button.small span {
    	background: transparent url(images/buttons/left_01_small.png) no-repeat;
    	padding: 5px 0 3px 20px;
    	line-height: 21px;
    }
    
    .right {
    	float: right;
    	display: block;
    }
    
    button {
    	border: 0;
    	cursor: pointer;
    	font-weight: bold;
    	padding: 0 20px 0 0;
    	text-align: center;
    	background: url(images/basic/buttons/right_01.png) center right no-repeat;
    	font-size: 1.2em;
    	outline: none;
    }
    
    button span {
    	position: relative;
    	display: block;
    	white-space: nowrap;
    	padding: 0 0 0 20px;
    	height: 35px;
    	line-height: 35px;
    	background: url(images/basic/buttons/left_01.png) center left no-repeat;
    	text-shadow: #efefef 1px 1px 0px;
    }
    
    button span img {
    	vertical-align: middle;
    	margin: 0 3px 0 0;
    }
    
    button:focus {
    	outline: none;
    }
    
    button.tick {
    	background: none;
    	width: 24px;
    }
    
    input.title,
    textarea {
    	margin: 0;
    }
    
    #errorExplanation {
    	width: 100%;
    	border: 2px solid red;
    	padding: 7px;
    	padding-bottom: 12px;
    	margin-bottom: 20px;
    	background-color: #f0f0f0;
    }
    
    #errorExplanation h2 {
    	text-align: left;
    	padding: 5px 5px 5px 15px;
    	font-size: 1.4em;
    	margin: -7px;
    	background-color: #c00;
    	color: #fff;
    }
    
    #errorExplanation p {
    	color: #333;
    	margin-bottom: 0;
    	padding: 5px;
    }
    
    #errorExplanation ul li {
    	font-size: 1em;
    	list-style: square;
    }
    
    ul.checkbox-list {
    	list-style: none;
    }
    
    ul.checkbox-list li {
    	display: block;
    	float: left;
    	width: 200px;
    }
    
    ul.checkbox-list li label {
    	font-weight: normal !important;
    }
    
    #busy_indicator {
    	margin-bottom: 1em;
    }
    
    select#filter_state {
    	font-size: 1.5em;
    }
    
    h2.order-number {
    	margin-bottom: 0;
    }
    
    h4.order-status {
    	display: block;
    	font-weight: normal;
    }
    
    .adr {
    	float: left;
    	margin-right: 1em;
    	margin-bottom: 1em;
    	padding: 1em;
    	border: solid 1px #999;
    	-moz-border-radius: .5em;
    	-webkit-border-radius: .5em;
    	min-width: 200px;
    }
    
    .adr .fn {
    	font-weight: bold;
    }
    
    .adr h4 {
    	margin-bottom: 1em;
    	border-bottom: 1px solid #ccc;
    	padding-bottom: .5em;
    	color: #666;
    }
    
    ul.taxonomy-tree {
    	cursor: default;
    	list-style: none;
    	margin: 0;
    	padding: 0 0 0 35px;
    	min-height: 2em;
    }
    
    ul.taxonomy-tree li.taxon {
    	clear: both;
    	padding: 5px;
    }
    
    ul.taxonomy-tree li.taxon span,
    ul.taxonomy-tree li.taxon input {
    	float: left;
    	margin-right: 1em;
    }
    
    ul.taxonomy-tree li.taxon .name {
    	float: left;
    	cursor: move;
    }
    
    ul.taxonomy-tree li.taxon.new ul.taxonomy-actions,
    ul.taxonomy-tree li.taxon.editing ul.taxonomy-actions {
    	display: none;
    }
    
    ul.taxonomy-tree li.taxon.to-destroy {
    	color: #900;
    	text-decoration: line-through;
    }
    
    ul.taxonomy-tree li.taxon.to-destroy ul.taxonomy-actions {
    	display: none;
    }
    
    .placeholder {
    	height: 30px;
    	clear: both;
    	border: dashed 2px #ddd;
    }
    
    ul.taxonomy-actions {
    	float: left;
    	list-style: none;
    	margin: 0px 0px 10px 10px;
    	padding: 0;
    }
    
    ul.taxonomy-actions li {
    	float: left;
    	margin-right: 5px;
    }
    
    ul.taxonomy-actions li img {
    	vertical-align: text-top;
    }
    
    ul.taxonomy-actions li.disabled {
    	opacity: .5;
    }
    
    h3.warning {
    	background-image: url(images/basic/icons/fugue/exclamation.png);
    	background-position: 10px 15px;
    	background-repeat: no-repeat;
    	padding-left: 35px;
    }
    
    #searching {
    	clear: both;
    	margin-top: 2em;
    }
    
    .pagination {
    	padding-top: 10px;
    	text-align: right;
    }
    
    a.page, span.page {
    	padding: 0px 5px;
    	margin: 0 3px;
    }
    
    a.page {
    	text-decoration: none;
    	border: 1px solid #9aafe5;
    	color: #2e6ab1;
    }
    
    a.next_page {
    	font-weight: bold;
    }
    
    span.disabled_page {
    	border: 1px solid #929292;
    	color: #929292;
    }
    
    span.current_page {
    	font-weight: bold;
    	border: 1px solid navy;
    	background-color: #2e6ab1;
    	color: #FFF;
    }
    
    .flash {
    	-moz-border-radius: 0.4em;
    	-webkit-border-radius: 0.4em;
    }
    
    .flash.notice, .flash.errors {
    	font-size: 1.3em;
    	margin-bottom: 1em;
    	padding: 0.8em;
    }
    
    .flash.notice {
    	background-color: #e59494;
    	color: #000;
    	border: 1px solid #9ac;
    }
    
    .flash.errors {
    	color: #000;
    	background-color: #e59494;
    	border: 1px solid #000;
    }
    
    /* Posts */
    
    .post h2 {
    	color: #227edb;
    	font-size: 30px;
    	letter-spacing: -1px;
    	margin: 0;
    	padding: 10px 0px 0px 0px;
    }
    
    .post h2 a {
    	color: #227edb;
    	text-decoration: none;
    }
    .post h2 a:hover {
    	text-decoration: underline;
    }
    
    .comment {
    	padding: 1em;
    	margin: 0;
    	float: left;
    }
    
    .comment-odd {
    	background-color: #fffeee;
    	padding: 1em;
    	margin: 0;
    	float: left;
    }
    
    h2 {
    	color: #3c7dfb;
    }
    
    .comment h3 {
    	color: #666;
    	font-size: 1.6em;
    	letter-spacing: -1px;
    	margin: 0;
    	padding: 2px 0px 0px 0px;
    }
    
    .comment-odd h3 {
    	color: #666;
    	font-size: 1.6em;
    	letter-spacing: -1px;
    	margin: 0;
    	padding: 2px 0px 0px 0px;
    }
    
    .text {
    	float: left;
    	width: 495px;
    }
    
    .text a {
    	color: #227edb;
    	text-decoration: none;
    }
    
    .text p {
    	margin: 15px 0;
    	line-height: 22px;
    	color: #333;
    }
    
    .text ul, .text ol {
    	margin: 15px 0;
    }
    
    .text li {
    	margin: 5px 0;
    }
    
    .text blockquote {
    	font-style: italic;
    	background: url(images/quote.gif) top left no-repeat;
    	text-indent: 25px;
    }
    
    .info {
    	color: #666;
    	float: left;
    	width: 140px;
    	font-size: 11px;
    	padding: 20px 20px 0 0;
    }
    
    .info ul li {
    	margin: 0 0 10px 0;
    	list-style: none;
    }
    
    .info a {
    	color: #ff5d96;
    	text-decoration: none;
    }
    
    .more-link {
    	display: none;
    }
    
    /* Code and quote */
    
    .quote {
    	border-top: 1px inset;
    	border-left: 1px inset;
    	border-right: 1px inset;
    	border-bottom: 1px inset;
    	background: #eee url('/include/style/default/images/quote-left.gif') no-repeat left top;
    	min-width: 20em;
    	padding-top: 1px;
    	padding-left: 40px;
    	padding-bottom: 1px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: normal;
    	-webkit-border-top-left-radius: 0.2em;
    	-moz-border-radius-topleft: 0.2em;
    }
    
    .divider { 
    	clear: both; 
    	width: 275px; 
    	padding: 10px 0 0 0; 
    	margin: 10px 0; 
    	background-image: url(/images/divider.png) bottom repeat-x; 
    	height: 4px; 
    }
    
    
    .quote div {
    	background: transparent url(/include/style/default/images/quote-right.gif) right bottom no-repeat;
    	padding-top: 5px;
    	padding-bottom: 10px;
    }
    
    bbtoolbar {
    	margin: 0;
    }
    
    #container{
    	border-color: #ccc;
    	background-color: #fff;
    	border-width: 1px;
    	border-style: none solid solid solid;
    	margin: 0 0.9em;
    	text-align: left;
    	font-size: 1.2em;
    	cursor	default!important;
    }
    
    div.column{
    	float: left;
    	padding-left: 14px;
    	min-height: 350px;
    	position: relative;
    }
    
    div.panel, div.column{
    	width: 306px;
    }
    
    /* non section styles */
    
    img{
    	border: none;
    }
    .hidden{
    	display: none;
    }
    
    div.buttons input{
    	margin: 0 10px;
    	height: 24px;
    	color: #5D5D5D;
    	border: 1px solid #737373;
    	cursor: pointer;
    }
    
    div.buttons input.yes{
    	background-color: #f2f2f2;
    }
    
    div.buttons input.no{
    	background-color: #C4C0C0;
    }
    
    /* --------------------------------- sections -------------------------- */
    
    
    /* top form */
    
    div#top-form-controls{
    	background: #89b8e7;
    	height: 3.2em;
    	border-bottom: 1px solid #919191;	
    }
    
    div#top-form-controls a{
    	display: block;
    	padding: 4px 20px 4px 40px;
    	background-color: #ffa1ff;
    	margin: 8px 15px 0 15px;
    	border: 1px solid #ADAFB1;
    	color: #fff;
    	background-position: left;
    	background-repeat: no-repeat;
    	
    }
    
    div#top-form-controls a:hover{
    	background-color: #ffa1ff;
    }
    
    
    div#top-form-controls a#customize{
    	float: left;
    	background-image: url('../images/customize.jpg');	
    }
    
    div#top-form-controls a#reset{
    	float: right;
    	background-image: url('../images/reset.jpg');
    }
    
    #top-form{
    	border-bottom: 1px solid #999;
    }
    
    #top-form form{
    	background-color: #ccc;
    	margin: 0!important;
    	color: #fff;
    	padding: 20px 0;
    	display: none;
    }
    
    #top-form form h5{
    	font-size: 0.9em;
    	margin-left: 20px;
    }
    
    #top-form form div{
    	clear: left;
    	margin-bottom: 10px;
    }
    
    #top-form form ul{
    	margin: 10px 0;
    	
    }
    
    
    #top-form #choose-topics ul li{
    	list-style: none;
    	float: left;
    	width: 200px;
    	margin-left: 20px;
    	margin-bottom: 20px;
    	background-color: #737373;
    	padding: 5px 5px 8px 10px;
    }
    
    #top-form #choose-topics ul li.active{
    	background-color: #F8F8F8;
    	color: #5D5D5D;
    }
    
    #top-form #choose-topics label{
    	margin-left: 7px;
    	position: relative;
    	top: 1px;
    }
    
    #top-form #choose-colours ul{
    	margin-left: 10px;
    }
    
    #top-form #choose-colours ul li{
    	list-style: none;
    	float: left;
    	margin-left: 8px;
    }
    
    #top-form #choose-colours ul li div{
    		border: 2px solid #454547;
    		float: left;
    		margin-right: 2px;
    }
    
    #top-form #choose-colours ul li.active div{
    	border-color: #fff;
    }
    
    /* need to be positioned absolutely, not hidden, for IE */
    #top-form #choose-colours input{
    position: absolute;
    left: -1000px;
    top: 0;
    }
    
    #top-form #choose-colours label{
    	width: 44px;
    	height: 11px;
    	display: block;
    	border: 1px solid #fff;
    	cursor: pointer;
    }
    
    #top-form #choose-colours label span{
    	display: none;
    }
    
    #top-form div.buttons{
    	margin: 20px 0 0 0;
    	text-align: center;
    }
    
    #top-form form div.buttons input{
    	width: 80px;
    }	
    
    #features
    {
    	background-color: #ddd;
    	height: 200px;
    	position:relative;
    	display: block;
    	overflow: hidden;
    }
    
    #features{
    	color: #000;
    }
    
    #features .ui-tabs-panel {
    background-color: #fff;
    border:none;
    padding:0;
    height: 160px;
    padding: 0;
    }
    
    #features div.fragment-body{
    	float: left;
    	margin: 0.5em;
    }
    
    #features h5{
    	font-size: 1.1em;
    	margin: 20px 10px 0 0;
    }
    
    #features p{
    margin-top: 10px;
    }
    
    
    #fragment-1 a{
    	color: #629DD9;
    }
    
    #fragment-2 a{
    	color: #629DD9;
    }
    
    #fragment-3 a{
    	color: #629DD9;
    }
    
    #fragment-4 a{
    	color: #629DD9;
    }
    
    
    
    .ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a span {
    background: none;	
    }
    
    .ui-tabs-nav, .ui-tabs-nav li, .ui-tabs-nav li#sea-forts a{
    margin-left: 0px;
    padding-left: 0px;	
    }
    
    .ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a {
    width: 142px;
    margin: 3px 0 0 3px;
    height: 40px;
    top: 0;
    }
    
    .ui-tabs-nav li#home_tabs a{
    	background: #89b8e7;	
    }
    
    
    .ui-tabs-nav .ui-tabs-selected a{
    	height: 43px;
    	margin-top: 0;
    }
    
    /* panels */
    
    div.panel{
    	margin: 20px 0;
    	text-align: left;
    }
    
    div.panel h2{
    cursor: move;	
    }
    
    .collapsed div.panel-main{
    	display: none;
    }
    
    div.panel-top{
    	-webkit-border-top-left-radius: 0.1em;
    	-moz-border-radius-topleft: 0.3em;
    	-webkit-border-top-right-radius: 0.3em;
    	-moz-border-radius-topright: 0.3em;
    	background-color: #fff;
    	padding: 10px 5px;
    }
    
    div.panel-top h2{
    	margin-left: 20px;
    	font-size: 1.3em;
    }
    
    div.panel-top a.toggle-panel{
    	float: left;
    	position: relative;
    	top: 5px;
    }
    
    div.panel-top a.edit-panel{
    	float: right;
    	border: 1px solid #ccc;
    	padding: 3px 10px;
    }
    
    /* top image sections */
    
    
    a.active{
    	background-color: red;
    }
    
    .top-panel-links ul, .top-panel-links li{
    list-style: none;
    padding: 0;
    }
    
    .top-panel-links{
    position: relative;	
    height: 110px;
    background-color: #7C9C5F;
    margin: 0;
    }
    
    .top-panel-links li a{
    height: 32px;	
    border-bottom: 1px solid #999;
    }
    
    .top-panel-links li a.last-list{
    border: none;
    }
    
    .top-panel-links img{
    position: absolute;
    top: 0;
    left: 0;
    }
    
    .top-panel-links a{
    display: block;
    margin-left: 146px;
    color: #fff;
    padding: 2px 6px;
    }
    
    
    
    /* edit panel form */
    
    form.edit-panel-form{
    	background-color: #474749;
    	padding: 8px;
    	display: none;
    }
    
    form.edit-panel-form .feed-input{
    	color: #fff;
    	width: 140px;
    	display: block;
    	float: left;
    	margin: 3px 0;
    }
    
    form.edit-panel-form label{
    	margin-left: 4px;
    }
    
    form.edit-panel-form .buttons{
    	padding: 12px 3px 10px 3px;
    	clear: left;
    	text-align: right;
    }
    
    form.edit-panel-form .buttons div input{
    width: 60px;
    }
    
    
    /* feeds */
    
    div.feed-top{
    	background-color: #eee;
    	padding: 8px 2px;
    }
    
    div.feed-top h3{
    	margin: 0px;
    	text-transform: uppercase;
    	font-size: 1em;
    	padding-left: 16px;
    	color: #494949;	
    }
    
    div.feed-top a{
    	float: right;
    	margin-right: 5px;
    }
    
    .feed ul{
    	margin: 0;
    	background-color: #fff;
    	padding: 5px 10px 5px 30px;
    }
    
    .feed ul li{
    	padding: 5px 0;
    }
    
    
    
    
    /* reset form */
    
    #dialog-form{
    	display: none;
    }
    
    #dialog-form div.buttons{
    	text-align: right;
    }
    
    .blockUI{
    	border: 10px solid #A4A5A5!important;
    	background-color: #444445!important;
    	cursor: auto!important;
    	color: #fff!important;
    	text-align: left!important;
    }
    
    .blockUI h1{
    	padding:  10px;
    	margin-bottom: 10px;
    	border-bottom: 1px solid #A4A5A5;
    }
    
    .blockUI p{
    	margin: 0 10px;
    	font-size: 1em;
    }
    
    .blockUI form{
    margin: 30px;	
    }
    
    .blockUI form input{
    	width: 80px;
    }
    
    /* sortable */
    
    .ui-sortable-helper{
    	border: 3px solid #A4A5A5;
    	z-index: 20;
    	position: relative;
    }
    
    .placeholder{
    	border: 1px dashed #fff;
    	background-color: #BFBFBF;	
    }
    
    .placeholder{
    position: absolute;
    z-index: 1;
    }
    
    
    /* colour specfic styles */
    
    /* purple */
    
    .purple div#header{
    background-image: url('../images/purple.gif');
    }
    
    .purple div#header, .purple .top-panel-links a:hover, .purple .top-panel-links a.active{
    	background-color: #691E79;	
    }
    
    .purple .feed ul li a, .purple .panel-top h2, .purple .panel-top a, .purple .feed ul li{
    	color: #691E79;
    }
    
    .purple .top-panel-links{
    background-color: #A97AB3;
    }
    
    
    /* pink */
    
    .pink div#header{
    background-image: url('../images/pink.gif');
    }
    
    .pink div#header, .pink .top-panel-links a:hover, .pink .top-panel-links a.active{
    	background-color: #840259;	
    }
    
    .pink .feed ul li a, .pink .panel-top h2, .pink .panel-top a, .pink .feed ul li{
    	color: #840259;
    }
    
    .pink .top-panel-links{
    background-color: #B37196;
    }
    
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
    	overflow:hidden;
        visibility: hidden;
    }
    
    .clearfix {display: inline-block;}
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    
    
    
    
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Try this,
    Code:
    #menu ul li.selected {
    ...
     top: -1px; /* was -2px */
    }
    It's hard to see if it's working completely. The color scheme makes it hard to tell. The white on light blue and pink is very hard to read. You really should increase the contrast to make it more accessible. Here's a contrast checker.
     
  3. Joined:
    Jun 30, 2009
    #3
    Your CSS does not validate. Try using CSS 2.1 only, then try solving the problem again. Usually, when I find a bug in my CSS/HTML, I try validating, and then work on the problem again.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Most of those are from Yahoo (YUI) because of the IE hacks it uses (but are tested). The other ones are because she's using browser specific styles, which while they won't validate, are still valid.
     
  5. wheezy macrumors 65816

    wheezy

    Joined:
    Apr 7, 2005
    Location:
    Alpine, UT
    #5
    I was going to take a look, but your CSS is huge, 1200+ lines just for what you're displaying.

    Download CSS Edit and use it's handy XRay and Override tools to figure out what's going on. It updates your changes as you type them, no need to save, upload, refresh etc.

    CSS Edit Link
     
  6. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #6
    I managed to get it going i am planning to rewrite the css from scratch pretty soon once the design is finalised as there is a lot of redundant code.
    The colour scheme will of course be changed i just kinda typed in some random values.
     
  7. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #7
    Yip i got css edit.
     
  8. wheezy macrumors 65816

    wheezy

    Joined:
    Apr 7, 2005
    Location:
    Alpine, UT
    #8
    Eeexcellent. :) Good luck!
     

Share This Page