Dreamwidth style system discussion

@font-face browser compatibility issues

2012-05-07T22:13:30Z

Posted by: thoitaxh

Hey! So it's me again. I've got a promblem with my font_face tag that for some reason isn't showing up in Firefox. Works in Chrome with no issues at all, but Firefox keeps defaulting to my back-up fonts.

How it looks in Chrome/How I want it to look

How it looks in Firefox

/*@font-face*/

@font-face {

font-family: "Bebas Neue";

src: url(http://dl.dropbox.com/u/59359072/BebasNeue-webfont.eot);

}

@font-face {

font-family: "Bebas Neue";

src: url(http://dl.dropbox.com/u/59359072/BebasNeue-webfont.ttf) format("opentype");

}

/* Colours:

#B5BFBD - PALE VIOLET

#7C7D78 - DARK GREY

#E6E6E6 - LIGHT GREY

#F26A53 - RED */

/* Basics */

body {

background-color: #fff29D;

font-family: "Arial Narrow", "Century Gothic", Helvetica, Arial, sans-serif;

font-size: 14px/1.2em;

letter-spacing: -1px;

color: #7C7D78;

padding: 0;

margin: 0;

text-align: left;

}

a, a:link, a:visited {

color: #F26A53;

text-decoration: none;

}

blockquote {

background: url() no-repeat;

padding: 10px;

color: #F26A53;

font-family: Georgia;

font-style:  italic;

text-align:  justify;

}

code, kbd, pre, tt {

font-family: Helvetica, Arial, sans-serif;

font-size: 1em;

background: #FEFDFB;

border: 1px solid #E6E6E6;

}

b, i, s, u, emphasise, abbr, strong, strike { color: #7C7D78; }

/* previous next navigation buttons */

.topnav, .bottomnav {
	color: #F26A53;

padding-top: 20px;

padding-bottom:20px;

text-align: center;

font-family: "Bebas Neue";

font-size: 1.5em;

position: relative;

left:-5%;
	}

.topnav {
	display: none}

.page-separator, li.page-separator, ul .page-separator, ol page-separator { 
	display:inline;

color: #7C7D78;

padding: 5px;
	}

.navigation ul {

display: inline;

padding: 0;

margin: 0;
	}

.navigation li {
	display: inline;
	
	list-style-type: none;
}

/* CONTENT */

#header {

float: left;

font-size: 1.8em;

font-family: "Bebas Neue", "Arial Narrow", Helvetica, sans-serif;

text-transform: uppercase;

text-shadow: 3px 3px 5px #666;

color: #F26A53;

letter-spacing: 6px;

position:relative;

top: 100px;

left: 50%;

background:transparent url() no-repeat top center;

z-index: 10;

}

h2#title {

float: left;

position: relative;

left: -50%;

}

h2#pagetitle {display: none;}

#footer {

clear: both;
	width: 100%;
}

#canvas	{

width: 600px;
	z-index: 10;

}

#primary {

float: left;

z-index: 50;

padding: 100px 0px 0px 0px;

margin: 10px 10px 10px 300px;

width: 100%;

text-align: left;

}

#secondary {

float: left;

position: absolute;

top: 30%;

left: 50%;

margin: 0 auto;

font-size: 1.5em;

background: transparent;

z-index: 100;

}

#tertiary {

float: right;

display: block;

position: fixed;

top: 300px;

right: 10%;

clear: both;

width: 200px;

}

/*navigation bar under header*/

.module-navlinks {

margin: 0;

padding: 0;

font-family: "Century Gothic";

font-size: 1.1 em;

position: relative;

top: -50%;

left: -55%;

}

.module-navlinks li {

float: left;

list-style-type: none;

margin: 0 0 0 0.5em;

padding: 0.25em;

background: transparent;

color: #7C7D78;

}

.module-navlinks a {

color: #7C7D78;

text-decoration: none;

text-transform: lowercase;

font-size: 15px;

}

.module-navlinks .clear {

clear: left;

height: 1px;

margin-top: -1px;

}

/*SIDEBAR MODULES*/

.module-header {

display: block;

font-size:0px;
}
.module-typelist {

margin: 0;

padding: 0;

font-family: "Bebas Neue";

}

.module-typelist ul {
	
	list-style-type: none;

margin: 0;

padding: 0;

}

.module-typelist a {
	
	display: block;

overflow: hidden;

padding: .4em;

margin-bottom: 2px;

background: transparent url();

text-transform: uppercase;

width: 200px;

text-align: left;

color: #F26A53;

font-family: "Bebas Neue", "Arial Narrow";

text-transform: uppercase;

font-size: 1.4em;

font-weight: bold;

letter-spacing: 0.4em;	
}

.module-typelist a:hover {
	text-shadow: 3px 3px 5px #999;
}
/* ENTRY CONTENT */

.entry {

background-color: #F9F9F9;

width: 500px;

padding: 20px;

margin: 0px;

margin-bottom: 30px;

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

font-size: 1.2em;

border: 10px solid #F9F9F9;

}

.entry-content {

padding-top: 10px;

margin: 10px 0px;

text-align: justify;

}

.entry-content img {
	 
	max-width: 100%;

border: 10px solid #F9F9F9;
		
}

.entry-content video {
	
	max-width: 100&;

}

.entry-title {
	
	display: block;

padding: 5px 50px 5px 10px;

margin: 0;

font-family: "Bebas Neue", "Arial Narrow", Arial, Sans-serif;

text-transform: uppercase;

font-size: 1.2em;

overflow: hidden;

}

.entry-title a {
	
	background: #E6E6E6 url ();

font-family: "Bebas Neue", "Arial Narrow", sans-serif;

color: #7C7D78;

}

.entry-title: hover  {
	color: #F26A53;
}

.userpic {

display: block;

float: left;

position: relative;

top: 10px;

padding: 0 0 0 0;

margin: -110px 0 0 -170px;

}

.userpic img {

width: 100px;

height: 100px;

border: 10px solid #F9F9F9;

box-shadow: 3px 3px 5px #666;

-webkit-box-shadow: 3px 3px 5px #666;

-moz-box-shadow: 3px 3px 5px #666;

}

/* Metadata and Tags */

.metadata {

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

text-transform: lowercase;

}

div.metadata ul {

list-style: none;

padding: 0px;

margin: 0px;

}

div.metadata ul li {

display: inline;

text-align: left;

list-style-type: none;

padding: 0px;

margin: 0px;

}

span.metadata-item-location, span.metadata-item-music, span.metadata-item-mood, div.tag ul  {

display: inline;

list-style-type: none;

list-style-position: outside;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

}

.tag {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

}

span.tag-text {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

}

div.tag ul li {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

ul.entry-management-links {

display: block;

text-align: center;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

color: #7C7D78;

}

ul.entry-management-links li {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

color: #7C7D78;

}

ul.entry-management-links a {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

color: #7C7D78;

}

ul.entry-interaction-links {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

ul.entry-interaction-links li {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

ul.entry-interaction-links a {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

.tag, .entry-interaction-links, .entry-management-links, .comment-interaction-links, .comment-management-links {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

I'd be super grateful for any help at all!

comments

Header and Browser Compatibility issues in Tabula Rasa?

2012-04-25T06:58:09Z

Posted by: thoitaxh

Problem SOLVED! Hey, so I'm using Google Chrome most of the time, and my Thor themed layout works fine in that (except for a few issues that I'm pretty sure I can figure out myself) but when I use a different browser (i.e. Internet Explorer or Firefox; I haven't tried any others) the header doesn't sit where I want to sit. Which is mostly I guess because I used position: absolute but I'm not sure how else to get it centered above my posts.

This is how I want it to look in all browsers and how it looks when I use Chrome. This is how it looks on Firefox and this is how it looks on IE.

In both IE and FF, the header is too far left for what I want.

This is the code I used:

Also, in IE the sidebar doesn't show up. Could that be because I used position: fixed?

I'd be glad for any help!

comments

Transmogrified help

2010-10-01T14:32:47Z

Posted by: carisma_sensei

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

Thank you!

( the layout is under here )

comments

Fixed background problem in Brittle

2010-09-17T15:23:40Z

Posted by: elleth

I'm currently in the process of customizing my journal, but ran into a problem on the way, but I know the grand total of nothing about CSS and am not even certain what caused it.

I am using this bit of code for a fixed background image, and while the image itself is fixed, my page continues to scroll, with a bit of no background image between navigation strip and page, as well as to the right side of the screen, and this driving me nuts. Since, when I scroll to the side, it is the entry content that is moving, could the problem be caused by the entry module width, or is it a background image issue? And more importantly, can this be fixed?

(The layout looks fine in Google Chrome, the problem appeared in Firefox.)

SOLVED: Secondly, Brittle forces the icon size to 70px with a 5px border. Is there a way to remove the border and display the icons in their original size?

Thanks so much in advance!

comments

Tweaking question

2010-09-17T07:06:46Z

Posted by: scottishdeerhounds

I know absolutely nothing about CSS, but was able to find enough info on past posts in this community to get almost everything in the layout the way I want it. I just have one problem left. Can anyone advise me as to what I need to do to shift the Journal Title, Subtitle, and Page Title in the header just a little up, so that it doesn't mask any of the image I've put in the header? I am using branchandroot's Green Summer Theme of the Module Style.

Any help will be deeply appreciated.

ETA: Firebug allowed me to isolate the proper CSS code, and I have been able to fix the header image as 100% of the header space, as long as Firefox is the Browser in use. Granted, nobody looks at my journal but me, and I use Firefox, but its the principal of the matter. Is there a way to fix this custom CSS so that it also address the size issue in IE8?

ETA 2: I have now been informed that MS is not yet up to speed, and the potential fixes for this for IE8 would require substantial revision of the header as I currently have it fixed. Ah well, at least it looks OK to hopefully a third of users out there.

comments

Custom Style - CSS issues

2009-10-30T16:24:58Z

Posted by: lyssac

I created a custom style before DW went into open beta, based on Core2, with some tweaks to my theme layer.

Despite a few minor changes that I've had to make along the way as the code or my needs have changed, it works out pretty well for me, but I am having a few issues that I hope someone can help with.

1) My header has the navigation links for the journal. They work fine with IE, but are just plain text in FF. I've tried fixing this with z-index:999; in every div I can think of, to no joy. Does anyone have any idea what I am doing wrong?

2)Journal Syndication. I moved this to module 3 and made it part of my footer, yet, I just noticed that it only shows up on the main page. Is there a reason it's not on the entry pages?

Thx.

comments

IE7 CSS makes this almost perfect, but not quite

2009-08-18T05:52:13Z

Posted by: zvi

I am still trying to perfect Refried Tablet, and I still have one teeny, tiny problem.

In Tabula Rasa's base style, in the two column, the modules in #tertiary have a fixed width and float next to each other. I removed the float and the width, and now #tertiary and #footer are covering up ... something at the bottom of the page in IE7, and I don't know why. (I'm on Linux, and don't have IE installed. And the browershots previews never go to the bottom of the page, so I'm relying on a bug report without a screenshot)

Anyway, you can view the style live at http://zvi.dreamwidth.org/?s2id=82229 and see the CSS at http://pastebin.com/m433b9ed1

I'd appreciate any help with making this work correctly, or I'll have to give up and put the float/width back.

comments

browser issues

2009-07-25T23:18:27Z

Posted by: ajnabi

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

( here's my css )

I'd appreciate any help whatsoever ~ thank you!

comments

Tablua Rasa - various

2009-06-05T00:15:03Z

Posted by: tyger

Hello. Just a few niggly issues I've not been able to figure out myself. Using Tabula Rasa:

• Is it possible to remove links from .module-navlinks entirely? Not all of them, just some. I'm looking at memories, archive, and reading page - they don't seem to have separate class-identifiers in the CSS. Will I have to take them out using a theme layer? (And if so, how?)
Taking out the bullets and the text helps some, of course, but they're still very there, unfortunately.

~~• Is it possible to limit the 50-most-used-tags further?~~ Obviously, I'm a moron. Mad props to firefoxfey for pointing this out. :D

• I'm trying to get the moodtheme to display on the left of the rest of the metadata - which works well enough, but some of the metadata appears to have tabbed over, as well as the padding I've put in. And which metadata elements have this bug depends on the browser. I get mood and music in Safari, and just music in Camino and Firefox.

• Relatedly, my metadata box, in very narrow layouts, displays on top of the icon. I've tried changing the z-index values, but to no avail.

Any and all help much appreciated!

comments

Trans custom css question...

2009-05-14T20:05:29Z

Posted by: blackdove

Hi all...

I'm having a devil of a time trying to get my sidebar to be where I want it to be on my personal journal. I've adjusted the left margins and right margins and it still looks all wonky. Now I admit, I've been working on this during my breaks and lunch at work and the office computer only has IE6 which isn't a supported browser here at DW (can't upgrade per our IT department... I don't know why they want us to stick with IE6) so it's possible that it isn't as bad as it appears on my browser... but any thoughts y'all have would be fantastic. I feel like I'm losing my mind and css is starting to look a lot like the Wingdings font at this point.

Thanks in advance!

~sara

comments