Chrome and CSS Styles in page or off page different results

[gwmbox]

I am going around in circles trying to solve this one...

I have a base template with a small js settings some specific styles and then I have the overall style sheet for the rest of the styles.

It seems to work fine in FF and IE8 (I have yet to test in older versions) but for the life of me I cannot get it to work correctly in Chrome unless I embed the styles in the actual page rather than a link to it in the header.

If I link to it in the header the styling is wrong, if I put the styles in the page itself it works fine? Why is that? - please help.

Here is two images to highlight what I mean.

This is when the css is embedded


This is when the css is linked


Ok all the code, there is one zip attachment that contains 3 files;

css-help-linked-css.html <-- The html file with the style sheet linked in the header
theme.css <-- the style sheet

and

css-help-embedded-css.html <-- the same as above but with the styles embedded into the head of the html document.

The CSS

	/* Site Styles Reset/Refresh */
	* {font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;}
	html {height:100%;margin-bottom:1px;}
	body {font-size:1em;color:#333;background-color:#e8e8e8;}

	/* Basic Elements */
	h1,h2,h3,h4 {font-weight:bold;margin:10px 0;}
	h1 {font-size:180%;}
	h2 {font-size:150%;}
	h3 {font-size:130%;}
	h4 {font-size:110%;}
	ul {margin:1em;}
	p {margin-top:10px;margin-bottom:10px;}
	table {border-spacing:0;}
	pre {background:#F3F3F3;border-top:3px solid #DCDCDC;border-bottom:3px solid #DCDCDC;padding:10px;font-family:monospace;}
	a {text-decoration:none;color:#0068cc;}
	a:hover {text-decoration:underline;color:red;}
	a.nounderline:hover {text-decoration:none;}
	a img {border:0;}
	.bold {font-weight:bold; }
	.highlight {background-color:yellow;}
	.clear, .clr {clear:both;height:0px;font-size:0px;line-height:0px;}
	.clear-left {clear:left;}
	.clear-right {clear:right;}
	.center {text-align:center;}
	.right {float:right;}
	.left {float:left;}
	.hide {display:none;}
	.padding {margin:0 10px;}
	.underline {text-decoration:underline;}
	.small {font-size:0.8em;}
	.smaller {font-size:0.65em;}
	.pad5 {padding:5px;}
	.pad10 {padding:10px;}
	.pad15 {padding:15px;}
	.pad20 {padding:20px;}

	/* Basic Colours */
	.blue {color:blue;}
	.red {color:red;}
	.green {color:green;}
	.pink {color:#ff1493;}
	.purple {color:purple;}
	.grey {color:gray;}
	.black {color:black;}
	.white {color:white;}
	.yellow {color:yellow;}
	.orange {color:orange;}

	/* Site Wrapper */
	#wrapper {margin:0 auto;text-align:center;width:990px;background:transparent url(images/background.png) repeat-y; }
	#container {margin:0 9px;}

	/* Header */
	#header {display:block;height:60px;text-align:left;}

	/* Title */
	#title {display;block;float:left;width:250px;text-align:center;}
	#title h1, #title h2 {margin:0;}
	#title h1 {font-size:2.0em;margin-top:8px;}
	#title h2 {font-size:1.2em;}
	#title h1 a {color:#77AF4C;}
	#title h2 a {color:#235C95;}
	#title a:hover {text-decoration:none;}
	
	/* Header-Right-Side */
	#header-r {float:right;}
	
	/* Main Menu */
	#menu ul {padding:0;margin:0;list-style-type:none;}
	#menu li {list-style:none;display:inline;}
	#menu a, #menu a:visited {float:left;padding-left:8px;height:33px;position:relative;background: url(images/menu-tab-l.png) 0 0 no-repeat; margin-right:2px;}
	#menu a span, #menu a:visited span {float:left;display:block;height:33px;padding:0 14px 0 6px;line-height:32px;color:#333;background: url(images/menu-tab-r.png) 100% 0 no-repeat;}
	#menu a:hover{color:#000;text-decoration:none;background: url(images/menu-tab-l.png) 0 100% no-repeat}
	#menu a:hover span{color:#000;text-decoration: none;background: url(images/menu-tab-r.png) 100% 100% no-repeat;}
	#menu :hover > a, {color:#000;text-decoration: none;}

	/* Site Stats and Search */
	#stats {width:268px;float:left;font-size:0.8em;line-height:22px;}
	#search {width:432px;height:42px;background: transparent url(images/search-tab.png) no-repeat;float:right;line-height:40px;padding-right:2px;}
	#searchbox {height:44px;}	
	#search input {border:1px solid #ccc;margin-left:15px;padding:2px;font-size:0.9em;}

	/* Pathway/Breadcrumbs */
	#pathway {clear:both;display:block;height:26px;text-align:left;border-top:1px solid #b3b3b3;border-bottom:1px solid #b3b3b3;font-size:0.8em;}
   
	/* Messages */
   #messages {clear:both;display:block;text-align:left;}

	/* Content Area */
	#contentarea {clear:both;display:block;text-align:left;font-size:0.9em;}
	#content {margin-right:245px;float:left;display:block;width:720px;}

	/* Content-Left Body */
	#body {display:block;}
	#body img {margin:0;padding:0 3px;vertical-align:middle;}
	#body h2 {border:0;}
	
	/* Columns and Items */
	#columns ul {width:760px;background:transparent url(images/posts-back.png) repeat 0 0;margin:0;padding:0;font-size:0.8em;color:#333;}
	#columns ul li {list-style:none;}
	#columns ul li:hover {background-color:#f0e68c;}
	#columns ul li a.postlink {color:#333;text-decoration:none;}
	#columns ul li .post-detail {color:#333;}
	#columns ul li .post-cat a {padding-left:12px;}
	#columns ul li .post-date {}
	#columns ul li .post-price {font-weight:bold;}
	#columns ul li .post-price-free {color:#77AF4C;font-weight:bold;}
	#columns ul li .post-place {}
	#columns ul li .post-title {text-transform:uppercase;font-weight:bold;}
	#columns ul li .post-desc {}
	#columns ul li .post-phone {}
	#columns ul li .post-img {}

	/* Advert Photos */
	#items .picture {position:relative;z-index:0;}
	#items .picture:hover {background-color:transparent;z-index:50;}
	#items .picture a {text-decoration:none;}
	#items .picture span {position:absolute;background-color:#FFF;padding:5px;left:-2000px;border:1px solid #b3b3b3;visibility:hidden;color:black;text-decoration:none;font-size:0.8em;cursor:default;}
	#items .picture span img {border-width:0;padding: 2px;}
	#items .picture:hover span {visibility:visible;top:8;left:8px;}

	/* Advert Listings Pagination */
	#content .pagination {margin:15px 0;}
	#content .pagination .palignright {float:right;}
	#content .pagination .palignleft {float:left;}
	#content .pagenav a, #content .pagenav a:link {padding:2px 4px 2px 4px;margin:2px;text-decoration:none;border:1px solid #ddd;color:#034492;background-color:transparent;}
	#content .pagenav a:visited {padding:2px 4px 2px 4px;margin:2px;text-decoration:none;border:1px solid #ddd;color:#034492;background-color:transparent;}
	#content .pagenav a:hover {border:1px solid #333;color:#333;background-color:transparent;}
	#content .pagenav a:active {padding:2px 4px 2px 4px;margin:2px;text-decoration:none;border:1px solid #ddd;color:#034492;background-color: transparent;}
	#content .pagenav span.pages {padding:2px 4px 2px 4px;margin:2px 2px 2px 0px;color:#333;border:1px solid #ddd;background-color:#F3F6F2;}
	#content .pagenav span.current {padding:2px 4px 2px 4px;margin:2px;font-weight:bold;border:1px solid #ddd;color:#333;background-color: #F3F6F2;}
	#content .pagenav span.extend {padding:2px 4px 2px 4px;margin:2px;border:1px solid #333;color:#333;background-color:transparent;}

	/* Site Sidebar */
	#sidebar {float:left;width:245px;margin-left:-245px;}
	#sidebar h4 {color:#444;font-size:1.0em;font-weight:normal;margin:0px 0px 10px 0px;padding:0px 0px 5px 0px;border-bottom:1px solid #DDDDDD;letter-spacing:-1px;font-weight:bold;}
	#sidebar ul {list-style-type:none;margin:0px;padding:0px;}
	#sidebar ul li {list-style-type:none;margin:0px 0px 5px 0px;padding:0px;}
	#sidebar ul ul {list-style-type:none;margin:0px;padding:0px;}
	#sidebar ul li li {margin:0px;padding:0px 0px 5px 0px;}	
	#sidebar ul li ul li {margin:0px;padding:0px 0px 5px 0px;}
	#sidebar .widget {background:#EAF6E5;margin:0px 0px 10px 0px;padding:2px;}
	#sidebar .whitebox {background:#FFFFFF;margin:0px;padding:10px;}
	#sidebar .columns {float:left;width:44%;margin-right:10px;}

	/* Site Footer */
	#footer {color:#000;font-size:0.7em;line-height:24px;display:block;}
	#footer-l {float:left;padding-left:6px;}
	#footer-r {float:right;text-align:right;padding-right:6px;}
	#footer-r a {color:#000;padding-right:15px;}
	#footer-l a {color:#000;}
	#footer-r ul {margin:0;list-style:none;}
	#footer-r ul li {display:inline;margin:0;}
	
	/* Footer Sitemap */
	#sitemap {clear:both;display:block;}

Thanks

GW

[gwmbox]

Is there no one that can help me with this?

Please

GW

[azoomer]

gwmbox, I have downloaded your files and have been trying to find the problem, but without any succes. We will see if someone else can figure it out, otherwise you might want to try to make the layot with css instead of javascript. You could make the same columns with divs and floats ( float left). Sorry, just couldn't figure out why it behaves like that.