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

Could you redo the CSS so it's not inside a textarea? I can't speak for other browsers, but in FFx2.0 that textareas about an inch wide by a quarter-inch high. Otherwise I might be able to help, given that I've spent the past two days bashing Transmog with the keyboard.

I put the css behind a cut instead -- though I could also make the textarea bigger, if that would work better for you. I'm sorry, I should have sized it properly before.

I'd really appreciate the help, yes. thank you :)

Wow. You've got a lot of stuff in there I've never seen, and I'm not sure if it's just specific things that I've usually avoided with LJ-style css, or what. But I can point out things that I know will sometimes make Safari and/or IE get a little twitchy, or are just basic CSS details that might've scooted past you. (We all go blind after looking at enough of this.)

Body -- you've got background & color listed as same: background: #4E4357; color: #4E4357. Easiest just to not define either, then.

Margin -- instead of "0 auto 0 auto", just use "0 auto". Firefox seems to be more forgiving of this, but when I've done wacky stuff like "0 auto 0 -5px" I know Safari threw a fit, so see what trimming that does for you.

The ljuser b is an alternate for styling, but AFAIK if there's no script to tell html to think 'b href' is equal to 'a href', it will ignore everything except standard 'b href'. I'm not sure what's mucked with your userpics, so I don't know if that's related. (Probably not. Heh.)

Let's see.

BODY is set at... not set.

#container is set at width: 860px; with {margin: 0 auto;} that should center it. hmm.

Widths are set -- culling down to just what's important here, btw, to make easier to do math.
h1.title {width: 500px; margin-right: 165px;}
.navigation {margin-right: 165px; padding: 15px; width: 500px;}

Amirite in guessing you wanted h1 right on top of navigation?

You can probably get rid of this line:
#wrap {padding: 0;margin: 0;}

...because it's a div that goes horizontal, and doesn't seem to have anything in it. That is, it's supposed to, but if you border it, you'll see it's just a horizontal space. Very odd.

Maybe this is part of the issue? By setting content at 0 margin, and being out of the header area and into the body ("content") area, you're telling it to have content set at 800-whatever pixels, with no room allowed for the sidebar.

#content {margin: 0;}

Thing is, when I do a screenshot of your screen, it's giving me like 700px wide, and I'm going to guess that's semi-accurate b/c you're not setting fonts based on ems. Hmm.

.entry, .entry-wrapper-odd .entry, .entry-wrapper-even .entry {padding: 10px; margin left&right: 0;}

If content is basically 100% wide, then, and .entry is 100%-20px... I think first what you need to do is set up the content margin to be something like:

.content {margin-right:-160px;}

That'll narrow it to allow the sidebar to move up and slot in on the right. Speaking of sidebar, that says:

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

Right now, you've got a slot for the sidebar that's giving it enough room in Firefox math and not enough room in Safari/IE math. That's because Firefox reads %s/ems/etc differently than Safari and IE (which oddly react the same way in this instance). So for Firefox, you might be saying, "full width is 100% and main column is 70% so sidebar is 30%"... then you add in margins and padding, and you're fine. But in Safari/IE, the margins are *on top of* the width, or maybe it's padding that's on top of... whatever, the end result is that half the world says "text area = total - margin - padding" and the other half of the world says "text area = total"... and THEN adds in margin/padding.

I'm not exactly sure (hard to say without being able to fiddle with things, but then, I'm a fiddler like that) but my guess is that it's got to do with the allowances for margins and padding being added up differently. What I recall having to do from transmog over the past day or so is:

-- first remove all margins/padding. let it squish up temporarily.
-- set borders on everything that's of question; in this case, .content, .module-section-two, .entry, maybe even .module -- anything you're defining, add something like "border: 2px solid hotpink;" and "border: 2px dashed green" and whatever other basic html colors are good contrast against the background. (I'd even go so far as to do them for as many defined areas as you can come up with basic colors -- orange, yellow, blue, green, etc -- even if it does look crazy at first.)

That will throw off margins (by 4px, hey, it'll do for now) but it'll let you see where things are overlapping or too much/too little. Then compare IE/Safari with Firefox, and reduce the basic widths of each main column (content and module-section-two). Once you have them side-by-side, start adding in margins, then remove if things get pushed, and then try padding as the last thing to balance it out. Once an area's set like you want, turn off the border for that area.

I seem to recall I ended up doing margin-settings on the content and balancing it with padding-settings on the sidebar, or viceversa, but something crazy like that to get Safari/IE and Ffx to look similar. It's all because of that wacky math, and the bizarro-land quirks in Transmog don't exactly help a great deal.

Sorry I couldn't help more, but hopefully that's at least a place to start. At least, based on the hell-time I've had with Safari/IE/Ffx, the most common culprit is often the width + padding + margin being read as different value by each. Good luck!

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!

In IE8 your layout looks fine with the exception of the entry userpics which may have something to do with the height and width requirements you have for them. Try replacing that with min-height and min-width instead. I'm not sure how it looks in IE7 or Safari and it looks terrible in IE6 (so does my layout) and I don't know what to tell you about that other than upgrade your browser.

I use IE8 too, and I just installed the latest versions of safari (and opera) today. Yeah, the main problems with my layout in IE are the widths of the various content parts (the sidebar is displaced and appears at the very bottom because there's not enough space for it in IE) and the userpics.

i tried fiddling with the min-heights and min-widths like you suggested, but it didn't work.. but i figured it out another way.
i put the border on the .userpic class instead of .userpic img, and removed the width and height descriptors from .userpic img entirely.
and then i added this:


*+html .comment .userpic, *+html .entry .userpic {
width: 100px;
height: 100px;
}

it seems to work..

but thank you very much for the suggestion, and the comment :)

oh dear.
it seems that only works for IE and not for Safari.. ugh.
I think I'll keep trying the min-height, min-width thing..

You must've fiddled with it further, because my Safari shows it looking pretty close to how I see it in Ffx.

yeah, the userpics are still messed up, but otherwise I've managed to fix it up.. which I'll talk about in my reply to your main comments :)
thank you ♥

hey, whatever works. the safari-ie-firefox-opera adjustments can get pretty crazy, and at this point I'm almost convinced it would work just as well to wave a dead chicken over the computer. Sometimes it doesn't seem like anything else will get the job done.

:D

wouldn't it be so much better if people just used firefox all the time? i mean, if there WAS only one browser... *grr*

Flat | Top-Level Comments Only

browser issues

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject