Asset-Meta / Userpic Help - Solved
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!
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!