Log in

No account? Create an account

Previous Entry | Next Entry

Asset-Meta / Userpic Help - Solved

  • Sep. 5th, 2009 at 9:10 PM
If I had hair, I would be ripping it out right now. I'm testing a layout I'm working on for a community and this is my first time using Expressive. I've gotten very comfortable working in Bloggish, but I like the sticky post that Expressive allows, so I'd like to use it. Backstory aside, I'm having some issues positioning my .asset-meta divs correctly, as well as the fact that things are getting rendered weird possibly due to my "float: left" attribute on my userpic class.

In Internet Explorer, everything works as I want it to (surprisingly enough):

The comment links/date & time header are in line with the entry text/userpic, and there is adequate space left when the entry itself is not long enough to cover the height of the userpic.

In Firefox and Chrome (my browser of choice), the story is different:

The comment links/date & time header are indented, and if the entry is a one-liner, the following entry is collapsing into it.

ETA: I always end up figuring out exactly what it was, and it comes down to me missing a piece or two of code that didn't I should have realized.

Original affected code:
.asset { margin-left: 0px; margin-right: 0px; margin-top: 10px; margin-bottom: 10px; }

.asset-meta { text-align: left; font-size: 11px; color: #ffffff; position: relative; margin-left: 23px; margin-right: 23px; padding-top: 10px; padding-bottom: 20px; }

.asset-meta li { margin: 0px; }

ul.asset-meta-list { list-style-type: none; margin: 0px; }

.asset-meta-comments { padding-left: 0px; padding-right: 10px; display: inline; }

.user-icon { float: left; margin-right: 10px; }

Fixed code:

.asset { float: left; margin-left: 0px; margin-right: 0px; margin-top: 10px; margin-bottom: 10px; }

.asset-meta li { margin: 0px; }

ul.asset-meta-list { display: inline; list-style-type: none; margin: 0; padding: 0; }

.asset-meta-comments { display: inline; }

.user-icon { float: left; margin-right: 10px; }

What I did and how it fixed the issue:

By setting the .asset div to "float: left", Mozilla/Chrome recognized that the .user-icon div was meant to be inside the parent, and not to let the following divs wrap around it if the parent div was too small. (Link to explanation).

Also, Mozilla/Chrome and Internet Explorer use different properties to set the indents on lists (IE uses the margin declaration and Mozilla uses the padding declaration), so once I added on the padding declaration to the .asset-meta-list class, both browsers recognized to take out the indent. (Link to explanation).

av8rmike, thanks for taking the time to look at this; sorry if it caused you any unnecessary grief.

If anyone can help me figure this out, it would be greatly appreciated!


( 3 comments — Leave a comment )
Sep. 7th, 2009 04:18 am (UTC)
Looks like you're missing the "utility code" that's in the default stylesheet. Have you tried enabling the default sheet from the Custom CSS page?
Sep. 7th, 2009 12:26 pm (UTC)
I'm always hesitant to use the base stylesheet because it throws things off all over the place, and I'm not sure then how to style it correctly again. I changed the setting, and it fixed the issue, but the positioning for the columns and widgets is off now. :-/ I'll leave it up in the live preview so you can see what I'm talking about.
Sep. 8th, 2009 12:47 pm (UTC)
It's not a bother; I'm just not sure what you mean.
( 3 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars