Margin & Alignment Issues in IE

Jun 24, 2008 10:33

I opted to work on another layout since I couldn't figure out how to get the sidebar text to align correctly on my other one, but now I'm having IE issues again with the new layout. It looks perfect in Firefox, as per usual, both when I view it on my paid account and the test journal (smart_spell, Plus Account). So I have two questions:

1) What do I need to add to my code for everything to line up correctly in IE?

2) How can I lessen the width of the calendar on my archive page while allowing the background color of the archive to extend 100% of the width without distorting the table? (I know this is partly because of the fact that background of my subcontent is transparent, but is there a way to do it while also still having my subcontent be "invisible"?)

Anyway, screenshots and code behind the cut (if my questions weren't necessarily clear):



Date Alignment

FF:


IE:


Tags Page

FF:


IE:


Archive

FF:



IE:


Friends Page

FF:



IE:



/* Cleaned CSS: */

body {
background-color: #333;
text-align: center;
color: #CCC;
font-family: "Georgia", sans-serif;
font-size: 8pt;
}

a, a:link, a:visited {
color: #E0D124;
text-decoration: none;
}

a:hover {
color: #F0823F;
text-decoration: line-through;
}

i {
color: #E0D124;
}

u, s {
color: #F0823F;
}

blockquote {
background-color: #444;
text-align: left;
padding: 15px;
border-color: #BD374C;
border-style: solid;
border-width: 1px 0 1px 0;
}

blockquote:hover {
border-color: #F0823F;
}

textarea {
width: 150px;
height: 50px;
padding: 15px;
background-color: #444 !important;
font-family: "Georgia", sans-serif;
font-size: 7pt !important;
color: #CCC;
}

code, kbd, pre, tt {
font-family: monospace;
}

h2 {
background-color: #444;
padding: 15px;
margin: 5px 0 -20px 0;
text-transform: lowercase;
font-style: italic;
font-weight: normal;
}

/*General Page Alignment & Width*/

#content {
width: 70%;
margin-left: auto;
margin-right: auto;
}

#maincontent {
width: 100%;
text-align: left;
}

#sidebar {
width: 100%;
height: 200px;
float: center;
margin: 15px 0 15px 0;
background-color: #c2cde0;
text-align: center;
display: none;
}

/*Header*/

#header {
width: 100%;
padding: 5px 0 5px 0;
text-align: right;
text-transform: uppercase;
letter-spacing: 2px;
color: #CCC;
}

.headerimage {
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #E0D124;
}

div#header a:hover, div#footer a:hover {
color: #F0823F;
}

.title {
display: none;
}

.subtitle {
display: none;
}

/*Header - Top Navigation*/

ul.navheader {
padding: 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

/*Entries*/

.subcontent {
background-color: transparent;
overflow-x: auto;
overflow-y: hidden;
}

.entry {
margin: 0 0 0 150px;
padding: 20px;
background-color: #555;
color: #CCC;
text-align: left;
}

.userpic {
position: relative;
float: left;
padding: 15px;
text-align: center;
border: 1px solid #444;
z-index: 15;
}

.date {
line-height: 100%;
margin: 0 0 -5px 0;
font-size: 7pt;
color: #555;
letter-spacing: 3px;
}

.subject {
font-size: 12pt;
font-style: italic;
color: #BD374C;
}

.subject a, .subject a:link, .subject a:visited {
color: #F0823F;
}

.subject a:hover {
color: #BD374C;
}

.datesubject {
margin: 0 0 0 150px;
padding: 5px;
background-color: #444;
text-align: right;
}

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

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

/*Tags*/

.ljtags {
position: relative;
top: 30px;
text-transform: lowercase;
}

.ljtaglist {
background-color: #555;
padding: 20px;
list-style: none;
}

/*Currents*/

.currents, .currentmood, .currentmusic, .currenttags {
text-transform: lowercase;
font-family: "Georgia", sans-serif;
font-size: 8pt;
}

.currentlocation {
display: none;
}

.currents strong {
font-weight: normal;
}

/*Entry - Comments*/

.comments {
margin: 15px 0 0 0;
text-align: center;
text-transform: uppercase;
clear: both;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #E0D124;
}

div.comments a:hover {
color: #F0823F;
}

/*Entry Separator*/

.separator {
height: 15px;
}

/*Friends Page*/

.userpicfriends {
position: relative;
float: left;
padding: 15px;
text-align: center;
background-color: transparent !important;
border: 1px solid #444;
z-index: 15;
}

.userpicfriends a font, .userpicfriends a:link font, .userpicfriends a:visited font {
color: #E0D124;
text-decoration: none;
}

.userpicfriends a:hover font {
color: #BD374C;
text-decoration: line-through;
}

/*Sidebar*/

.defaultuserpic {
position: relative;
float: left;
}

.sbarheader {
display: none;
}

.sbarbody {
float: center;
text-align: left;
display: none;
}

.sbarbody2 {
position: relative;
float: center;
margin: 0 0 0 115px;
text-align: left;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #E0D124;
}

div#sidebar a:hover {
color: #F0823F;
}

/*Sidebar - Calendar*/

table.calendar {
margin-right: auto;
margin-left: auto;
display: none;
}

.sbarcalendar {
border-color: #CCC;
border-width: 1px;
border-style: solid;
text-align: center;
display: none;
}

.sbarcalendarposts {
border-color: #CCC;
border-width: 1px;
border-style: solid;
background-color: #555;
text-align: center;
display: none;
}

/*Sidebar - Link Box Conents & Box Titles*/

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

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

li.sbartitle {
display: none;
}

/*Footer*/

#footer {
width: 100%;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
color: #CCC;
z-index: 15;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/*Archive Page*/

ul.year {
text-align: center;
padding: 20px;
background-color: #444;
}

ul.year li {
display: inline;
}

table.yeartable {
width: 100%;
margin-top: -10px;
margin-left: auto;
margin-right: auto;
padding: 15px;
background-color: #555;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #CCC;
}

table.yeartable td.yearday {
background-color: #444;
text-align: center;
}

td.yearmonth {
border-style: none;
}

/*Comment Pages*/

#qrform table {
border: 0 !important;
}

.datesubjectcomment {
background-color: #444;
text-align: center;
}

.userpiccomment {
position: relative;
float: left;
padding: 15px;
text-align: center;
z-index: 15;
}

.box {
margin: 0 0 0 150px;
clear: left;
}

input, textarea {
background-color: #555;
border: 1px solid #CCC;
font-family: "Georgia", sans-serif;
font-size: 7pt;
color: #CCC;
}

textarea.textbox {
background-color: #555 !important;
width: 350px !important;
font-size: 8pt !important;
padding: 15px !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Georgia", sans-serif;
font-size: 8pt;
line-height: 125%;
background-color: #555;
color: #CCC;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px 10px 10px 135px;
}

.commentbox {

border-color: #CCC;
border-style: solid;
border-width: 1px 0 1px 0;
padding: 10px;
margin: 10px;
background-color: #555;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #BD374C;
}

.datesubjectcomment a:hover {
color: #F0823F;
}

.commentboxpartial {
border: 1px solid #CCC;
padding: 10px;
margin: 10px;
background-color: #555;
}

.commentinfo {
background-color: #555;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: right;
color: #BD374C;
}

/*Tiny Icons*/

.ljuser img {
width: 0; height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/user_icon_yellow.gif);
padding: 12px 8px 0 2px !important;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width: 0; height: 0;
padding: 0 16px 16px 0;
background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/emblemreadonlyze3.png);
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {
width: 0; height: 0;
padding: 0 16px 16px 0;
background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/private.png);
}

.subject img[src="http://p-stat.livejournal.com/img/icon_groups.gif"] {
width: 0; height: 0;
padding: 0 16px 16px 0;
background: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/key.png);
}

/*User Icons*/

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/user_icon_yellow.gif);
padding: 12px 8px 0 2px !important;
}

/*Community Icons*/

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color: transparent;
background-image: url(http://i18.photobucket.com/albums/b149/lycanthropist/Layout/com_icon_yellow.gif);
padding: 14px 14px 0 2px !important;
}

/*Miscellaneous*/

.clear {
height: 15px;
}

lj and browser issues, date format, tags, stylesheet, entries

Previous post Next post
Up