Feedback, My Response & Some CSS Techniques

After quite a few bits of criticism from my viewers about the ÒChristmasÓ theme that I had applied to my site, I have decided to:

  • Keep the Christmas theme as the default until after Christmas, frankly because it’s my site and I want to be obnoxiously Christmas-like.
  • Add a style switcher so that you can go back to the Blue theme that most people missed. And yes, humbug right back to you!
  • Add a fixed width theme based on the Christmas layout and the Original colors scheme.

You can switch the styles from the section titled Ã’Select A ThemeÓ off to the side of the main content. Also those of you that use FIrefox (numbers are way up!) you can access a Ã’LiteÓ theme (ala Douglas Bowman’s Bleached theme).

In the midst of redisigning the style sheets, I cam across a unique display error that only seemed to effect Safari.
(Note: I did not test it in IE or Opera, only Safari and Mozilla (Firefox).)

The Problem:
The navigational menu at the top of the page is a styled unordered list and should be displayed horizontally with each element next to (not top to bottom) of another across the bottom of the ÒdivÓ element. This was not working as I intended. Safari would either place the elements stacked vertically or horizontally across the top of the container ÒdivÓ element.

Dustin Orchard seemed to have a little to say about unique positioning issues using CSS involving ul elements.

The Solution:
It seems that when a container element is use to absolutely position another styled element on the page Safari requires the parent container to have a width specified to prevent it from vertically stacking the elements (a problem if that is not the intended effect).

Here is the CSS in question: (note: the attribute in question is deeply indented.)
Also I have benevolently allowed directory viewing in my CSS Directory. Enjoy!

#header {
	position:fixed !important;
	position: absolute; /* this is because IE cannot handle fixed positioning*/
	background:#800001 url('/PIX/happy_holidays.gif') 50px 5px fixed no-repeat;
	width:100%;
	border-bottom:1px solid #000;
	height:75px;
	z-index:1;
	}
#header .sitenav {
			width:50%;

	background:#800001;
	position: absolute;
	bottom:0px; right:50px; top:auto;
	margin:0;
	}
#header .sitenav ul {
	margin:0;
	padding:0;
	text-transform:none;
	white-space:nowrap;
	}
#header .sitenav ul li {
	margin:0;
	padding:0;
	list-style:none;
	background-image:none;
	line-height:normal;
	}
#header .sitenav ul li a {
	background:none;
	display:block;
	float:right;
	height:auto;
	border:1px solid #00CC00;
	border-width:1px 0 0 1px;
	margin:0;
	padding:2px 16px;
	text-decoration:none;
	font-weight:normal;
	color: #FFF;
	white-space:nowrap;
	}
	#header .sitenav #home { border-right:1px solid #00CC00;}
#header .sitenav ul a:hover { background:#ccc; color:#000;}
	#header .sitenav ul a:hover span { color:#fff;}


I hope this helps some one out.