CMS Made Simple Forums

Posted: **Fri Apr 04, 2008 1:53 pm**

Just got a new site up and running and everything looking smooth, except one item in IE;

My payoff text i my header moves toward the center instead keeping left under my logo - and it's only happening i IE on windows.

Anyone has an idea what the problem is?

My site:www.webform.dk

My CSS where the problem is header h2:

Code: Select all

body {
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	font-size: 80%;
	color: #000;
	background-color: #EEEEEE;
	line-height: 140%;
}

img {
	border: none;
}

a {
	color: #4B6400;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, form {
	margin: 0px;
	padding: 0px;
}

#headercontainer {
	width: 100%;
	background: #242424;
}

#header {
	margin: 0 auto;
	width: 760px;
	height: 125px;
	border: 1px solid #6F6F6F;
	border-top: 0px;
	border-bottom: 0px;
	background: #242424 url('uploads/images/header.jpg');
}

#header h1 {
	margin: 0;
	color: #000;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 275%;
	letter-spacing: -3px;
	/*display: none;*/
	text-align: left;
	text-indent: -999em;
}

#header h2 {
	margin: 0;
	color: #000;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 110%;
	text-indent: 20px;
	padding-top: 0px;
	text-align: left;
}

#logo {
	float: left;
	padding: 20px 0 0 20px;
}

#logo a {
	text-decoration: none;
}

#logo a:hover {
	text-decoration: none;
}

#menucontainer {
	width: 100%;
	height: 28px;
	background: #A0C80E;
	background-image: url('uploads/images/menu-background.jpg');
	background-repeat: repeat-x;
}

#menu {
	margin: 0 auto;
	width: 760px;
	background: #A0C80E;
	border-right: 1px solid #95BC0E;
	line-height: 180%;
}

#wrapper {
	width: 760px;
	margin: 0px auto;
	background-color: #FFF;
	border: 1px solid #B5B5B5;
	border-top: 0px;
	border-bottom: 0px;
}

#contentarea {
	clear: both;
	padding: 25px 0px;
}

/*#content
{
	margin: 0 auto;
	width: 740px;
	padding: 20px 10px;
	border: 1px solid #B5B5B5;
	border-top: 0px;
	border-bottom: 0px;
	background: #FFF;
	
}*/

#leftbar {
	float: left;
	width: 450px;
	border-right: 1px solid #BCBDBC;
	background-color: #fff;
	padding: 0px 20px;
	/*color: #797B7A;*/
	font-weight: normal;
	text-decoration: none;
}

#leftbar h2 {
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 200%;
	color: #EE8907;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 5px;
}

#leftbar p {
	padding: 0 0 5px;
}

#leftbar a {
	color: #EE8907;
	text-decoration: none;
}

#leftbar a:hover {
	color: #000;
	text-decoration: none;
}

#rightbar {
	float: left;
	width: 200px;
	background-color: #fff;
	/*color: #797B7A;*/
	font-weight: normal;
	text-decoration: none;
	padding: 0px 20px;
}

#rightbar h2 {
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 200%;
	color: #797B7A;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 5px;
}

#rightbar p {
	padding: 0 0 5px;
}

#rightbar a {
	color: #EE8907;
	text-decoration: none;
}

#rightbar a:hover {
	color: #000;
	text-decoration: none;
}

.orangetext {
	color: #EE8907;
	font-weight: bold;
	text-decoration: none;
}

#clearboth {
	clear: both;
	padding-bottom: 20px;
}

#footer {
	margin: 0 auto;
	width: 740px;
	height: 22px;
	text-align: right;
	color: #FFFFFF;
	letter-spacing: 2px;
	background: #A0C80E url('uploads/images/menu-background.jpg') repeat-x;
	border: 1px solid #A0C80E;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	padding: 3px 10px;
}

body {
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	font-size: 80%;
	color: #000;
	background-color: #EEEEEE;
	line-height: 140%;
}

img {
	border: none;
}

a {
	color: #4B6400;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, form {
	margin: 0px;
	padding: 0px;
}

#headercontainer {
	width: 100%;
	background: #242424;
}

#header {
	margin: 0 auto;
	width: 760px;
	height: 125px;
	border: 1px solid #6F6F6F;
	border-top: 0px;
	border-bottom: 0px;
	background: #242424 url('uploads/images/header.jpg');
}

#header h1 {
	margin: 0;
	color: #000;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 275%;
	padding-left: 20px;
	letter-spacing: -3px;
	padding-top: 50px;
	/*display: none;*/
	text-align: left;
	text-indent: -999em;  /* this hides the text */
}

#header h2 {
	margin: 0;
	color: #000;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 110%;
	text-indent: 20px;
	padding-top: 15px;
	text-align: left;
}

#logo {
	float: left;
	padding: 20px 0 0 20px;
}

#logo a {
	text-decoration: none;
}

#logo a:hover {
	text-decoration: none;
}

#menucontainer {
	width: 100%;
	height: 28px;
	background: #A0C80E;
	background-image: url('uploads/images/menu-background.jpg');
	background-repeat: repeat-x;
}

#menu {
	margin: 0 auto;
	width: 760px;
	background: #A0C80E;
	border-right: 1px solid #95BC0E;
	line-height: 180%;
}

#wrapper {
	width: 760px;
	margin: 0px auto;
	background-color: #FFF;
	border: 1px solid #B5B5B5;
	border-top: 0px;
	border-bottom: 0px;
}

#contentarea {
	clear: both;
	padding: 25px 0px;
}

/*#content
{
	margin: 0 auto;
	width: 740px;
	padding: 20px 10px;
	border: 1px solid #B5B5B5;
	border-top: 0px;
	border-bottom: 0px;
	background: #FFF;
	
}*/

#leftbar {
	float: left;
	width: 450px;
	border-right: 1px solid #BCBDBC;
	background-color: #fff;
	padding: 0px 20px;
	/*color: #797B7A;*/
	font-weight: normal;
	text-decoration: none;
}

#leftbar h2 {
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 200%;
	color: #EE8907;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 5px;
}

#leftbar p {
	padding: 0 0 5px;
}

#leftbar a {
	color: #EE8907;
	text-decoration: none;
}

#leftbar a:hover {
	color: #000;
	text-decoration: none;
}

#rightbar {
	float: left;
	width: 200px;
	background-color: #fff;
	/*color: #797B7A;*/
	font-weight: normal;
	text-decoration: none;
	padding: 0px 20px;
}

#rightbar h2 {
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 200%;
	color: #797B7A;
	font-weight: normal;
	text-decoration: none;
	padding-bottom: 5px;
}

#rightbar p {
	padding: 0 0 5px;
}

#rightbar a {
	color: #EE8907;
	text-decoration: none;
}

#rightbar a:hover {
	color: #000;
	text-decoration: none;
}

.orangetext {
	color: #EE8907;
	font-weight: bold;
	text-decoration: none;
}

#clearboth {
	clear: both;
	padding-bottom: 20px;
}

#footer {
	margin: 0 auto;
	width: 740px;
	height: 22px;
	text-align: right;
	color: #FFFFFF;
	letter-spacing: 2px;
	background: #A0C80E url('uploads/images/menu-background.jpg') repeat-x;
	border: 1px solid #A0C80E;
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	padding: 3px 10px;
}

TIA

Finn

Posted: **Fri Apr 04, 2008 2:46 pm**

Have you tried setting a negative indent for IE in your header H2:

Code: Select all

* html #header h2 {
       text-indent: -20px;
}

Nullig

Posted: **Fri Apr 04, 2008 5:22 pm**

Hi Nullig

Thanks for reply but it did nothing - actually i could delete text-indent and paddings completely and nothing happend $:-\$

But i did get it to kinda work playing around with line-height in #header h1 and h2, but i think i have to go back to the drawing board and rethink all the css, so i don't run into trouble next time i want to add to the template/CSS.

CMS Made Simple Forums

[Solved] Issue with IE and header text

[Solved] Issue with IE and header text

Re: Issue with IE and header text

Re: [Solved] Issue with IE and header text