style_system | browser issues

Entry tags:

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

Err, I should be clearer about this part:

.module-section-two {width: 160px; margin-right: 20px;}

...this means to Safari (and at least IE6/7, IIRC) that your sidebar is actually 180px --> it's 160px for text area PLUS another 20px for margin. Something like that. So try setting it up for a 180px sidebar and see what that does.

Like I said, I fiddle with stuff until it works. Or doesn't. (Heh.)

1. It really is very strange how IE & Safari count the margin as part of the width, sort of. It's really very annoying! But thanks for clarifying.

2. I think I fiddle around with and specify way too many things that most people would just leave alone, like the quickreply forms and subject/month pages. I'm really way too nitpicky and perfectionistic.. that's probably why I have weird stuff in my css that isn't commonly used, heh. Oh well..

3. I specified the body color because I didn't specify the text color anywhere else, except for links. It just seemed easier to specify it once. And the background happens to be the same color because I wanted it to appear as though #container was contiguous with the general body background (and the background-color for #container is also that same color). You know, it probably would be better just to specify colors for the individual sections, though...

4. I've been working on using margin: 0 auto; more than having the 4-point value or whatever you call it -- honestly, I didn't even know there was a way to use only two numbers (top/bottom, left/right) until recently! (and I demonstrate my amateurishness yet again.. heh.) anyway, I've noticed that IE/Safari don't always understand those wacky margin values. Do you think it helps to specify it individually, as in, margin-left, margin-right, margin-top, margin-bottom? I haven't really noticed it helping or changing much, but maybe it does in some instances..

5. Thanks for pointing that out about the b:hover thing! I guess I'm okay with the colors for the ljusers being maybe messed up in IE/Safari sometimes though, as long as it's only the colors.. it does kind of drive me batty which is why I specified it in the first place at all, but, you know, you can't fix everything I guess. (It is VERY annoying to me that .ljuser and b are always confused because the ljusers usually show up in bold, or whatever).

6. Yeah, the body is centered actually, I think, except that it appears like it isn't because the userpic wall of space is also part of the body. So it seems a little off towards the right..

7. I got rid of a lot of the defined widths for a lot of the sub-divs (?) like .navigation, .entry, etc. I just specified the width for #content instead. (which you can see in my updated css in this post. I put it in a (bigger) textarea since it seemed like it was too long to scroll down.. I hope that still works for you, though).

8. Yes, you're right :) I did want h1 above .navigation. I have it disabled in my version, I should probably check to see if it still looks ok when enabled.. I'm somewhat miffed that there's no subtitle class in Transmogrified; sometimes I like to use those things though it's nice to have the subtitle too! heh, nitpickiness again I guess..

9. got rid of #wrap -- it does sound very strange indeed, I hadn't noticed the horizontal thing but I did notice that it seemed to be a rather elusive div. um. I mean, it was easier/better to work with other things, like #content and #container.

10. I fixed up the css by just allowing more #content space (and not defining the widths for every single part of #content, just defining it overall..) -- it seems to work alright. I had to fiddle with the margins for .navigation and some of the other stuff, but it seems to work. I still have widths defined for the archive page and tags page stuff because it seems to fall in other divs and classes. I think it works for now, hopefully.

11. thanks for the really good suggestion about bordering and coloring stuff really wackily in order to figure out exactly how things are slotting up! that's really useful. i did use background-colors to see how things were working out earlier, but i didn't think of using borders and better colors.. hah.

honestly, sometimes i wonder why i make layouts (and keep making them rather than sticking to one, or whatever) when they're this meticulous and frustrating! (i seem to love it anyway..) i don't make as many layouts as a lot of people on layout comms seem to, though.

a few notes:

3. I'm so used to the cascading element of css that when I see text defined that early, I think: ahah, something's overriding that later. my own css is often layered to do just that, with exceptions at the bottom for specific overrides.

4. margin: 0 auto is useful, but it also depends on whether you want things centered. sometimes a layout looks better, oddly, if it's shunted to the left. depends on the layout.

there are actually four ways to list values when it comes to margin/padding:
a. there's the standard shorthand, known as TROUBLE -- TRBL, which is top-right-bottom-left. VERY easy to remember, eh?
b. there's the single one, in which one value is applied to all
c. there's the double, where the first value is top-bottom and the second is left-right,
d. there's the rarely-seen triple, which is (erm, I think, I never use this!) the first is top-bottom and then left value and right value? Check www.tizag.com. They've got all sorts of useful info about this stuff.

5. b href works only if you're on a site where b's been defined -- unfortunately, that site will never be LJ/DW/etc, since we can't define globals. grrrr.

6. sounds like an instance where using margin:0 auto isn't visually the best way to do it, in which case try something like margin: 0 auto, and override it with margin-left: 5%, see what that does. (easier than typing each out separately, for me at least.)

8. there is a way to do subtitles! it just means doing wacky layers, b/c they turned off the global on subtitles -- why? I BLOODY WELL DON'T KNOW. Some of the stylistic choices right now have me bashing my head on the keyboard, b/c they're good only for developers and/or folks who really really know their way around. Hell for anyone else. Regardless, I think it's in this comm, as a matter of fact -- check back a few posts and you should see something about subtitles.

11. borders are my soopersekrit tool when it comes to reverse-engineering someone else's css. doing background colors, one will block out the other, which doesn't help so much -- but borders will overlay, especially if background-color is set to transparent. then you can see what's meshing and what's clashing.

hey, you're not alone in being finicky with layouts. I do the same, but I tend towards minimalism, so doing layouts on LJ/DW/etc drives me crazy for all the div-in-div-in-div crap. I lean hard towards grids, and you just can't manage that with pre-set divs like what's here. Eh, well!

Glad it worked out and is looking like you want!

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..)

♥

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!

Flat | Top-Level Comments Only

browser issues

no subject

no subject

no subject

no subject

no subject