style_system | Transmogrified help

The last layout i attempted to make for DW looked alright and worked fine for me... but then a user found some problems that i really couldn't solve. I wanted to ask for help, if you would be able to test the layout for me (on various browsers etc) and maybe even teach me how to solve that fhsdjkgh problem D: I would love to keep making layouts for DW (i'm not as good with DW coding as i am with Lj uhg), and since i couldn't solve this problem, i haven't really wanted to touch DW CSS or anything... so please, help?

Thank you!

/*  Undine 
Transmogrified
By inconformista.dreamwidth.org */

* { box-sizing:border-box; -moz-box-sizing:border-box }

body {
        background-color: #FFFFFF;
background-image: url('');
background-repeat: repeat;
background-attachment: scroll;
        font-family: Helvetica;
	text-align: justify;
        font-size: 12px;
        margin-top: 20px;
        padding: 0;
    }

a, a:link, a:visited, a:active {
color: #54717C;
border-bottom: 0px;
text-decoration: none;
}

a:hover{
color: #989898;
border-bottom: 0px;
text-decoration: none;
}

blockquote {
background: #FFFFFF;
color: #868686;
font-style: italic;
font-family: Trebuchet MS, Helvetica, Arial;
padding: 3px;
}

#container {
       background: transparent;
       margin: 0 auto; 
       width: 700px; 
       text-align: justify; 
       padding: 0;
    }

#title {
       background: transparent;
       text-align: center;
        }

#header a {
	color: #97B6C1;
        font-style: italic;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
    }

#header h1 {
        margin: 0px;
	padding: 5px 0 0 0;
	color: #97B6C1;
        font-style: italic;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
	}

#header h2 {
	padding: 0 20px 20px 20px;
	color: #97B6C1;
        font-size: 11px;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
	}

h2#subtitle {
	color: #97B6C1;
        font-size: 11px;
        font-family: Georgia;
        text-transform: lowercase;
        font-weight: normal;
        text-decoration: none;
}

#wrap {
        margin: 0 auto;
        background: transparent;
        width: 100%;
	}

#content {
	margin: 0 0 0 200px;
        text-align: justify; 
        padding: 0;
        position: relative;
        float: right;
        background-color: #FFFFFF;
        z-index: 20;
        border: 1px solid #E3E3E3;
     }

.page-tags #content{
	border: 0px solid #739adf;
        padding: 10px;
        margin-top: 10px;
        width: 500px;
        color: #989898;
    }

.page-tags #wrap {
        margin: 0 auto;
        background: transparent;
        width: 100%;
	}
    
/* SIDEBAR */

.module-section-two {
position: absolute; 
top: 116px; 
width: 200px; 
float: left;
margin: 0 0 0 0; 
padding: 10px; 
color: #848484;
background: #E1ECEE; 
border-left: 5px solid #CEE1E3;
        /* this must stay at the bottom of this code as in some circumstances
        it closes one declaration and opens another one */
        margin-left: 0px;
    }

.module-section-two .module {
   
    }

.module-credit {
        display: none;
}

.module-syndicate {
        display: none;
}

.module-section-one li {
        display: inline;
        list-style: none;
    }
    .module-section-one ul {
        background-color: transparent;
        color: #FFFFFF;
        margin-top: 5px;
        padding: 15px;
        text-align: center;
    }

.module-section-one li a {
        text-decoration: none;
        padding-top: 0.5em;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 0.5em;
        font-family: Georgia;
        font-size: 11px;
        text-transform: lowercase;
        background-color: #E7EEEF;
        color: #93B0BB;
        border-right: 4px solid #CEE1E3;
    }

.module-section-one ul li a:hover, .module-section-one ul li.active a {
        background-color: #ECF4F5;
        color: #97B6C1;
        border-right: 4px solid #97B6C1;
    }

.module-section-two h2 a {
        color: #848484;
    }

.module-section-two .module-header a {
        text-decoration: none;
    }

.module-section-two h2 {
	margin: 0;
        margin-bottom: 7px;
	font-size: 13px;
        font-family: Trebuchet MS, Helvetica, Arial;
        letter-spacing: 2px;
        font-weight: normal;
	padding: 0.2em;
	background-color: transparent;
	color: #848484;		
	}

.module-typelist li {
        padding-bottom: 2px;
}

.module-typelist li a, .module-typelist li a:link, .module-typelist li a:visited, .module-typelist li a:active {
        display: block;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        text-decoration: none;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 10px;
        background-color: #E7EEEF;
        color: #97B6C1;
        border-right: 4px solid #CEE1E3;
}

.module-typelist li a:hover {
        display: block;
        text-decoration: none;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        font-size: 10px;
        text-transform: uppercase;
        background-color: #ECF4F5;
        color: #97B6C1;
        border-right: 4px solid #97B6C1;
}
    .module-section-two ul {
		list-style-type: none;
		margin-left: 0.5em;
		padding: 0;
	}
	.module-section-two ul ul {
		list-style-type: none;
		margin-left: 0.5em;
		padding: 0.5em;
	}

.module-userprofile .userpic img {
        border: none;
        margin: 2px;
    }
    .module-userprofile .userpic {
        text-align: center;
    }
    .module-userprofile ul {
        margin: 0px;
        padding: 0px;
        text-align: center;
        margin-top: 5px;
    }
    .module-userprofile p {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .module-userprofile li {
        display: inline;
        padding: 5px;
        list-style: none;
    }
    .module-calendar {
        text-align: center;
    }
    .module-calendar table {
        margin-left: auto;
        margin-right: auto;
    }
    .entry {
    float: right;
    width: 100%;
}

.entry-poster {
}

.entry, .text_noentries_day {
        padding: 10px;
        margin-top: 46px;
        position: relative;
        margin-bottom: 10px;
    }
    .entry .userpic a {
        display: block;
        position: absolute;
        right: -6px;
        top: -43px;
        padding: 5px;
    }

.entry .userpic img, .comment .userpic img {
        border: none;
    }
    .entry-title {
        padding: 0.2em;
        margin-top: -10px;
    }

.comment-title {
        padding: 0.2em;
    }

.entry-title a, .comment-title a {
        text-decoration: none;
    }

.entry-wrapper, .entry-wrapper-even {
min-height: 120px;
}

.entry-wrapper-odd {
min-height: 120px;
}

.entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day {
        background-color: transparent;
        color: #989898;
    }
    .entry-wrapper-odd .userpic a {
        background-color: #EBE7CC;
        border-right: solid 6px #97B6C1;
    }
    .entry-wrapper-odd .entry-title {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }

.entry-wrapper-odd .entry-title a {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }

.entry-wrapper-even .entry, .comment-wrapper-even .comment {
        background-color: #ffffff;
        color: #989898;
    }

.entry-wrapper-even .userpic a {
        background-color: #EBE7CC;
        border-right: solid 6px #97B6C1;
    }

.entry-wrapper-even .entry-title {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }
    .entry-wrapper-even .entry-title a {
        border: solid 0px #E2DAB4;
        color: #97B6C1;
        background-color: #FFFFFF;
        font-family: Trebuchet MS, Helvetica, Arial;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: normal;
    }

.entry .time, .entry .date {
        padding: 0.2em;
        display: inline-block;
    }

.datetime {
    }

.entry-content {
        padding: 10px 0px;
    }

.tag {
        font-weight: bold;
        text-align: left;
    }
    .tag a {
        font-weight: normal;
    }
    .tag ul { display: inline; margin: 0; padding: 0; }

.tag li {
        display: inline;
        list-style: none;
        padding: 0px;
    }
    .tag li:before {
        content: " ";
    }
    .tag li:first-child:before {
        content: " ";
    }
    *+html .tag li {
        padding: 0 5px;
    }

.entry .metadata ul {
        margin: 0px;
        padding: 0px;
    }
    .entry .metadata li {
        list-style: none;
    }
    .entry .footer .inner, .comment .footer .inner {
        text-align: right;
    }
    .entry .footer a {
        clear: both;
    }

.entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {
        text-align: right;
        margin: 0;
        padding: 0;
        display: inline;
        font-size: 14px;
    }
.entry-interaction-links a, .entry-interaction-links a:link, .entry-interaction-links a:visited {
        color: #97B6C1;
}

.entry-management-links a, .entry-management-links a:link, .entry-management-links a:visited {
        color: #97B6C1;
}

.entry-management-links a:hover, .entry-interaction-links a:hover {
        color: #989898;
}

.entry-management-links li, .entry-interaction-links li, 
    .comment-management-links li, .comment-interaction-links li {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 0px;
    }
    /* lets have a default */
    .entry-management-links li a, .comment-management-links li a,
    .comment-interaction-links .thread a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/permalink.gif);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        padding-left: 14px;
    }

.entry-management-links .edit_entry a, .comment-management-links .delete_comment a,
    .comment-management-links .edit_comment a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/edit.gif);
    }
    .entry-management-links .edit_tags a, .comment-interaction-links .parent a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/tag.gif);
    }
    .entry-management-links .mem_add a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif);
display: none;
    }

.entry-management-links .watch_comments a,
    .comment-management-links .watch_thread a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif);
display: none;
    }

.entry-management-links .link_prev a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/previous.gif);
    }
    .entry-management-links .link_next a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/next.gif);
    }
    .entry-interaction-links li a,
    .comment-interaction-links li a { 
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/comment.gif);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        padding-left: 14px;  
        display: inline;
    }

.entry-management-links .tell_friend a { 
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/comment.gif);
        background-repeat: no-repeat;
        background-position: 0% 50%;
        padding-left: 14px;  
        display: none;
    }

.comment-management-links .delete_comment a {
        background-image: url(http://s.dreamwidth.org/stc/transmogrified/delete.gif);
    }

.entry .footer hr {
        display: none;
    }

.entry .metadata-label {
        font-weight: bold;
    }
    .comment-poster {
        display: inline-block;
    }

#content > hr { display: none; }

.module-section-three {
        display: none;
    }

.module-section-three .module {
        padding-left: 20px;
    }

.hfeed .navigation {
    }

.navigation {
		margin: 0;
		padding: 10px;
		text-align: center;
		border: 0px solid #739adf;
		background-color: transparent;	
		color: #848484;	
	}

.navigation ul {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .navigation li {
        display: inline;
        padding: 0 5px;
    }
    .navigation .page-back a:before {
        content: "";
        font-size: 0.5em;
        letter-spacing: 0px;
        vertical-align: 40%;
        padding-right: 1px;
    }
    .navigation .page-forward a:after {
        content: "";
        font-size: 0.5em;
        letter-spacing: 0px;
        vertical-align: 40%;
        padding-left: 1px;
    }

.page-tags #content h2 {
        padding: 0.2em;
        margin: 0;
        border: solid 0px #739adf;
        color: #FFFFFF;
        background-color: #CEE1E3;
        font-size: 1.2em;
        margin-bottom: 20px;
        font-size: 16px;
        font-family: Trebuchet MS, Helvetica, Arial;
        font-weight: normal;
    }

.page-tags #content h2 {
        margin-right: 10px;
    }

.month-wrapper, #archive-month dl {
        padding: 10px;
        position: relative;
        color: #989898;
        margin: 20px 0px;
        width: 500px;
        border: solid 0px #739adf;
        background-color: #ffffff;
    }

.month-wrapper h3 {
        padding: 0.2em;
        margin: 0;
        border: solid 0px #739adf;
        color: #FFFFFF;
        background-color: #CEE1E3;
        font-size: 16px;
        margin-bottom: 20px;
        font-family: Trebuchet MS, Helvetica, Arial;
        font-weight: normal;
    }

.month caption {
        display: none;
    }
    .month .day span, .month .day p {
        padding: 0;
        margin: 0;
    }
    .month .day p {
        margin-top: 4px;
        margin-bottom: -4px;
    }
    .month .day, .month th {
        line-height: 2em;
        vertical-align: text-top;
        padding: 5px;
        text-align: center;
    }
    /* IE only to line up the empty days neatly */
    *+html .month .day span, *+html .month th span{
        vertical-align: 100%;
    }
    .month .day-has-entries {
        line-height: 1em;
    }
    .month .footer {
        width: 250px;
        text-align: center;
        margin: 10px 0px;
    }

#postform {
        background:#fff; 
        border:1px solid #dfdfdf;
        margin:20px 0; 
        padding:20px;}

.text_noentries_day {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .comment {
	border:1px solid #dfdfdf;
	padding:4px;
	position:relative;
	margin-bottom:20px;
        min-height: 150px;
}

#archive-month dt {
        font-weight: bold;
    }
    #archive-month .entry-title {
        font-size: 10pt;
        display: inline-block;
        padding-left: 5px;
    }

#comments {
padding: 8px; 
float: left;
margin: 3px;
min-height: 150px; 
background: #fff; 
width: 500px;
}

.comment-content { 
margin: 0 0 0 120px;
line-height: 120%; 
text-align: left;

}

#qrdiv table, #qrformdiv table, form #qrform{
border: 0px solid #000000!important;
}

.comment .userpic {
margin: 0 10px 10px 10px; 
float: left;
}

.comment .footer {
margin: 20px 0 0 0; 
padding: 0; 
text-align: left;
}

.bottomcomment {
float: right;
}

Flat | Top-Level Comments Only

It looks good!

To separate the entries you can give a margin-bottom to .entry-wrapper or give a height to #content .separator-after. .separator-after is used in other places other than between entries, so it's best to specify.

If you need further help, let me know.

Also, if you are using Firefox I recommend the Web Developer add-on. It's the coolest thing ever, when it comes to CSS. I've been using it to help people out with css problems and to help myself as well.

Transmogrified help

no subject