Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Some help troubleshooting CSS menu

Cabbit

Cabbit

macrumors 68020
Original poster
Jan 30, 2006
2,128
1
Scotland
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 */
 
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.
 
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.
 
Not Available said:
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.
Click to expand...

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.
 
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
 
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.
 
wheezy said:
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
Click to expand...

Yip i got css edit.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back