Dreamweaver CSS: Dreamweaver, CSS, Browser

by: LZ1Posted on 2009-09-09 at 16:20:19ID: 25296390

The URL you have provided is wrong. It's redirecting to my ISP search page.Please check and respost. Or just post your complete code with CSS.

by: dm-creativePosted on 2009-09-09 at 16:45:29ID: 25296510

oops www.livingsupernaturally.com I tried attaching the CSS files but was not an acceptable format, I zippd the entire website but it is 48 MB, if it would help I can attach or ftp it.

Thanks,
David

by: LZ1Posted on 2009-09-09 at 16:52:06ID: 25296527

I see it now. No need to attach the entire web site. Just one page and attach the CSS via the "Attach Code Snippet" checkbox below

by: dm-creativePosted on 2009-09-09 at 18:57:08ID: 25296940

AS you can see in teh code i"m not using much of the CSS as i barely understand it. I've added most content to the website through layers in Dreamweaver.

Thanks,
David

/* begin Page */
 
/* Generated with Artisteer version 2.2.0.17981, file checksum is 3F6437C7. */
 
body
{
	margin: 0 auto;
	padding: 0;
	background-color: #ACD0D8;
}
 
#art-main
{
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
}
 
#art-page-background-glare
{
	position: absolute;
	width: 100%;
	height: 379px;
	left: 0;
	top: 0;
}
 
#art-page-background-glare-image
{
	background-image: url('images/Page-BgGlare.png');
	background-repeat: no-repeat;
	height: 379px;
	width: 387px;
	margin: 0;
}
 
html:first-child #art-page-background-glare
{
	border: 1px solid transparent; /* Opera fix */
}
 
 
 
 
#art-page-background-simple-gradient
{
	position: absolute;
	background-image: url('images/Page-BgSimpleGradient.jpg');
	background-repeat: repeat-x;
	top:0;
	width: 100%;
	height: 1px;
}
 
.cleared
{
	float: none;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	font-size:1px;
}
 
 
form
{
	padding:0 !important;
	margin:0 !important;
}
 
table.position
{
	position: relative;
	width: 100%;
	table-layout: fixed;
}
/* end Page */
 
/* begin Box, Sheet */
.art-Sheet
{
	position:relative;
	z-index:0;
	margin:0 auto;
	width: 800px;
	min-width:53px;
	min-height:53px;
}
 
.art-Sheet-body
{
	position: relative;
	z-index:1;
	padding: 12px;
}
 
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
{
	position:absolute;
	z-index:-1;
}
 
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
	width: 72px;
	height: 72px;
	background-image: url('images/Sheet-s.png');
}
 
.art-Sheet-tl
{
	top:0;
	left:0;
	clip: rect(auto, 36px, 36px, auto);
}
 
.art-Sheet-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 36px, 36px);
}
 
.art-Sheet-bl
{
	bottom: 0;
	left: 0;
	clip: rect(36px, 36px, auto, auto);
}
 
.art-Sheet-br
{
	bottom: 0;
	right: 0;
	clip: rect(36px, auto, auto, 36px);
}
 
.art-Sheet-tc, .art-Sheet-bc
{
	left: 36px;
	right: 36px;
	height: 72px;
	background-image: url('images/Sheet-h.png');
}
 
.art-Sheet-tc
{
	top: 0;
	clip: rect(auto, auto, 36px, auto);
}
 
.art-Sheet-bc
{
	bottom: 0;
	clip: rect(36px, auto, auto, auto);
}
 
.art-Sheet-cr, .art-Sheet-cl
{
	top: 36px;
	bottom: 36px;
	width: 72px;
	background-image: url('images/Sheet-v.png');
}
 
.art-Sheet-cr
{
	right:0;
	clip: rect(auto, auto, auto, 36px);
}
 
.art-Sheet-cl
{
	left:0;
	clip: rect(auto, 36px, auto, auto);
}
 
.art-Sheet-cc
{
	position:absolute;
	z-index:-1;
	top: 36px;
	left: 36px;
	right: 36px;
	bottom: 36px;
	background-color: #FFFFFF;
}
 
 
.art-Sheet
{
	margin-top: 10px !important;
}
 
#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
	min-width:800px;
}
 
/* end Box, Sheet */
 
/* begin Header */
div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 776px;
	height: 125px;
}
 
div.art-Header-png
{
	position: absolute;
	z-index:-2;
	top: 0;
	left: 0;
	width: 776px;
	height: 125px;
	background-image: url('images/Header.png');
	background-repeat: no-repeat;
	background-position: left top;
}
 
div.art-Header-jpeg
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 776px;
	height: 125px;
	background-image: url('images/Header.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}
/* end Header */
 
/* begin Logo */
.art-Logo
{
	display : block;
	position: absolute;
	left: 11px;
	top: 21px;
	width: 765px;
}
 
h1.art-Logo-name
{
	display: block;
	text-align: center;
}
 
h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 38px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	padding:0;
	margin:0;
	color: #EAF8FA !important;
}
 
.art-Logo-text
{
	display: block;
	text-align: center;
}
 
.art-Logo-text, .art-Logo-text a
{
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	padding:0;
	margin:0;
	color: #87D4E3 !important;
}
/* end Logo */
 
/* begin Menu */
/* menu structure */
 
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}
 
.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}
 
.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background:none;
}
 
.art-menu li:hover
{
	z-index: 10000;
	white-space: normal;
}
 
.art-menu li li
{
	float: none;
}
 
.art-menu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
}
 
.art-menu li:hover>ul
{
	visibility: visible;
	top: 100%;
}
 
.art-menu li li:hover>ul
{
	top: 0;
	left: 100%;
}
 
.art-menu:after, .art-menu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.art-menu, .art-menu ul
{
	min-height: 0;
}
 
.art-menu ul
{
	background-image: url(images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}
 
.art-menu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}
 
 
 
 
 
/* menu structure */
 
.art-menu
{
	padding: 2px 2px 2px 2px;
}
 
.art-nav
{
	position: relative;
	height: 34px;
	z-index: 100;
}
 
.art-nav .l, .art-nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 34px;
	background-image: url('images/nav.png');
}
 
.art-nav .l
{
	left: 0;
	right:0px;
}
 
.art-nav .r
{
	right: 0;
	width: 776px;
	clip: rect(auto, auto, auto, 776px);
}
 
 
/* end Menu */
 
/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}
 
.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 30px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 1px;
	margin-left: 1px;
}
 
 
.art-menu a .r, .art-menu a .l
{
	position:absolute;
	display: block;
	top:227px;
	z-index:-1;
	height: 90px;
	background-image: url('images/MenuItem.png');
}
 
.art-menu a .l
{
	left:0;
	right:7px;
}
 
.art-menu a .r
{
	width:414px;
	right:473px;
	clip: rect(auto, auto, auto, 407px);
}
 
.art-menu a .t 
{
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	padding: 0 16px;
	margin: 0 7px;
	line-height: 30px;
	text-align: center;
}
 
.art-menu a:hover .l, .art-menu a:hover .r
{
	top:-30px;
}
 
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
	top:-30px;
}
 
.art-menu li:hover a .l, .art-menu li:hover a .r
{
	top:-30px;
}
.art-menu a:hover .t
{
	color: #EEF5F7;
}
 
.art-menu li:hover a .t
{
	color: #EEF5F7;
}
 
.art-menu li:hover>a .t
{
	color: #EEF5F7;
}
 
 
.art-menu a.active .l, .art-menu a.active .r
{
	top: -60px;
}
 
.art-menu a.active .t
{
	color: #BDE7F4;
}
 
 
/* end MenuItem */
 
/* begin MenuSeparator */
.art-nav .art-menu-separator
{
	display: block;
	width: 1px;
	height: 30px;
	background-image: url('images/MenuSeparator.png');
}
 
/* end MenuSeparator */
 
/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 26px;
	width: 180px;
	overflow:hidden;
	line-height: 26px;
	margin-right: auto;
 
 
	background-image: url('images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}
 
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}
 
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 26px;
	color: #103D46;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}
 
.art-menu ul ul a
{
	margin-left: auto;
}
 
.art-menu ul li a:hover
{
	color: #000000;
	background-position: 0 -26px;
}
 
.art-menu ul li:hover>a
{
	color: #000000;
	background-position: 0 -26px;
}
 
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #000000;
}
 
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
	color: #000000;
}
 
 
/* end MenuSubItem */
 
/* begin ContentLayout */
.art-contentLayout
{
	position: relative;
	margin-bottom: 4px;
	width: 776px;
}
/* end ContentLayout */
 
/* begin Box, Block */
.art-Block
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:15px;
	min-height:15px;
}
 
.art-Block-body
{
	position: relative;
	z-index:1;
	padding: 7px;
}
 
.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl, .art-Block-tc, .art-Block-bc,.art-Block-cr, .art-Block-cl
{
	position:absolute;
	z-index:-1;
}
 
.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
	width: 14px;
	height: 14px;
	background-image: url('images/Block-s.png');
}
 
.art-Block-tl
{
	top:0;
	left:0;
	clip: rect(auto, 7px, 7px, auto);
}
 
.art-Block-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 7px, 7px);
}
 
.art-Block-bl
{
	bottom: 0;
	left: 0;
	clip: rect(7px, 7px, auto, auto);
}
 
.art-Block-br
{
	bottom: 0;
	right: 0;
	clip: rect(7px, auto, auto, 7px);
}
 
.art-Block-tc, .art-Block-bc
{
	left: 7px;
	right: 7px;
	height: 14px;
	background-image: url('images/Block-h.png');
}
 
.art-Block-tc
{
	top: 0;
	clip: rect(auto, auto, 7px, auto);
}
 
.art-Block-bc
{
	bottom: 0;
	clip: rect(7px, auto, auto, auto);
}
 
.art-Block-cr, .art-Block-cl
{
	top: 7px;
	bottom: 7px;
	width: 14px;
	background-image: url('images/Block-v.png');
}
 
.art-Block-cr
{
	right:0;
	clip: rect(auto, auto, auto, 7px);
}
 
.art-Block-cl
{
	left:0;
	clip: rect(auto, 7px, auto, auto);
}
 
.art-Block-cc
{
	position:absolute;
	z-index:-1;
	top: 7px;
	left: 7px;
	right: 7px;
	bottom: 7px;
	background-color: #C8E0E5;
}
 
 
.art-Block
{
	margin: 7px;
}
 
/* end Box, Block */
 
/* begin BlockHeader */
.art-BlockHeader
{
	position:relative;
	z-index:0;
	height: 30px;
	padding: 0 7px;
	margin-bottom: 7px;
}
 
.art-BlockHeader .t
{
	height: 30px;
	color: #000000;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	white-space : nowrap;
	padding: 0 6px;
	line-height: 30px;
}
 
.art-BlockHeader .l, .art-BlockHeader .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 30px;
	background-image: url('images/BlockHeader.png');
}
 
.art-BlockHeader .l
{
	left:0;
	right:6px;
}
 
.art-BlockHeader .r
{ 
	width:786px;
	right:0;
	clip: rect(auto, auto, auto, 780px);
}
 
 
 
 
 
.art-header-tag-icon
{
	display:inline-block;
	background-position:left top;
	background-image: url('images/BlockHeaderIcon.png');
	padding:0 0 0 12px;
	background-repeat: no-repeat;
	min-height: 12px;
	margin: 0 0 0 5px;
}
 
 
/* end BlockHeader */
 
/* begin Box, BlockContent */
.art-BlockContent
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:1px;
	min-height:1px;
}
 
.art-BlockContent-body
{
	position: relative;
	z-index:1;
	padding: 8px;
}
 
 
 
.art-BlockContent-body
{
	color:#14262A;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}
 
.art-BlockContent-body a:link
{
	color: #1D6C7C;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	text-decoration: underline;
}
 
.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
	color: #529EAD;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	text-decoration: underline;
}
 
.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
	color: #2790A5;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	text-decoration: none;
}
 
.art-BlockContent-body ul
{
	list-style-type: none;
	color: #061619;
	margin:0;
	padding:0;
}
 
.art-BlockContent-body li
{
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	text-decoration: none;
}
 
.art-BlockContent-body ul li
{
	padding:0px 0 0px 13px;
	background-image: url('images/BlockContentBullets.png');
	background-repeat:no-repeat;
	margin:0.5em 0 0.5em 0;
	line-height:1.2em;
}
 
/* end Box, BlockContent */
 
/* begin Box, Post */
.art-Post
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:1px;
	min-height:1px;
}
 
.art-Post-body
{
	position: relative;
	z-index:1;
	padding: 10px;
}
 
 
 
.art-Post
{
	margin: 5px;
}
 
/* Start images */
a img
{
	border: 0;
}
 
.art-article img, img.art-article
{
	border: solid 1px #ACD0D8;
	margin: 1em;
}
 
.art-metadata-icons img
{
	border: none;
	vertical-align: middle;
	margin:2px;
}
/* Finish images */
 
/* Start tables */
 
.art-article table, table.art-article
{
	border-collapse: collapse;
	margin: 1px;
	width:auto;
}
 
.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
	background-color:Transparent;
}
 
.art-article th, .art-article td
{
	padding: 2px;
	border: solid 1px #74B1BE;
	vertical-align: top;
	text-align:left;
}
 
.art-article th
{
	text-align:center;
	vertical-align:middle;
	padding: 7px;
}
 
/* Finish tables */
/* end Box, Post */
 
/* begin PostHeaderIcon */
.art-PostHeaderIcon-wrapper
{
	text-decoration:none;
	margin: 0.2em 0;
	padding: 0;
	font-weight:normal;
	font-style:normal;
	letter-spacing:normal;
	word-spacing:normal;
	font-variant:normal;
	text-decoration:none;
	font-variant:normal;
	text-transform:none;
	text-align:left;
	text-indent:0;
	line-height:inherit;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 22px;
	font-style: normal;
	font-weight: bold;
	text-align: left;
	color: #12576E;
}
 
.art-PostHeaderIcon-wrapper, .art-PostHeaderIcon-wrapper a, .art-PostHeaderIcon-wrapper a:link, .art-PostHeaderIcon-wrapper a:visited, .art-PostHeaderIcon-wrapper a:hover
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 22px;
	font-style: normal;
	font-weight: bold;
	text-align: left;
	color: #12576E;
}
 
/* end PostHeaderIcon */
 
/* begin PostHeader */
.art-PostHeader a:link
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #156884;
}
 
.art-PostHeader a:visited, .art-PostHeader a.visited
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #417E8B;
}
 
.art-PostHeader a:hover, .art-PostHeader a.hovered
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #2DA6BE;
}
/* end PostHeader */
 
/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  color: #1A3337;
}
 
.art-PostContent
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-align: justify;
  color: #1A3337;
}
 
 
/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #19799A;
}
 
/* Adds special style to an unvisited link. */
a:link
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #19799A;
}
 
/* Adds special style to a visited link. */
a:visited, a.visited
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #396F79;
}
 
/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  color: #2DA6BE;
}
 
/* Finish Content link style */
 
/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}
 
 
/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 28px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #19799A;
}
 
h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #19799A;
}
 
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #47BAE1;
}
 
h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #103A42;
}
 
h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #103A42;
}
 
h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #103A42;
}
/* Finish Content headings Fonts & Colors  */
/* end PostContent */
 
/* begin PostBullets */
/* Start Content list */
ol, ul
{
	color: #294F57;
	margin:1em 0 1em 2em;
	padding:0;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
}
 
li ol, li ul
{
	margin:0.5em 0 0.5em 2em;
	padding:0;
}
 
li 
{
	margin:0.2em 0;
	padding:0;
}
 
ul
{
	list-style-type: none;
}
 
ol
{
	list-style-position:inside;
	
}
 
 
 
.art-Post li
{
	padding:0px 0 0px 13px;
	line-height:1.2em;
}
 
.art-Post ol li, .art-Post ul ol li
{
	background: none;
	padding-left:0;
}
 
.art-Post ul li, .art-Post ol ul li 
{
	background-image: url('images/PostBullets.png');
	background-repeat:no-repeat;
	padding-left:13px;
}
 
 
/* Finish Content list */
/* end PostBullets */
 
/* begin PostQuote */
/* Start blockquote */
blockquote p
{
	color:#11414A;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-style: italic;
	font-weight: normal;
	text-align: left;
}
 
blockquote
{
		border:solid 1px #77CCE9; 
		margin:10px 10px 10px 50px;
	padding:5px 5px 5px 41px;
	background-color:#B9E5F4;
	background-image:url('images/PostQuote.png');
	background-position:left top;
	background-repeat:no-repeat;
}
 
 
/* Finish blockuote */
/* end PostQuote */
 
/* begin Button */
.art-button-wrapper .art-button
{
	display:inline-block;
	width: auto;
	outline:none;
	border:none;
	background:none;
	line-height:34px;
	margin:0 !important;
	padding:0 !important;
	overflow: visible;
	cursor: default;
	text-decoration: none !important;
	z-index:0;
}
 
.art-button-wrapper
{
	display:inline-block;
	position:relative;
	height: 34px;
	overflow:hidden;
	white-space: nowrap;
	width: auto;
	z-index:0;
}
 
.art-button-wrapper .art-button
{
	display:block;
	height: 34px;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	white-space: nowrap;
	text-align: left;
	padding: 0 21px !important;
	line-height: 34px;
	text-decoration: none !important;
	color: #154F5B !important;
}
 
input, select
{
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}
 
.art-button-wrapper.hover .art-button, .art-button:hover
{
	color: #E7F1F4 !important;
	text-decoration: none !important;
}
 
.art-button-wrapper.active .art-button
{
	color: #F1F7F8 !important;
}
 
.art-button-wrapper .l, .art-button-wrapper .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 102px;
	background-image: url('images/Button.png');
}
 
.art-button-wrapper .l
{
	left:0;
	right:11px;
}
 
.art-button-wrapper .r
{
	width:411px;
	right:0;
	clip: rect(auto, auto, auto, 400px);
}
 
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
	top: -34px;
}
 
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
	top: -68px;
}
 
 
/* end Button */
 
/* begin Footer */
.art-Footer
{
	position:relative;
	z-index:0;
	overflow:hidden;
	width: 776px;
	margin: 5px auto 0px auto;
}
 
.art-Footer .art-Footer-inner
{
	height:1%;
	position: relative;
	z-index: 0;
	padding: 8px;
	text-align: center;
}
 
.art-Footer .art-Footer-background
{
	position:absolute;
	z-index:-1;
	background-repeat:no-repeat;
	background-image: url('images/Footer.png');
	width: 776px;
	height: 150px;
	bottom:0;
	left:0;
}
 
 
.art-rss-tag-icon
{
	position: relative;
	display:block;
	float:left;
	background-image: url('images/rssIcon.png');
	background-position: center right;
	background-repeat: no-repeat;
	margin: 0 5px 0 0;
	height: 25px;
	width: 25px;
}
 
 
 
 
.art-Footer .art-Footer-text p
{
	margin: 0;
}
 
.art-Footer .art-Footer-text
{
	display:inline-block;
	color:#0D2F36;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	font-size: 11px;
}
 
.art-Footer .art-Footer-text a:link
{
	text-decoration: none;
	color: #12444E;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	text-decoration: underline;
}
 
.art-Footer .art-Footer-text a:visited
{
	text-decoration: none;
	color: #2F5C65;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	text-decoration: underline;
}
 
.art-Footer .art-Footer-text a:hover
{
	text-decoration: none;
	color: #268DA1;
	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
	text-decoration: none;
}
/* end Footer */
 
/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
	font-family:Arial;
	font-size:10px;
	letter-spacing:normal;
	word-spacing:normal;
	font-style:normal;
	font-weight:normal;
	text-decoration:underline;
	color:#2790A5;
}
 
.art-page-footer
{
	margin:1em;
	text-align:center;
	text-decoration:none;
	color:#5CA4B2;
}
/* end PageFooter */
 
/* begin LayoutCell */
.art-contentLayout .art-content
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 776px;
}
.art-contentLayout .art-content-wide
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 775px;
}
/* end LayoutCell */
 
/* begin LayoutCell */
.art-contentLayout .art-sidebar1
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 193px;
}
/* end LayoutCell */

Select all Open in new window

by: TechForcePosted on 2009-09-10 at 05:37:56ID: 25299522

you can Force IE to recognise the css by adding het same line again and adding a * beforehand, this would be the 'hack' workaround.

you could also try adding this line between the <head> </head> code of the HTML document
<meta http-equiv="X-UA-Compatible" content="IE=8">

see the code i've attached, hope it helps you out!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
</head>
<body>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:

Select all Open in new window

by: dm-creativePosted on 2009-09-10 at 07:54:34ID: 25300819

In looking at the code (which is somewhat like Greek to me), I see you changed the first line, and the fourth line. I'm assuming only the fourth line is significant as it relates to IE 8. I haven't tested yet as wanted to know for sure if line one was also significant, but also will this fix the problem with Googe Chrome, which also did not display correctly?

Thanks,
David

by: TechForcePosted on 2009-09-10 at 07:57:29ID: 25300850

yep, you just need to make sure the <meta http-equiv="X-UA-Compatible" content="IE=8">
is somewhere between the <head> and </head> tags of your html, then give it a try,hopefully this will force it to render correctly.

by: TechForcePosted on 2009-09-10 at 08:00:30ID: 25300891

actually, i just checked out tjhe page, all of the content seems to be aligned further left than the centre of thepage. in both my firefox, ietab and ie 8 ?

i assume you want all the content centred between the white bg in the center of the page?

by: dm-creativePosted on 2009-09-10 at 08:01:05ID: 25300900

In going into my code I see there are two similar lines to what you gave me. Do I add your line to those or replace what I have with you have suggested.
And will this fix Google Chrome as well.

What I have now:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

What your are suggesting:

<meta http-equiv="X-UA-Compatible" content="IE=8">

Thanks so much for your help, I learning so much!
David

by: TechForcePosted on 2009-09-10 at 08:03:35ID: 25300937

yep, its not guarantee'd to fix it. but its definately woth ago.

it'll force it to render it for ie8, but the text is not centered in any browser i'm using to view the page, im just going through your code now.

by: dm-creativePosted on 2009-09-10 at 08:25:27ID: 25301164

Sorry for being confused, but do I take both of my lines of code out and replace with your one line?

by: TechForcePosted on 2009-09-10 at 08:39:05ID: 25301287

just replace the X-UA-Compatible code with the one to force IE8.

replace
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
with
<meta http-equiv="X-UA-Compatible" content="IE=8">

and see if it changes the way it renders the css.

i'm tryring to go through your code locally, but everyhing displays offset for me in every browser in this resolution (1920 x 1200)

by: dm-creativePosted on 2009-09-10 at 09:31:52ID: 25301857

Wow, I can't believe what is happening. I changed the one line, and started checking the site on another computer and it's a mess. I'm sure it is not related to the new line but something more significant.

First on my computer (two screens 1920x1080 and 1920x1080) which was used for designing the site it works fine, except for Chrome. I see no change in adding the line from you. In checking on my secretary's computer the problem is still there with IE7 which is where i discovered the problem yesterday and the images are shifted to the right.

In checking on another older computer 1440 x 900) it is really strange, the Firefox content is shifted right and the IE is shifted left.

Just when I thought I was getting somewhere :)

David

by: TechForcePosted on 2009-09-10 at 09:37:36ID: 25301914

having gone through the code, i honestly can't work it out personally!

there are div classes upon div classes, and no clear structure :S

can you link us to the template you modified to come with this result?
i've attached screenshots of how it appears on my end in, the display is exactly the same in both Firefox, IE tab inside firefox, and IE 8 for me.

ffox.jpg
- 241 KB
screenshot of the site in firefox, IE Tab and IE8 display this exactly the same.

by: dm-creativePosted on 2009-09-10 at 09:56:47ID: 25302102

I've attached the original template. I've obviously really screwed it up and I most likely am going need to start from scratch. All that I wanted from the template was the basic page layout, background, header, footer and menu system; in my limited knowledge of CSS, in pulling out the page content that came with the template I evidently took out something I shouldn't have. Whatever you can suggest will be much appreciated

by: TechForcePosted on 2009-09-10 at 10:02:29ID: 25302160

to be honest, it looks like you've made it alot more complicated than it needs to be.

what are you using the drive the site? is there a CMS, or are you just making all the pages in dreamweaver and linking them together?

by: dm-creativePosted on 2009-09-10 at 10:11:54ID: 25302240

God does answer prayer... :), I'm using Dreamweaver exclusively. When adding a new page, I add the menu system and then go back and add all of the new page info to all of the previous pages. In modifying as i did I lost the ability to use the sub menus as they were showing up behind the new layers I was adding, so I took them out of the nav system.

by: TechForcePosted on 2009-09-10 at 10:15:43ID: 25302277

i'd reccomend looking at joomla, wordpress, drupal, or any other open source cms, as they're free, and have a range of templates and plugins available for them, all the content will be handled dynamically, and you'll only have to make the template once (if you even decide to make one, you could just get one and modify it to suit your needs)

it'll be a bit of a learning curve, but will definately simplify things for you in the long run, as you wont have o check every page is aligned correctly etc.

good luck!

by: dm-creativePosted on 2009-09-10 at 10:29:01ID: 25302412

Thanks for your help!! Being I have advertising hitting this weekend, starting over and leaning a new system is going to take some time and i need to have a site in place by Sunday. Any suggestions on a simple redoing of the original template I've started with that I can setup with a new set of pages to add my existing content too.

Question

Dreamweaver CSS

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Dreamweaver

CSS

Browser

Adobe Dreamweaver

Internet Explorer Web Browser

Cascading Style Sheets (CSS)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press