Central column is straying

Resolved alvinsoon
(@alvinsoon)

19 years, 10 months ago

One question I could never figure out is how come in Firefox my centre column isn’t perfectly aligned:

(Firefox screengrab)

http://lifecoachesblog.com/wp-content/files/lcb_firefox.jpg

While in IE it is?

(IE screengrab)

http://lifecoachesblog.com/wp-content/files/lcb_ie.jpg

Could someone help me with this? My background in CSS is as a complete noob.

This is my CSS

 /* Type CSS rules here and they will be applied to pages from 'editcss' immediately as long as you keep this window open. */

/**** LINK-tag style sheet style.css ****/

/* Type CSS rules here and they will be applied 
to pages from 'editcss' 
immediately as long as you keep this window open. */

/**** LINK-tag style sheet style.css ****/

/* Type CSS rules here and they will be applied 
to pages from 'editcss' 
immediately as long as you keep this window open. */

/* 
Theme Name: 3c-Black-LetterHead 
Theme URI: http://aydin.net/blog/2006/02/13/wordpress-theme-three-column-black-letterhead/ 
Description: Based on Robin Hastings' Letterhead, and modifications by Ulysses Ronquillo, but with a three column layout. 
Author: Hakan Aydin 
Author URI: http://www.aydin.net/blog 
Version: 1.0

. 
CSS colors modified by Ulysses Ronquillo located at http://ulyssesonline.com. 
. 
This theme was originally designed and built by Robin Hastings, whose blog you will find at 
http://www.rhasting.net. It uses the default Kubrick theme as a base.

The CSS, XHTML and design is released under GPL: 
http://www.opensource.org/licenses/gpl-license.php 
. 
*/

/* Begin Typography & Colors */ 
body { 
font-size: 70%; /* Resets 1em to 10px */ 
font-family: Arial, Verdana, Helvetica, Sans-Serif; 
background-color: #FFFFFF; 
color: #000000; 
text-align: center; 
}

#page { 
background-color: white; 
text-align: left; 
}

#header { 
background-color: white; 
}

#content { 
font-size: 1.2em 
}

.widecolumn .entry p { 
font-size: 1.05em; 
}

.narrowcolumn .entry, .widecolumn .entry { 
line-height: 1.4em; 
}

.widecolumn { 
line-height: 1.6em; 
}

.narrowcolumn .postmetadata { 
text-align: center; 
}

.alt { 
background-color: white; 
border-top: 1px solid #ddd; 
border-bottom: 1px solid #ddd; 
}

#footer { 
background-color: white; 
}

small { 
font-family: Verdana, Arial, Helvetica, Sans-Serif; 
font-size: 0.9em; 
line-height: 1.5em; 
}

h1, h2, h3 { 
font-family: Arial, Verdana, Helvetica, Sans-Serif; 
}

h1 { 
font-size: 2.5em; 
font-weight: bold; 
text-align: center; 
text-transform: uppercase; 
letter-spacing: .2em; 
}

.description { 
font-size: 0; 
text-align: center; 
letter-spacing: .3em; 
left: -1000px; 
}

h2 { 
font-size: 1.7em; 
}

h2.pagetitle { 
font-size: 1.6em; 
}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited { 
color: #FF0000; 
}

h2 a:hover, h3 a:hover { 
color: #FF0000; 
background: #FFFFFF; 
text-decoration: underline; 
}

#sidebar h2 { 
font-family: Verdana, Arial, Sans-Serif; 
font-size: 1.2em; 
}

#sidebar2 h2 { 
font-family: Verdana, Arial, Sans-Serif; 
font-size: 1.2em; 
}

h3 { 
font-size: 1.3em; 
}

h1, h1 a, h1 a:visited, .description { 
text-decoration: none; 
color: #ff0000; 
}

h1 a:hover { 
text-decoration: none; 
color: #CC0000; 
background: #ff0000; 
}

.entry p a:visited { 
color: #FD5A1E; 
}

.commentlist li, #commentform input, #commentform textarea { 
font: 0.9em Verdana, Arial, Sans-Serif; 
}

.commentlist li { 
font-weight: bold; 
}

.commentlist cite, .commentlist cite a { 
font-weight: bold; 
font-style: normal; 
font-size: 1.1em; 
}

.commentlist p { 
font-weight: normal; 
line-height: 1.5em; 
text-transform: none; 
}

#commentform p { 
font-family: Verdana, Arial, Sans-Serif; 
}

.commentmetadata { 
font-weight: normal; 
}

#sidebar { 
font: 1em Verdana, Arial, Sans-Serif; 
} 
#sidebar2 { 
font: 1em Verdana, Arial, Sans-Serif; 
}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike { 
color: #666; 
}

code { 
font: 1.1em 'Courier New', Courier, Fixed; 
}

acronym, abbr, span.caps 
{ 
font-size: 0.9em; 
letter-spacing: .07em; 
}

a { 
color: #fd5a1e; 
text-decoration: none; 
}

a:hover { 
color: #FFFFFF; 
text-decoration: none; 
background: #CC0000; 
}

/* End Typography & Colors */

/* Begin Structure */ 
body { 
margin: 0; 
padding: 0; 
}

#page { 
background: transparent url(images/background.jpg) repeat-y top center; 
width: 920px; 
background-color: white; 
margin: 0 auto; 
padding: 0; 
}

#header { 
padding: 0; 
margin: 0 auto; 
height: 114px; 
width: 100%; 
background: transparent url(images/header.jpg) no-repeat top center; 
}

.narrowcolumn { 
float: left; 
padding: 0 0 20px 25px; 
margin: 0px 0 0; 
width: 460px; 
}

.widecolumn { 
padding: 10px 0 20px 0; 
margin: 5px 0 0 100px; 
width: 550px; 
}

.pagepost { 
margin: 0 0 40px; 
}

.post { 
margin: 0 0 40px; 
text-align: justify; 
}

.widecolumn .post { 
margin: 0; 
}

.narrowcolumn .postmetadata { 
padding-top: 5px; 
}

.widecolumn .postmetadata { 
margin: 30px 0; 
}

#footer { 
padding: 0 0 0 1px; 
margin: 0 auto; 
width: 899px; 
clear: both; 
}

#footer p { 
margin: 0; 
padding: 20px 0; 
text-align: center; 
} 
/* End Structure */

/* Begin Headers */ 
h1 { 
padding-top: 40px; 
margin: 0; 
}

.description { 
text-align: center; 
}

h2 { 
margin: 30px 0 0; 
}

h2.pagetitle { 
margin-top: 30px; 
text-align: center; 
}

#sidebar h2 { 
margin: 5px 0 0; 
padding: 0; 
} 
#sidebar2 h2 { 
margin: 5px 0 0; 
padding: 0; 
}

h3 { 
padding: 0; 
margin: 30px 0 0; 
}

h3.comments { 
padding: 0; 
margin: 40px auto 20px ; 
} 
/* End Headers */ 
/* Begin Lists

Special stylized non-IE bullets 
Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul { 
margin-left: 0px; 
padding: 0 0 0 30px; 
list-style: none; 
padding-left: 10px; 
text-indent: -10px; 
}

html>body .entry li { 
margin: 7px 0 8px 10px; 
}

.entry ul li:before, #sidebar ul ul li:before { 
content: "0BB 020"; 
}

.entry ol { 
padding: 0 0 0 35px; 
margin: 0; 
}

.entry ol li { 
margin: 0; 
padding: 0; 
}

.postmetadata ul, .postmetadata li { 
display: inline; 
list-style-type: none; 
list-style-image: none; 
}

#sidebar ul, #sidebar ul ol { 
margin: 0; 
padding: 0; 
}

#sidebar ul li { 
list-style-type: none; 
list-style-image: none; 
margin-bottom: 15px; 
}

#sidebar ul p, #sidebar ul select { 
margin: 5px 0 8px; 
}

#sidebar ul ul, #sidebar ul ol { 
margin: 5px 0 0 10px; 
}

#sidebar ul ul ul, #sidebar ul ol { 
margin: 0 0 0 10px; 
}

ol li, #sidebar ul ol li { 
list-style: decimal outside; 
}

#sidebar ul ul li, #sidebar ul ol li { 
margin: 3px 0 0; 
padding: 0; 
} 
/* End Entry Lists */

/* Begin Form Elements */ 
#searchform { 
margin: 10px auto; 
padding: 5px 3px; 
text-align: center; 
}

#sidebar #searchform #s { 
width: 115px; 
padding: 2px; 
background-color: #909090; 
border-style: ridge; 
}

#sidebar #searchsubmit { 
padding: 1px; 
background-color: #909090; 
}

.entry form { /* This is mainly for password protected posts, makes them look better. */ 
text-align:center; 
}

select { 
width: 130px; 
}

#commentform input { 
background: #ffffff; 
border: 1px solid #e9e9d9; 
color: #595949; 
font-size: 11px; 
margin: 0; 
padding: 0 10px; 
}

#commentform textarea { 
width: 100%; 
background: #ffffff; 
border: 1px solid #e9e9d9; 
color: #595949; 
font-size: 11px; 
margin: 0; 
padding: 2px; 
}

#commentform #submit { 
margin: 0; 
float: right; 
} 
/* End Form Elements */

/* Begin Comments*/ 
.alt { 
margin: 0; 
padding: 10px; 
}

.commentlist { 
padding: 0; 
text-align: justify; 
}

.commentlist li { 
margin: 15px 0 3px; 
padding: 5px 10px 3px; 
list-style: none; 
}

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

#commentform p { 
margin: 5px 0; 
}

.nocomments { 
text-align: center; 
margin: 0; 
padding: 0; 
}

.commentmetadata { 
margin: 0; 
display: block; 
} 
/* End Comments */

/* Begin Sidebar */ 
#sidebar 
{ 
padding: 20px 0 10px 0; 
margin-left: 730px; 
width: 160px; 
background-color: #FFFFFF; 
}

#sidebar form { 
margin: 0; 
}

#mailing-list { 
padding: 5px 10px 5px 10px; 
background: #fff url(images/mailinglist.jpg) no-repeat; 
}

/* End Sidebar */

/* Begin Sidebar2 */ 
#sidebar2 
{ 
padding: 20px 0 10px 0; 
margin-left: 20px; 
width: 160px; 
float: left;

}

#sidebar2 form { 
margin: 0; 
} 
/* End Sidebar2 */

/* Begin Various Tags & Classes */ 
acronym, abbr, span.caps { 
cursor: help; 
}

acronym, abbr { 
border-bottom: 1px dashed #999; 
}

blockquote { 
margin: 15px 30px 0 10px; 
padding-left: 20px; 
border-left: 5px solid #bde0f8; 
}

blockquote cite { 
margin: 5px 0 0; 
display: block; 
} 
hr { 
display: none; 
}

.center { 
text-align: center; 
}

a img { 
border: none; 
}

.navigation { 
display: block; 
text-align: center; 
margin-top: 60px; 
margin-bottom: 60px; 
}

#submit { 
background: #ffffff; 
border: 1px solid #e9e9d9; 
color: #595949; 
font-size: 11px; 
margin: 0; 
padding: 0 10px; 
}

.author { 
color: #000000; 
font-size: 23px; 
font-weight: normal; 
font-family: Arial, 'Lucida Sans', 'Lucida Sans Unicode', Helvetica, sans-serif; 
margin: 0; 
padding: 0; 
text-decoration: none; 
}

.date { 
color: #000000; 
font-size: 13px; 
font-family: Arial, 'Lucida Sans', 'Lucida Sans Unicode', Helvetica, sans-serif; 
letter-spacing: 0.09em; 
margin: 0; 
padding: 0 0 0 0px; 
}

/* separate list from subsequent content */ 
div.wrapper 
{ 
margin-bottom: 1em; 
}

ul#introboxbody { 
color: #595949; 
font-family: Arial, Verdana, Helvetica, Sans-Serif; 
font-size: 13px; 
margin: 10px 0 0 0; 
padding: 8px 8px 8px 8px; 
background: #f7f7f0; 
border: 1px solid #f0f0e0; 
position: relative; 
}

/* End Various Tags & Classes*/

/*- Menu Tabs --------------------------- */

#tabs ul, #tabs ul li { 
font-size:1.2em; 
font-weight: bold; 
list-style: none; 
margin: 0; 
padding: 0; 
}

#tabs ul { 
text-align: center; 
margin-top: 90px; 
}

#tabs ul li { 
display: inline; 
margin-right: 0; 
}

#tabs ul li.last { 
margin-right: 0; 
}

#tabs li a { 
padding: 5px 1em; 
}

#tabs ul li a:hover span { 
color: #FFFFFF; 
background: none; 
text-decoration: underline; 
}

Viewing 2 replies - 1 through 2 (of 2 total)

yosemite
(@yosemite)

19 years, 10 months ago

IE uses a non-standard box model. I recommend you change .narrowcolumn to:

.narrowcolumn { float: left; padding: 0; margin: 0 0 20px 45px; width: 460px; }

Then use a conditional comment in your header to call an <=IE6 stylesheet containing:

.narrowcolumn { float: left; padding: 0 0 20px 25px; margin: 0px 0 0; width: 460px; }

More details about the conditional comment method:
WordPress Troubleshooting: My blog looks horrible in IE!

And don’t forget to fix these:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flifecoachesblog.com%2F

Thread Starter alvinsoon
(@alvinsoon)

19 years, 10 months ago

That worked wonderfully, thank you 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Central column is straying’ is closed to new replies.

Central column is straying

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics