Internet Explorer display bug
-
Hi there,
I am writing regarding the blog located at http://www.brotherhoodworld.comFor some reason, the site looks perfect in Firefox, but in Internet Explorer (5, 6, and 7) the layout is all messed up…..my container div isn’t appearing and everything is left justified.
Does anyone have any idea how I can fix this?
Many thanks!
(here is my css code)
‘* {
padding: 0;
margin:0;
}
p {
margin: 0.7em 0;
line-height:1.6em;
}
dl {
margin:1em 0;
}
dt
{
font-weight:bold;
}
dd
{
margin:0.5em;
padding:0;
}
img
{
border-top:#ddd 1px solid;
border-right:#ddd 2px solid;
border-bottom:#ddd 2px solid;
border-left:#ddd 1px solid;
padding:2px;
}
a img {
border:0;
}
.clear {
clear:both;
height:20px;
}blockquote
{
color:#666;
margin: 1em;
padding: 0 0 10px 50px;
background: url(img/blockquote.gif) no-repeat left top;
}
fieldset
{
border:none;
}
body
{
background: #6A0000;
margin: 0;
font: 76%/1.6em verdana, tahoma, arial, sans-serif;
color: #333;
text-align: center;
}
a
{
text-decoration:none;
}
a:link, a:visited {
color: #000033;
}
a:hover, a:active {
border-bottom:#963 1px solid;
}
h1, h2, h3, h4, h5, h6
{
font-family:Georgia, Verdana, Arial, Serif;
}#container {
border: #ddd 1px solid;
background: #fff;
margin: 0 auto;
width: 820px;
position: relative;
text-align: left;
}
#navigation {
background: transparent;
margin: 20px auto 0;
overflow: hidden;
width: 760px;
position: relative;
text-align: left;
font-family:Tahoma, Verdana, Arial, Serif;
}
html #navigation {
height: 1%;
}
#navigation ul li {
float: left;
margin: 0 5px 0 0;
list-style-type: none;
}
#navigation ul li a {
border: #ddd 1px solid;
border-bottom:none;
padding: 0 10px 2px 10px;
display: block;
background: #ededed;
text-decoration: none;
}
#navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.current_page_item a {
background: #fff;
color: #333;
border: #ccc 1px solid;
border-bottom:none;
}
#navigation ul li.search {
font-size: 0.9em;
right: 0;
position: absolute;
top: 0;
}
#navigation ul li.search input#s {
border: #999 1px solid;
font-size: 0.9em;
width: 100px;
padding: 2px;
background:#fff;
}
#navigation ul li.search input#searchsubmit {
border: #999 1px solid;
font-size: 0.9em;
background: #e6e6e6;
margin: 0 0 0 2px;
color: #265e15;
padding: 2px;
}
#header {
clear: both;
float: right;
width: 125px;
margin-top: 10px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 5px;
}
#header h1
{
font-size:1.8em;
margin:10px 0 0 10px;
font-variant:small-caps;
letter-spacing:1px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#header h1 a {text-decoration:none;
border:none;
}
#header h2
{
margin:5px 0 0 10px;
font-size:1em;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:1px;
}
#feedarea {
text-align: right;
float: none;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0;
}
html #feedarea {
padding-top: 2px;
padding-bottom: 0px;
}
#feedarea dl dt {
display: inline;
margin-right: 5px;
height: 45px;
}
#feedarea dl dd {
display: inline;
margin-right: 5px;
height: 45px;
background:url(img/feed.png) no-repeat left center;
padding-left:16px;
}
#headercontainer {
width: 800px;
height: 295px;
}
#headerimage {
background: #fff url(img/test_banner.jpg) no-repeat 0 0;
clear: none;
color: #fff;
width: 800px;
height: 294px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
html #headerimage {
margin-top: 5px;
}
#content {
margin: 10px 10px 10px 30px;
}
html #content {
height: 1%;
}
#content h3 {
font-size: 1.4em;
font-weight:normal;
margin: 1em 0 0;
color: #265e15;
}
#content h4 {
font-size: 1.1em;
margin: 1em 0 0 0;
}
#content h5 {
font-size: 1em;
margin: 1em 0;
}
#content-main ul
{
margin:1em;
padding:0 1em;
list-style-image:url(img/bullet.png);
}
#content-main ul.asides
{
margin:0;
padding:2em;
border-bottom:#ddd 1px dashed;
}
#content ol
{
list-style-type:decimal;
margin:1em;
padding:0 1em;
}
#content-main {
float: left;
width: 520px;
margin-right: 20px;
}
html #section-index #content-main {
margin-right: 20px;
}
#content .post
{
padding:0 0 2em 0;
border-bottom:#ddd 1px dashed;
}
#content p img.right {
float: right;
margin:10px 0 0 10px;
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border:none;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}
#content p img.left {
float: left;
margin:0 10px 10px 0;
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border:none;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}
#content .post h2
{
font-size: 1.4em;
margin: 1em 0 0;
letter-spacing:1px;
font-weight:normal;
}
#content .entry
{
margin:1em 0;
padding-right:1em;
}
#content .entry a:link, #content .entry a:visited
{
border-bottom:#963 1px dashed;
}
#content .entry a:hover, #content .entry a:active
{
border-bottom:#963 1px solid;
}
#content .post-info , #content .postmetadata
{
font-size:0.9em;
color:#999;
margin:0;
padding:0;
}
#content .post-info
{
background:url(img/underline1.jpg) no-repeat left bottom;
padding-bottom:12px;
}
#sidebar {
float: left;
width: 200px;
font-size:0.9em;
}
#sidebar ul
{
list-style:none;
margin:0;
padding:0;
text-align: right;
}
#sidebar ul ul
{
list-style:none;
margin:0.5em 0 0 1em;
padding:0;
text-align: right;
}
li.sidebox {
padding:10px;
/*background: url(img/sideheadtop.gif) #ededed no-repeat left top; */
margin-bottom: 10px;
}
html li.sidebox {
padding-bottom: 10px;
text-align: right;
}
li.sidebox h2 {
font-weight: normal;
font-size: 1.6em;
text-align: right;
color: #242;
}
#sidebar li.sidebox p img {
float: left;
margin: 0 10px 10px 0;
text-align: right;
}#footer {
clear: both;
background: transparent;
margin: 0 auto;
width: 760px;
text-align: left;
}
html #footer {
height: 1%;
}
#footer p {
float: left;
width: 50%;
line-height: 1.2em;
}
#footer p.right {
float: right;
margin: 1em 0;
width: 50%;
text-align: right;
font-size: 0.9em;
color:#999;
}
#comments, #respond{
margin: 2em 0 0 5px;
}
#commentform
{
margin:10px 0;
padding:10px;
background:#f9fcfc;
border-top: #ddd 1px solid;
border-bottom: #ddd 1px solid;
}
.commentnum
{
font-size:1.5em;
}
#container .commentlist {
margin: 0;
padding: 0;
}
.commentlist li
{
list-style:none;
margin: 1em 0;
padding: 0.5em;
background:#f9fcfc;
border-top: #eee 1px solid;
border-bottom: #eee 1px solid;
}
.commentlist li.alt
{
background:#f9fcf9;
}
.commentlist li .cmtinfo
{
font-size:1em;
}
.commentlist li cite
{
font-style:normal;
font-weight:bold;
}
.commentlist li .cmtinfo em
{
float:right;
margin:0;
padding:0;
font-style:normal;
font-size:0.9em;
color:#999;
}
textarea, input.textbox {
padding:5px;
border: 1px solid #ccc;
padding:3px;
font:1em Verdana, Arial, Serif;
background:#f9f8f4;
}
textarea
{
height:20em;
width:80%;
}
textarea:focus, input.textbox:focus
{
border: 1px solid #999;
background:#fff;
}
.post h4
{
font-size:1em;
font-weight:normal;
font-family:Verdana, Tahoma, Arial, Serif;
}
.post h4 em
{
font-style:normal;
float:right;
font-weight:normal;
}
#header, #content, #sidebar, #footer, .widget {
overflow: hidden;
}’ -
Greets:
That’s not a blog hosted here at wp.com. You need to be over at http://wordpress.org/support as you’re running different software than we do here.
Some suggestions though:
– Don’t post the CSS unless asked for it. I would suggest making a link to the file.
– Define what you mean by “messed up.” Please remember that not everybody has IE installed on their computers.Good luck,
-drmike
- The topic ‘Internet Explorer display bug’ is closed to new replies.
WordPress.com Forums 