Forums

landonwisely

I would bet this would fall under the 'just let someone else look at it' they'll tell you the one semi colon or hyphen you forgot.... type of thing. However, I'm really racking my brain on this one.

I'm throwing together a new site... and I'm styling the blog...

I get it looking fine and dandy in FF (haven't checked Opera/Safari) but the #wrap element is not being centered properly in IE.

Here's my stylesheet, and a link if you wanna see it that way.


html, body, div, object, h1, h2, h3, h4, h5, h6, p, a, del, dfn, em, font, img, strong, b, u, i, center, ul, li, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

body {
     line-height: 16px;
     text-align: center;
	background: #1b1a1a;
	color: #ccc;
	font-family: Georgia, \"Times New Roman\", Times, serif;	
	font-size: 13px;	
}

ol, ul {list-style: none;}

:focus {outline: 0;}

del {text-decoration: line-through;}


a {text-decoration: none;}

h2 {
	font-size: 24px;
	padding: 5px 0px 5px 0px;
}

h4 {font-size: 20px;}

#wrap {
	margin: 0px auto;
	min-height: 100%;
	width: 702px;
}

#header {
	width: 702px;
	height: 242px;
}

#title {
	width: 275px;
	height:	48px;
	text-align: center;
	padding-top: 10px;
	float: left;
}

#style {
	width: 150px;
	height: 16px;
	text-align: center;
	padding: 3px 0px 3px 0px;
	float: right;
}

#menubar {
	width: 702px;
	height: 25px;
	text-align: right;
	font-size: 16px;
	margin-top: -32px;
	padding-top: 7px;
}

#menuline {
	width: 702px;
	position: relative;
	height: 22px;
	overflow: visible;
}

#pictureselect {
	position: relative;
	height: 1%; /* ie bug */
}
#menuline ul, #pictureselect {
	padding: 0;
	margin: 0;
}

#menuline ul li, #pictureselect li {
	float: right;
	list-style: none;
}
#menuline ul li a, #pictureselect li a {
	z-index: 8;
	float: left;
	position: relative;
	overflow: hidden;
	height: 22px;
	text-decoration: none;
	text-align: center;
}

#button1 a, #button2 a, #button3 a, #button4 a, #button5 a {width: 75px;}

#content { 
	width: 702px;
	padding-bottom: 153px;
	margin: 0 auto;
	text-align: justify;
	padding: 0 0 0 0;
}


#content p img {float: left;}

ul#picker li, ul#footerInside li {display: inline;}

ul.links li.right, ul#footerInside li#subscribe {float: right;}


#footer {
	position: relative;
	width: 702px;
	height: 150px;
	margin: -150px auto 10px auto;
}

ul#footerInside li#copyright {float: left;}

ul#footerInside {padding-top: 3px;}


.post {
	padding: 28px 0 20px 0;
}

.post h2 {
	font-size: 1.9em;
	font-weight: normal;
	margin: -10px 20px 0 30px;
}

.post h2.single {margin: -10px 20px 12px 30px;}

.post .data {
	font-size: 1em;
	font-weight: normal;
	margin: 0 20px 15px 50px;
}

.post h3 {
	font-size: 1.3em;
	font-weight: normal;
	margin: 25px 20px -10px 0;
}

#content>.post h3 {margin-bottom: 8px;} /* FF Specific */

.entry {
	width: 700px;
	margin: 0 auto;
}

.postmetadata {
	width: 682px;
	margin: 25px auto 15px auto;
	text-align: center;
	font-size: 0.9em;
	padding: 8px 10px;
}

.postmetadata#single { 
	margin: 0 auto 30px auto;
	background-color: #000;
}

.postmetadata small { font-size: 0.8em; }			
			
blockquote {
	margin: 10px 0 10px 30px;
	padding: 0 0 0 5px;
}
		
.post ul {
	margin: 10px 0 ;
	padding: 0 0 0 37px;
}

.navigation {
	width: 447px;
	height: 18px;
	margin: 0 auto;
	font-size: 0.8em;
	padding: 8px 40px;
}

.alignleft {
	float: left;
	text-align: left;
}

.alignright {
	float: right;
	text-align: right;
}

#commentformarea {
	width: 702px;
	margin: 0 auto 8px auto;
	padding: 8px 10px;
}

#commentform {margin: 15px 0 10px 40px;}

#commentformarea h3 {
	font-size: 1.3em;
	font-weight: normal;
	margin: 10px 0 15px 20px;
}

#commentform p { margin: 0 0 3px 0;}

#commentform input, #commentform textarea {
	padding: 3px;
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 0.8em;
}

#commentform textarea {width: 420px;}

#commentform input#submit {
	font-family: Georgia, \"Book Antiqua\", \"Souvenir Lt BT\", \"Times New Roman\", serif;
	width: 130px;
}

h4 {
	margin: 25px 0 20px 0;
	text-align: center;
	font-weight: normal;
}

ol.commentlist {
	width: 426px;
	list-style: none;
	margin: 0 auto 60px auto;
	padding: 0;
	font-size: 0.9em;
}

ol.commentlist li {
	margin: 0 0 20px 0;
	padding: 20px 0 0 0;
}

ol.commentlist p.await_mod {margin: 0 0 8px 0;}

ol.commentlist p { margin: 0 0 10px 0; }

.sanda h2 {
	font-size: 1.9em;
	font-weight: normal;
	margin: 35px 0 0 0;
	text-align: center;
}

.sanda>h2 { margin: 15px 0 0 0; } /* FF Specific */

.sanda h3 { margin: 0 40px 15px 40px; }

ul#sidebar {
	width: 700px;
	margin: 8px auto 0 auto;
	padding: 0 0 25px 0;
}

#wrap>#sidebar { padding: 15px 0 25px 0; } /* FF Specific */

#sidebar_wrap {
	width: 680px;
	margin: 15px 15px 0 45px;
	padding: 0 0 -20px 0;
}

#sidebar>#sidebar_wrap { margin-top: 0; } /* FF Specific */

ul#sidebar li, ul#sidebar li ul, ul#sidebar li ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

#sidebar li h2 { 
	margin: 0;
	font-weight: normal;
	font-size: 1.6em;
	width: 1339px;
}

ul#sidebar li {
	width: 139px;
	float: left;
	margin: 0 0 15px 0;
	padding: 0;
}

ul#sidebar li ul {
	width: 135px;
	padding: 5px 0 15px 10px;
}

ul#sidebar li ul li { width: 130px;}

input#s {
	width: 440px;
	margin: 0 13px -20px 0;
	padding: 4px 0;
	text-align: center;
}

div>input#s {margin-bottom: 0; margin-top: 15px;} /* FF Specific */

.feedicon {
	width: 20px;
	height: 20px;
}

#footer p {
	margin: 0 0 15px 0;
	padding: 15px 0 0 0;
	font-size: 0.7em;
}

#wrap>#footer p { margin: 0; padding: 15px 0 15px 0; } /* FF Specific */

a {color: #fff;}

h2, h4 {color: #2b7e88;}

h2 a, h3 a {color: #2b7e88;}

#header {background: url(http://landonwisely.com/test/black/images/header.jpg);}

#title {
	font-size: 10px;
	color: #fff;
	background: #1b1a1a;
	filter:alpha(opacity=70);   
	-moz-opacity:0.7;           
	opacity: 0.7; 
}

#title a {color: #2b7e88;}

#style {
	color: #1b1a1a;
	background: #ccc;
	filter:alpha(opacity=80);   
	-moz-opacity:0.8;           
	opacity: 0.8; 
}

#menubar {
	background: #1b1a1a;
	filter:alpha(opacity=70);   
	-moz-opacity:0.7;           
	opacity: 0.7; 
	border-bottom: 3px solid #0e0d0d;
}

#content {background: #1b1a1a;}

#menuline ul li a, #pictureselect li a {color: #fff;}

#menuline li.background {
	background: url(http://landonwisely.com/test/images/bg_menu_right.png) no-repeat top right !important;
	//filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='http://landonwisely.com/test/images/bg_menu_right.png');	
	background: url(http://landonwisely.com/test/images/bg_menu_right.gif) no-repeat top right;
	z-index: 8;
	position: absolute;
	visibility: hidden;
	margin-top:25px;
}

#menuline .background .left {
	background: url(http://landonwisely.com/test/images/bg_menu.png) no-repeat top left !important;
	//filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='http://landonwisely.com/test/images/bg_menu.png');	
	background: url(http://landonwisely.com/test/images/bg_menu.gif) no-repeat top left;
	height: 1px;
	margin-right: 7px;
}

http://landonwisely.com/blog

I toyed with the doctype thinking maybe I messed something up there, but I don't think that's it. I'm slightly sleep deprived, so perhaps that needs to be counted into the equation.

thanks in advance.
-my inner noob

Edwin

Nice header with the stars, have you designed that yourself? Somewhere in the back of my mind it's like I've seen it before...

An answer to your question:

you need to add text-align: center; to your body.


body {
  text-align: center;
}

And important, after that you add text-align: left; again to your page-wrap, to align the text left again:


#wrap {
 text-align: left;
}

box

Which IE version are you having problems with? it should be aligning centred ok in IE6 and later.

landonwisely

@edwin, I did actually design it myself (glad you like)

here's the whole image. It is a 2 year old design, that I don't toy with much, so it's a bit rough around the edges.
http://landonwisely.com/test/images/starsalign/01.jpg

RE: the problem....

this is in the body selector of the css.

body {text-align: center;}

and text-aligning the #wrap left didn't change anything either.

I have looked at this in IE6 and it's not centering.

I'm really confused on this one, which is why I broke down and posted something here.

box

Not sure if this is the problem - but it certainly won't help - you are calling your stylesheet twice - once in a LINK and the other @import. Remove one of them and see what happens.

landonwisely

Oh yeah, the wordpress theme I started frankensteining had the @import, and I never got rid of it...

sadly, still no dice.

Edwin

I don't have another answer yet, but when I look it now at a lower resolution and see there is a very long horizontal scroll (as well in firefox and safari), didn't see that before, because I was on a higher resolution. Maybe something is too wide (or something is floated?) and that could be the cause of the problem?

box

#sidebar li h2 {
font-size:1.6em;
font-weight:normal;
margin:0pt;
width:1339px;
}

This is the problem - I assume it should read width:139px?

chriscoyier

My first guess is your strict doctype...

Maybe try transitional?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

box

nope - a transitional doctype will often push ie6 to the left if you're relying on the margin:0 auto - in strict mode IE6 actually behaves itself for once and centres properly. The first thing I looked for was a transitional doctype as this often creates this problem.
The problem in this case is the section of the CSS that I have highlighted. Thats what's throwing the centring off.

landonwisely

@box....

you're right. wow. I probably would have spent days digging and not found that.

big thanks. i guess my oafish fingers hit the 3 one time too many.

again, big.big. thanks.

treehouse : what would you like to learn today?

Forums

IE centering - I thought we all had it figured out.