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:

mmmag

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.

ajnabi

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

kaigou

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*

Dreamwidth style system discussion

browser issues

browser issues

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

June 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags