style_system | browser issues

I've been working on customizing my journal layout. It's the Transmogrified style, though I've modified the css. (I haven't used any layers yet, just worked through the customize journal style wizard).

EDIT:
I've got the layout nearly up to scratch; the only problem is the userpics. They display bigger than they should be in IE and Safari, and I can fix it in IE by specifying a 100x100 width under *+html .userpic, etc (which in firefox makes the border/background too small to cover the picture, and messes it up in general). But I still can't fix it in Safari, so is there a better way to fix it? I tried adjusting the size with min-width and min-height attributes as suggested, but that didn't seem to help either, unfortunately..

body {
font-family: arial, sans-serif;
font-size: 8pt;
line-height: 1.2em;
margin: 0;
padding: 0;
background: #4E4357;
color: #4E4357;
text-align: justify;
}

#container {
background: #4E4357;
margin: 0 auto 0 auto;
padding: 0 0 20px 0;
width: 860px;
}

img {
max-width: 440px;
}

.lj_embedcontent {
max-width: 440px;
}

hr {
border: 1px solid #8D7A9E;
height: 1px;
color: #4E4357;
}

/* text, links */

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

a:hover {
color: #E87DA8;
text-decoration: none;
}

.ljuser a, .ljuser b {
color: #E87DA8;
font-weight: normal;
text-decoration: none;
}

.ljuser a:hover, .ljuser b:hover {
color: #D7B9ED;
}

i, em, u, s, b, strong {
color: #8D7A9E;
font-family: arial, sans-serif;
font-size: 8pt;
font-weight: normal;
}

code, pre, kbd, tt {
font-family: "Courier New", Courier, monospace;
font-size: 11px;
margin: 10px 20px 10px 20px;
padding: 0;
color: #8D7A9E;
}

blockquote {
margin: 0 30px 0 30px;
border: 1px dotted #8D7A9E;
padding: 15px;
color: #4E4357;
}

textarea {
font-family: arial, sans-serif;
font-size: 8pt;
background: #ffffff;
color: #4E4357;
padding: 5px;
border: 1px solid #8D7A9E;
margin: 10px 0 10px 0;
}

input, select {
font-family: arial, sans-serif;
font-size: 8pt;
background: #ffffff;
color: #4E4357;
padding: 2px;
border: 1px solid #8D7A9E;
}

h1, h2, h3, h4 {
font-weight: normal;
}

.entry ul, .entry ol {
margin: 0 30px 0 30px;
padding: 15px;
color: #4E4357;
}

.entry ul li {
list-style: circle;
}

/* header, footer, navigation */

h1#title {
font-family: arial, sans-serif;
font-size: 8pt;
font-weight: normal;
text-align: left;
color: #4E4357;
margin: 15px 0 15px 165px;
background: #ffffff;
padding: 15px;
display: none;
}

h1#title:hover {
color: #4E4357;
}

.navigation {
margin: 15px 0 -5px 165px;
border: none;	
color: #4E4357;	
font-family: arial, sans-serif;
font-size: 8pt;
}

.navigation ul {
margin: 10px 10px 0 0;
padding: 15px;
text-align: left;
list-style: none;
background: #ffffff;
}

.navigation li {
display: inline;
padding: 0 5px;
list-style: none;
}

.navigation .page-back a:before {
letter-spacing: 0px;
padding: 1px;
}

.navigation .page-forward a:after {
letter-spacing: 0px;
padding: 1px;
}

li.page-separator {
display: none;
}

/* entries */

#content {
margin: 0;
float: left;
padding: 0;
width: 695px;
}

.entry {
padding: 10px;
margin: 30px 0 15px 0;
border: none;
color: #4E4357;
}

.entry h3.entry-title {
font-family: arial, sans-serif;
font-size: 8pt;
font-weight: normal;
padding: 0;
margin: 0 0 0 15px;
}

.entry-content {
background: #ffffff;
padding: 30px;
margin: -170px 0px 0px 155px;
min-height: 200px;
}

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

.entry .datetime {
margin: 0 0 0 12px;
}

.entry .header {
margin: -20px 0px 15px 155px;
background: #ffffff;
padding: 15px 30px;
}

.entry .header img {
margin: 0 0 0 -20px;
}

.page-entry .header {
margin: -25px 0px 20px 155px;
}

.page-entry .entry-content {
margin: -150px 0px 0px 155px;
}

.page-read .entry-content {
margin: -160px 0px 0px 155px;
}

.page-reply .entry-content {
margin: -150px 0px 0px 155px !important;
}

.page-reply .entry-poster {
margin: -35px 0 0 10px !important;
}

.entry-poster {
display: block;
width: 130px;
margin: -20px 0 0 10px !important;
text-align: center;
line-height: 1.4em !important;
color: #D7B9ED;
}

/* metadata, tags, skiplinks */

.tag {
font-weight: normal;
text-align: left;
margin: 0 0 10px 0;
padding: 0;
}

.tag ul { 
display: inline;
margin: 0; 
padding: 0; 
}

.tag li {
display: inline;
list-style: none;
padding: 0;
}

.metadata {
margin: 15px 0 0 155px;
background: #ffffff;
padding: 15px 30px 15px 30px;
line-height: 1.4em;
}

.metadata img {
display: none;
}

.entry .footer {
background: #ffffff;
margin: 15px 0 0 155px;
padding: 15px 30px 15px 30px;
}

.entry .metadata ul {
margin: 0;
padding: 0;
}

.entry .metadata li {
list-style: none;
}

.entry .metadata-label {
font-weight: normal;
}

.entry-management-links, .entry-interaction-links {
margin: 0 !important;
padding: 0 !important;
display: inline;
}

.entry-management-links li, .entry-interaction-links li {
display: inline;
list-style: none;
}

.entry .footer a {
white-space: nowrap;
}

hr.above-entry-interaction-links, hr.below-reply-container {
display: none;
}

/* comments */

.page-reply .entry-content {
margin: -182px 0px 0px 155px;
}

.page-reply .entry .header {
margin: -25px 0px 15px 155px;
}

#postform {
margin: -10px 0 0 165px;
border: none;
text-align: left;
}

#postform table.talkform { 
border: 0 !important;
margin: 10px 10px 10px 0;
background: #fff;
padding: 15px 30px 15px 25px;
}

#postform div#userpics {
padding: 7px 0 5px 0;
}

#postform textarea.textbox {
margin: 0 0 7px 0;
}

#postform td span {
font-size: 8pt !important;
font-style: normal !important;
}

#postform img {
display: none;
}

.comment-management-links, .comment-interaction-links {
text-align: right;
margin: 0;
padding: 0;
display: inline;
}

.comment-management-links li, .comment-interaction-links li {
display: inline;
list-style: none;
margin: 0 5px 0 0;
padding: 0;
}

.bottomcomment {
display: none;
}

.inner span.multiform-checkbox {
display: none;
}

#comments {
border: none;
color: #4E4357;
margin: -10px 0 0 165px;
}

div.comment#comment- {
margin: 15px 10px 15px 165px;
}

div.comment#comment- span.datetime {
margin: 0 0 0 100px;
}

.comment {
background: #FFFFFF;
padding: 15px 30px;
margin: 0 10px 15px 0;
}

.comment-title, .comment-wrapper-odd .comment-title, .comment-wrapper-even .comment-title {
padding: 0 0 15px 0;
border: none;
color: #4E4357;
background: transparent;
}

.partial .comment-title {
display: inline;
}

.comment-content {
margin: 0;
padding: 15px 0 15px 0;
min-height: 75px;
}

.comment-poster, .poster-ip {
display: list-item;
list-style: none;
min-width: 40%;
}

.comment-poster {
margin-top: -89px;
}

.comment-title {
margin: 30px 0 0 -155px;
padding: 0;
}

.comment .datetime {
margin: 0 0 0 -155px;
}

div.ljcmtmanage { 
color: #4E4357; 
background: #ffffff; 
border: 1px solid #8D7A9E; 
padding: 10px;
margin: 5px 0 0 150px;
width: 250px !important;
}

div.ljcmtmanage label {
font-size: 8pt;
}

div.ljcmtmanage input {
margin: 5px 0px;
}

div.ljcmtmanage span {
margin: 5px 0px;
}

#qrform img {
display: none;
}

form#qrform {
color: #4E4357 !important;
background: ;
border: 1px solid #8D7A9E;
margin: 15px 0;
padding: 15px 0 5px 0;
}

#qrform table { 
border: 0 !important;
margin: 0 20px 0 0;
padding: 0px 10px 15px 10px;
}

form#qrform table {
border: 0 !important;
}

form#qrform td:first-child {
padding: 7px 3px;
}

textarea.textbox {
width: 100% !important;
}

input.textbox#subject {
width: 100%;
}

div.ljedittime {
padding: 10px 0 0 0;
}

div.ljedittime .datetime {
margin: 0;
}

/* userpics */

.entry .userpic {
padding: 0;
margin: 0 0 40px 10px;
width: 130px;
height: 130px;
}

.comment .userpic {
margin: -55px 0 0 -175px !important;
padding: 0;
background: 0;
width: 130px;
height: 130px;
}

.page-read .userpic, .page-entry .userpic {
margin: 0 0 24px 10px;
}

.entry .userpic a, .comment .userpic a, .entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a, .entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a {
padding: 0px 2px 0px 0px;
display: block;
width: 130px;
height: 130px;
}

.entry .userpic img, .comment .userpic img {
border: #ffffff 15px solid;
width: 100%;
height: 100%;
}

/* tags page */

.tags-container {
border: none;
padding: 15px;
margin: 15px 10px 0 165px;
background: #ffffff;
list-style: none;
}

.tags-container ul {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}

.tags-container div.manage-tags-link {
margin: 10px 0 0 0;
}

.page-tags #content h2 {
padding: 0;
margin: 0 0 15px 0;

border: none;
color: #4E4357;
background: transparent;
font-weight: normal;
font-size: 8pt;
font-family: arial, sans-serif;
}

/* modules, sidebar, navigation */

.module {
border: none;
color: #4E4357;
}

.module-content {
padding: 0;
margin: 0;
}

ul.module-list {
list-style: none;
display: inline;
padding: 0;
margin: 0;
}

h2.module-header {
border: none;
color: #4E4357;
font-weight: normal;
font-size: 8pt;
font-family: arial, sans-serif;
margin: 0;
padding: 0;
}

.module-section-one {
}

.module-navlinks {
padding: 0;
margin: 0;
text-align: right;
background: transparent;
font-family: arial, sans-serif;
font-size: 8pt;
background: #ffffff;
margin: 15px 0 0 165px;
padding: 15px;
}

.module-navlinks ul li {
display: inline;
padding: 5px;
margin: 0;
}

.module-section-two {
width: 160px;
float: right;
position: ;
margin: 15px 0 0 0;
text-align: left;
}

.module-userprofile {
text-align: center;
padding: 15px;
margin: 0 0 15px 0;
background: #ffffff;
}

.module-userprofile .userpic img {
border: none;
margin: 0;
padding: 0;
}

.module-userprofile .userpic {
border: none;
padding: 0;
margin: 0 auto 0 auto;
width: 100px;
}

.module-userprofile h2.module-header {
padding: 0 0 10px 0;
}

.module-userprofile ul {
margin: 5px 0 0 0;
padding: 0;
text-align: center;
}

.module-userprofile ul li {
display: inline;
}

.journal-website-name, .journal-name {
text-align: center;
}

.journal-name {
padding: 10px 0 0 0;
}

.module-calendar {
text-align: center;
padding: 15px;
margin: 0 0 15px 0;
background: #ffffff;
}

.module-calendar table {
margin: 10px auto 0 auto;
padding: 0;
}

.module-calendar td {
padding: 1px;
font-family: arial, sans-serif;
font-size: 8pt;
text-align: center;
}

.module-calendar th { 
color: #4E4357; 
font-weight: normal; 
font-size: 8pt; 
background: ; 
border: 1px solid #8D7A9E; 
text-align: center;
padding: 1px;
font-family: arial, sans-serif;
}

.module-calendar td.empty-day { 
font-weight: normal; 
border: 1px solid #8D7A9E; 
color: #4E4357; 
text-align: center;
}

.module-calendar td.entry-day { 
font-weight: normal; 
border: 1px solid #4E4357; 
background: #4E4357; 
text-align: center;
}

.module-calendar td.entry-day a { 
color: #D7B9ED; 
}

.module-pagesummary {
text-align: ;
padding: 15px;
margin: 0 0 15px 0;
background: #ffffff;
}

.module-pagesummary h2.module-header {
margin: 0 0 10px 0;
}

.module-tags_list {
text-align: ;
padding: 15px;
margin: 0 0 15px 0;
background: #ffffff;
}

.module-tags_list h2.module-header {
margin: 0 0 10px 0;
}

.module-syndicate {
text-align: ;
padding: 15px;
margin: 0 0 15px 0;
background: #ffffff;
}

.module-syndicate h2.module-header {
margin: 0 0 10px 0;
}

.module-typelist {
text-align: ;
padding: 15px;
margin: 0 0 15px 0;
background: #ffffff;
}

.module-typelist h2.module-header {
margin: 0 0 10px 0;
}

.module-customtext {
text-align: ;
padding: 15px;
margin: 0 0 15px 0;
background: #ffffff;
}

.module-customtext h2.module-header {
margin: 0 0 10px 0;
}

.module-section-three {
text-align: center;
margin: 20px 0 0 auto;
background: #ffffff;
padding: 5px;
width: 175px;
display: none;
}

/* archive pages */

.month-wrapper {
padding: 15px;
margin: 15px 10px 0 165px;
border: none;
background: #ffffff;
}

.month-wrapper h3 {
padding: 5px 0 15px 0;
margin: 0 auto 0 auto;
border: none;
color: #4E4357;
font-weight: normal;
font-family: arial, sans-serif;
font-size: 8pt;
text-align: center;
}

.page-archive .navigation {
margin: 15px 0 0 165px;
}

.month td {
width: 30px;
border: 1px solid #8D7A9E;
}

.month th { 
color: #4E4357; 
font-weight: normal; 
background: ; 
text-align: center; 
margin: 0; 
text-transform: normal; 
padding: 5px;
border: #8D7A9E 1px solid;
}

.month td.day { 
font-weight: normal; 
color: #4E4357; 
padding: 5px;
}

.month td.day-has-entries { 
font-weight: normal; 
color: #4E4357; 
}

.month td.day-has-entries p { 
padding: 0 0 0 5px; 
margin: 0; 
display: inline; 
}

.month table { 
width: 335px; 
border: 1px solid #8D7A9E; 
margin: auto; 
}

.month caption { 
display: none; 
}

.month .footer {
text-align: center;
margin: 15px 0px 0px 0px;
font-family: arial, sans-serif;
font-size: 8pt;
}

#archive-month dl {
padding: 15px 30px;
margin: 20px 10px 0 165px;
border: none;
background: #ffffff;
}

#archive-month dt, #archive-month dd {
font-weight: normal;
}

#archive-month dt {
font-family: arial, sans-serif;
font-size: 8pt;
padding: 0 0 10px 10px;
}

#archive-month dd {
margin: 0;
padding: 0;
line-height: 1.5em;
}

#archive-month .entry-title {
font-size: 8pt;
font-family: arial, sans-serif;
display: inline;
padding: 0 0 10px 0;
}

#archive-month .entry-poster {
margin: 0 0 0 5px;
}

#archive-month .tag {
}

#archive-month dd img {
display: none;
}

#archive-month span.time {
padding: 0 0 20px 0;
display: block;
}

h3.day-date {
font-weight: normal;
background: #fff;
margin: 20px 0 -5px 165px;
padding: 15px;
font-size: 8pt;
text-align: center;
display: none;
}
	
/* for IE */

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

/* IE only to line up the empty days neatly */
*+html .month .day span, *+html .month th span{
vertical-align: 100%;
}

*+html .tag li {
padding: 0 1px;
}
	
/* contextual popups */

div.ContextualPopup { 
position: relative; 
margin: 10px 0px 0px 10px; 
text-align: left; 
font: normal 8pt arial, sans-serif !important; 
color: #4E4357; 
line-height: 1.4em; 
}

div.ContextualPopup div.Inner {  
color: #4E4357 !important; 
border: 1px solid #4E4357; 
background: #FFF !important; 
padding: 10px; 
width: 220px;
}

div.ContextualPopup .Userpic { 
border: none; 
background: #FFF !important; 
margin: 0 0 0 10px;
}

div.ContextualPopup .Content {  
font-weight: normal;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {  
text-decoration: none !important;
font-weight: normal;
}

div.ContextualPopup div.Inner a:hover {
text-decoration: none !important;
font-weight: normal;
}

div.ContextualPopup .Relation { 
font-weight: normal !important;
}

/* tiny icons */

img[src="http://s.dreamwidth.org/img/silk/profile/subscription_add.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/subscribe.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/subscription_remove.png"] {
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/unsubscribe.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/access_grant.png"] {
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/grant_access.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/access_remove.png"] {
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/remove_access.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/community_join.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/grant_access.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/community_leave.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/remove_access.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/track.png"] {
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/track_user.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/post.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/post_entry.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/profile/message.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/message.png'); }

img[src="http://s.dreamwidth.org/img/silk/profile/tellafriend.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/tell_friend.png'); 
}

.entry-management-links img, .entry-interaction-links img {
display: none;
}

img[src="http://s.dreamwidth.org/img/silk/entry/locked.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/friendslocked.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/entry/filtered.png"] {
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/filtered.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/entry/private.png"] { 
width: 0; 
height: 0; 
padding: 16px 16px 0px 0px; 
background: url('http://i279.photobucket.com/albums/kk122/roxiesblues/graphics/layouts/private.png'); 
}

img[src="http://s.dreamwidth.org/img/silk/identity/community.png"] {
display: none;
}

img[src="http://s.dreamwidth.org/img/silk/identity/user.png"] {
display: none;
}

I'd appreciate any help whatsoever ~ thank you!

Flat | Top-Level Comments Only

From:

ajnabi

thanks for the detailed reply again! hah, you're really very helpful.
especially that acronym (TROUBLE>TRBL), and i think someone recommended tizag.com to me ages and ages ago but i'd forgotten all about it, so thank you for that, too.

i think i'll come back to the subtitle thing after some time. but yeah.. i guess i was trying to avoid working with layers, as i really don't know S2 coding, i pretty much just copy, paste and ask questions there..

also, yeah, you're right about layouts not always working well when centered, my livejournal layout isn't centered but looks way better, i think, on the left. (though the sidebar positioning has some issues.. and let's not speak of the header that refuses to stay in its proper place in IE. hah.) i think journals with header images usually look better centered.. i'm not really sure why i wanted my dw one centered, actually. hm.

what are grids, though? i mean, in the sense you meant. how are they different from div-in-div-in-div styling? (sorry, i really don't know enough about css/coding..)

♥

kaigou

Grids are an amazingly powerful method of doing a framework for css, where instead of doing div-div-div, you do a series of 'boxes' that float:left, and each one squishes up to the one to its left. When you hit the max number of boxes for a row, it rolls over to the next row. So if you've got, say, a grid of 12, then you'd do something like this:

~div class="grid_6"~ ...blah blah blah ~/div~
~div class="grid_3"~ ---text here--- ~/div~
~div class="grid_3"~ ---text here--- ~/div~
~div class="grid_6"~ blah blah blah ~/div~

And you'd end up with a series of chunks of info, of which the first is 50% wide (6 being half of 12), then two columns at 25% width each, and there's your 100%, so the next div, being 50% wide, gets pushed down and to the left to start the next 'row'. It takes a bit to get used to, b/c it's not at all like the standard css style, but once you do... it's hard to go back! There's no div-div-div nonsense, except in cases where you want to break a column into sub-columns. The rest of the time, you pile divs into one, instead, like so: ~div class="grid_6 text subleft rounded"~ and so on.

You can find out more info about grids by checking out A List Apart and Smashing Magazine (google them, though I find Smashing to be a friendlier site for its extensive resources, while A List Apart can get talky at times). Also check out these existing frameworks, for info/ideas on getting started playing with them:

http://960.gs/ -- 960 grid system
http://www.blueprintcss.org/ -- the biggest & best known
http://code.google.com/p/emastic/ -- flexible & fluid versions, in 12x and 16x

Several sites that are grids in use and/or demo'd:

http://5thirtyone.com/
http://talkseattle.com/
http://kerrywebster.com/
http://www.subtraction.com/

Those are strongly minimalist themes (since that's my personal pref, so that's what I had bookmarked for ref), but there are plenty on Smashing Mag's site that are anything but minimalist and yet are strongly gridded.

That should be enough to ~~hurt your brain~~ get you started!

Dreamwidth style system discussion

browser issues

browser issues

no subject

no subject

Profile

June 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags