Spacing problems in IE

Apr 16, 2009 12:41

This journal hello_layout is always a few (~8?) pixels too wide in IE, forcing a horizontal scrollbar on every page. It's fine in FF. How can I get rid of that extra space on the right side?

As well, the spacing of the header is messed up in IE: the margin-top of the page body is greater, cutting off part of the header image. And the header navigation items are pushed about 30px to the right, where in FF they are correctly left-aligned with the maincontent text.

Here is the code if you need it:

body {
min-width: 1024px;
margin: -17px auto -9px auto;
text-align: left;
color: #5C5C5C;
font-family: "Georgia", serif;
font-size: 11px;
background-color: #E5E9DC;
}

a, a:link, a:visited {
color: #FC4B47;
text-decoration: none; }
a:hover { color: #786FFF; }
a:active { color: #00EF90; }

blockquote {
margin: 8px 10px 0px 10px;
padding: 8px 8px 8px 8px;
background-color: #F8FAF3;
border-left: 1px solid #D7DAD9;
border-bottom: 1px solid #D7DAD9;
border-top: 1px solid #EBEEED;
border-right: 1px solid #EBEEED;
}

textarea {
background-color: #F8FAF3;
margin-left: 10px;
}

::-moz-selection {
background: #6F71E9;
color: #FFFFFF;
}

#content { padding-left: 0.7%; }

#maincontent {
margin-left: auto;
margin-right: 22%;
width: 56%;
border: 1px solid #CFD3C7;
min-width: 600px;
padding: 22px 4px 5px 4px;
background-color: #FFFFFF;
}

#header {
background-image: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/danror_header.jpg);
background-repeat: no-repeat;
background-position: top right;
height: 180px;
margin-left: auto;
margin-right: 22%;
width: 56%;
min-width: 600px;
padding: 0px 5px 0px 5px;
text-align: left;
background-color: #000000;
color: #F1F4F3;
display: block;
}

#sidebar {
border-left: 1px solid #F7F9F2;
border-bottom: 1px solid #F7F9F2;
color: #A5A6A5;
float: right;
margin-top: -179px;
padding-top: 60px;
width: 174px;
min-height:90px;
list-type: none;
letter-spacing: 0px;
font-size: 7pt;
}

#footer {
height: 100px;
margin-left: auto;
margin-right: 22%;
margin-top: -11px;
width: 56%;
min-width: 600px;
padding: 0px 5px 0px 5px;
text-align: left;
background-color: #000000;
color: #FFFFFF;
display: block;
}

div#header a, div#header a:link, div#header a:visited div#footer a, div#footer a:link, div#footer a:visited {
color: #FF4D3F;
text-align: center;
font-size: 11px;
line-height: 16px;
}

div#header a:hover, div#footer a:hover {
color: #786FFF; }
div#header a:active, div#footer a:active {
color: #00EF90; }

ul.navheader {
padding: 0px;
padding-top: 74px;
}

ul.navheader li {
list-style: none;
padding-left: 10px;
font-size: 17px;
}

li.view {
line-height: 32px;
padding-left: 10px;
}

.title { display: none; }
.subtitle { display: none; }

ul.navfooter {
padding: 0px;
padding-top: 10px;
}

#footer li {
list-style: none;
padding-left: 10px;
font-size: 17px;
}

#footer .viewing { line-height: 32px; }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited { color: #5C5C5C; }
div#sidebar a:hover { color: #786FFF; }
div#sidebar a:active { color: #00EF90; }

.defaultuserpic { text-align: center; }

.defaultuserpic img {
padding: 5px;
background-color: #DDE1D5 !important;
border: 1px solid #F7F9F2;
}

.sbarbody2 {
color: #5C5C5C;
font-size: 8pt;
padding: 8px 8px 8px 8px;
background-color: #DDE1D5;
border-bottom: 1px solid #F7F9F2;
border-top: 1px solid #F7F9F2;
}

ul.sbarlist {
margin: 0px;
padding: 0px;
list-style-type: none;
}

li.sbaritem {
letter-spacing: 0px;
font-size: 11px;
list-style-type: none;
border-bottom: 1px solid #F7F9F2;
border-top: 1px solid #F7F9F2;
margin: 0 0 -1px 2px;
text-align: right;
background-color: #DDE1D5;
}

li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited {
display: block;
line-height: 22px;
padding: 0px 8px 0px 8px;
}

li.sbaritem a:hover {
background: #FFFFFF;
padding: 0px 8px 0px 8px;
}

li.sbartitle {
color: #A5A6A5;
letter-spacing: 1px;
text-transform: lowercase;
font-size: 7pt;
text-align:right;
margin-top: 8px;
padding: 23px 7px 5px 7px;
list-style-type: none;
}

#sidebar_linklist {
list-style-type:none;
letter-spacing: 1px;
padding-top:10px;
}

#sidebar_summary { color: transparent; }

#sidebar_summary li.sbaritem {
padding: 3px 6px 3px 6px;
}

#sidebar_summary a {
display: inline;
line-height: 150%;
}

#sidebar_summary li.sbaritem:hover {
background-color: #FFFFFF;
}

#sidebar_summary li.sbaritem:hover a {
color: #786FFF;
}

#sidebar_summary a:hover {
background-color: transparent;
}

#sidebar_tags { }
#sidebar_calendar { }

.sbarbody { margin-left: -2px; }

table.calendar {
border-spacing: 0;
margin-left: 1px;
}

.sbarcalendar {
letter-spacing: 1px;
font-family: "Trebuchet MS", sans-serif;
font-size: 7pt;
padding: 5px 6px 5px 6px;
text-align: center;
border-bottom: 1px solid #F7F9F2;
border-left: 1px solid #F7F9F2;
}

.sbarcalendarposts {
letter-spacing: 1px;
font-family: "Trebuchet MS", sans-serif;
font-size: 7pt;
padding: 5px 6px 5px 6px;
text-align: center;
color: #FFFFFF;
background-color: #DDE1D5;
border-bottom: 1px solid #F7F9F2;
border-left: 1px solid #F7F9F2;
}

.sbarcalendarposts:hover {
background-color: #FFFFFF;
}

.subcontent {
margin-left: 10px;
margin-right: 10px;
margin-top: 25px;
position: relative;
-moz-border-radius: 2.5%;
}

ul.ljtaglist li {
padding-left: 15px;
list-style: none;
}

.entry {
font-family: "Georgia", serif !important;
padding-top: 20px;
font-size: 11px;
margin-right: 0px;
line-height: 150%;
}

.entry ul li {
padding-left: 0px;
margin-left: 0px;
}

.entry ol li {
padding-left: 0px;
margin-left: 0px;
}

.userpic {
position: absolute;
display: block;
float: left;
padding: 5px;
background-color: #FFFFFF !important;
border: 1px solid #CFD3C7;
text-align: center;
margin-top: 28px;
margin-left: -139px;
}

.userpicfriends {
position: absolute;
display: block;
float: left;
margin-top: 28px;
margin-left: -139px;
text-align: right;
font-size: 1px;
letter-spacing: -1em;
width: 100px;
color: transparent !important;
background-color: transparent !important;
line-height: 16px !important;
}

.userpicfriends a font {
letter-spacing: 1px;
text-transform: lowercase;
font-size: 7pt;
color: #A5A6A5;
margin-right: -13px;
margin-top: 6px;
}

.userpicfriends img {
padding: 5px;
margin-bottom: 14px;
background-color: #FFFFFF !important;
border: 1px solid #CFD3C7;
}

.date {
letter-spacing: 1px;
text-transform: lowercase;
font-size: 7pt;
padding-bottom: 8px;
color: #ABACAB;
}

.subject {
font-size: 19px;
letter-spacing: -1px;
}

.subject a, .subject a:link, .subject a:visited {
text-decoration: none;
}

.subject a:hover { color: #786FFF; }
.subject a:active { color: #00EF90; }

.datesubject {
padding-top: 3px;
padding-bottom: 2px;
border-bottom: 1px solid #7A7A7A;
}

.comments {
margin-top: 30px;
text-align: right;
color: transparent;
padding: 5px 0px 5px 0px;
position: relative;
clear: left;
text-transform: lowercase;
}

div.comments a, div.comments a:link, div.comments a:visited {
font-size: 17px;
letter-spacing: -1px;
padding-left: 12px;
}

div.comments a:hover { text-decoration: none; }

.datesubjectcomment {
background-color: #F3F5EE;
border-bottom: 1px solid #D7DAD9;
letter-spacing: 1px;
text-transform: lowercase;
font-size: 7pt;
color: #A5A6A5;
padding: 5px 0px 2px 0px;
}

.datesubjectcomment strong {
font-size: 17px;
font-weight: normal;
letter-spacing: -1px;
color: #5C5C5C;
text-transform: none;
line-height: 24px;
margin-right: -10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
font-size: 11px;
font-weight: bold;
letter-spacing: 0px;
color: #FC4B47;
}

.datesubjectcomment a:hover { color: #786FFF; }
.datesubjectcomment a:active { color: #00EF90; }

.userpiccomment {
margin: -6px 10px 5px -11px;
position: relative;
float: left;
padding: 5px;
background-color: #DDE1D5 !important;
border: 1px solid #D7DAD9;
}

.box {
margin-top: 20px;
padding: 10px;
clear: left;
font-size: 11px;
}

#qrform table {
margin: 18px auto 8px 0px;
color: #5C5C5C;
border:0px !important;
font-weight: normal;
letter-spacing: 0px;
text-transform: lowercase;
}
.replyform { }
.reply { }
.quickreply { font-size: 11px !important; }

input {
background-color: #F8FAF3;
}

input, textarea {
border: 1px solid #D7DAD9;
}

.replytosubject {
font-weight: normal;
}

.commentreply {
font-size: 11px;
position: relative;
margin-top: 16px;
color: #5C5C5C !important;
letter-spacing: 0px;
text-transform: none;
margin-right: 10px;
color: #A5A6A5;
}

.commentbox {
color: transparent;
padding-left: 10px;
text-transform: lowercase;
letter-spacing: 1px;
min-height: 110px;
background-color: #F8FAF3;
border-left: 1px solid #D7DAD9;
border-bottom: 1px solid #D7DAD9;
border-top: 1px solid #EBEEED;
border-right: 1px solid #EBEEED;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}

.commentboxpartial {
background-color: #F3F5EE;
border-left: 1px solid #D7DAD9;
border-bottom: 1px solid #D7DAD9;
border-top: 1px solid #EBEEED;
border-right: 1px solid #EBEEED;
letter-spacing: 1px;
text-transform: lowercase;
font-size: 7pt;
color: #A5A6A5;
padding: 6px 0px 6px 10px;
text-transform: lowercase;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}

.commentboxpartial a, .commentboxpartial a:link {
font-size: 11px;
letter-spacing: 0px;
}

.commentinfo {
display: none;
}

ul.year {
text-align: center;
padding-bottom: 40px;
font-size: 19px;
letter-spacing: -1px;
word-spacing: 20px;
margin-left: auto;
margin-right: auto;
}

ul.year a {
}

ul.year li {
display: inline;
}

table.yeartable {
text-transform: lowercase;
margin-left: auto;
margin-right: auto;
}

table.yeartable td.yeardate {
background-color: #F8FAF3;
border: 1px solid #D7DAD9;
font-family: "Trebuchet MS", sans-serif;
padding-right: 2px;
padding-left: 2px;
height: 45px;
}

table.yeartable td.yeardate a {
font-family: "Georgia", serif;
font-size: 19px;
letter-spacing: -1px;
margin-top: -5px;
}

table.yeartable td.yearday {
background-color: #F8FAF3;
border: 1px solid #D7DAD9;
width: 40px;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
}

td.yearmonth {
border: none;
padding-bottom: 14px;
}

.skiplinks {
color: #ABACAB;
font-size: 17px;
letter-spacing: -1px;
text-align: right;
text-transform: lowercase;
padding-right: 9px;
margin: -10px 0px 0px 0px;
}

.separator { height: 0px; }
.clearfoot { display: none; }

.ljtags {
text-align: left;
margin-top: 30px;
letter-spacing: 1px;
text-transform: lowercase;
font-size: 7pt;
color: #ABACAB;
}

.ljtags a { color: #ABACAB; }
.ljtags a:hover { color: #786FFF; }
.ljtags a:active { color: #00EF90; }

.currents {
text-transform: lowercase;
text-align: left;
letter-spacing: 1px;
font-size: 7pt;
color: #ABACAB;
}

.currents strong {
font-weight: normal;
text-decoration: none;
}

.currents a { color: #ABACAB; }
.currents a:hover { color: #786FFF; }
.currents a:active { color: #00EF90; }

.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 17px 18px 0px 0px;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/lock.gif) no-repeat scroll 0 0; }
.subject img[src="http://l-stat.livejournal.com/img/icon_groups.gif"] {
width: 0;
height: 0;
padding: 17px 18px 0px 0px;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/lock.gif) no-repeat scroll 0 0; }
li.sbaritem img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 14px 14px 0px 0px;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/lock_small.gif) no-repeat scroll 0 0; }
li.sbaritem img[src="http://l-stat.livejournal.com/img/icon_groups.gif"] {
width: 0;
height: 0;
padding: 14px 14px 0px 0px;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/lock_small.gif) no-repeat scroll 0 0; }
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 17px 18px 0px 0px;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/security.gif) no-repeat scroll 0 0; }
li.sbaritem img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0px 14px 14px 0px;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/security_small.gif) no-repeat scroll 0 0; }
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/reply.gif) no-repeat;
padding: 16px 15px 0px 0px !important; }
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/reply.gif)!important;
background-repeat: no-repeat!important;
padding: 16px 15px 0px 0px; }
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/reply2.gif)!important;
background-repeat: no-repeat!important;
padding: 16px 15px 0 2px; }
img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/symbol_multiplication.gif); }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/security.gif); }
img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/key.gif); }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/lock.gif); }
img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/lock_open.gif); }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/paperclip.gif); }
img[src="http://l-stat.livejournal.com/img/btn_tracking.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/error.gif); }
img[src="http://l-stat.livejournal.com/img/btn_edit.gif"] {
height: 0px;
width: 0px;
padding: 0px 0px 18px 16px !important;
background: url(http://i194.photobucket.com/albums/z181/goat_layout_bits/pencil2.gif); }

#lj_controlstrip { width: 100%;
margin-right: -2px; }
#lj_controlstrip td {
border-bottom: 1px solid #F7F9F2;
font-family: "Georgia", serif;
border-right: 0px solid #DDE1D5;
border-left: 1px solid #F7F9F2;
background-color: #DDE1D5; }
#lj_controlstrip_statustext {
color: #A5A6A5;
letter-spacing: 1px;
font-weight: normal;
font-size: 7pt; }
#lj_controlstrip a, #lj_controlstrip a:link, #lj_controlstrip a:visited {
font-family: "Georgia", serif;
color: #5C5C5C; }
#lj_controlstrip a:hover { color: #786FFF; }
#lj_controlstrip a:active { color: #00EF90; }

#lj_controlstrip .ljuser a b { color: #FC4B47; }
#lj_controlstrip_userpic { display:none; }
#lj_controlstrip_login { width: 340px; }

Thank you.

lj and browser issues, header and footer

Previous post Next post
Up