CSS: What the FUCK?!?
- Started
- Last post
- 20 Responses
- elahon
QUestion for the CSS folks. I'm getting a major discrepancy in IE7, and only IE7. IE6 looks correct, like FF, Safari, etc. The problem is ONLY in IE7. I've been reading a bit about the "hasLayout" thing, and I've experimented with some tags, but nothing seems to work.
Here's how it's supposed to look, and again, it looks good in EVERYTHING except IE7.
Mac FF:
IE7:
Here's the code. Sorry I can't actually link to a live version, it's on a private staging server.
.commonPortalListing.centerSubSt... {
width:275px;
margin:10px 0 5px 20px;
padding:0 0 3px;
height:100px;
min-height:0;
}
.commonPortalListing.centerSubSt... img {
float: left;
width: 50px;
height: 50px;
margin:0 10px 0 0;
padding: 2px;
border: 1px solid #DDD;
}
.commonPortalListing.centerSubSt... h3 {
color: #FF0000;
display: inline;
}Thank you any and all in advance!
- elahon0
That ".commonPortalListing.centerSubS... is supposed to be ".commonPortalListing.centerSubS...
- elahon0
Christ, ".center Sub Story" (no spaces)
- airey0
link the page + code
- brains0
I'm so baked right now, that looks like sanskrit to me.
- elahon0
It's on a private staging server. Firewall doesn't allow access to anyone not on our network.
- mikotondria30
try a margin: 0 on your h3 there..
- trying...elahon
- or giving it an explicit width.mikotondria3
- 7point340
make h3 block level and float it left as well
- ninjasavant0
http://giveupandusetables.com/
I wish I were better at css.
- elahon0
This is a clusterfuck. JBoss, RichFaces, <h:panelGrids>, <rich:fuckYourMother>, 6K lines of generated CSS, just a mess. And of course it need to be cleaned up and ready to roll on the 31st.
Ugh.
- blergh - there are many many friendlier technologies. Some are suitable for humans.mikotondria3
- I know, seriously This thing could have easily been PHP. But it was 2 years in the making before I came on board.elahon
- "The next year is more important than all the other years that have gone before"
There is now.Maybe tomorrowmikotondria3
- 7point340
not sure exactly.
is the grey text in a child? a <p> for instance, or is it just sat in the <div>?
if it's in a <p>, i'd float that as well.
like i said this is hard to see without all the code
- mikotondria30
Seriously mate, a long time before I went to the trouble of taking a screenshot, uploading it, and starting a post , I would have bashed out a table. There is no shame.
- elahon0
Alright, man, you asked for it. =) Might want to paste this into a txt file or something:
<div class="sharebox_left_bottom">
<h1>Member Stories</h1><c:forEach items="#{shareController.mostDiscussedContent}" var="post" varStatus="loop">
<h:column>
<div class="commonPortalListing centerSubStory">
<div class="photo"><vs:imgViewer
thumbnail="false"
value="#{post.discussionPost.author.profilePicture}" width="50" height="50"
nostyle="true" />
</div>
<h3><h:outputLink value="#{appConfigurations.blogPostDetailsServletUrl}#{post.id}">
<h:outputText value="#{post.story.headline}" styleClass="header" >
<vs:truncatedTextConverter maxLength="40" replacement="..." />
</h:outputText>
</h:outputLink></h3><br />
<div class="bylinePadding"><h:outputText value="#{shareMsgs.by} #{post.discussionPost.author.displayName}" styleClass="byLineText">
<vs:truncatedTextConverter maxLength="25" replacement="..."/>
</h:outputText>
<h:outputText value=" - " styleClass="byLineText" />
<h:outputText value="#{post.entryDate}" styleClass="byLineText">
<f:convertDateTime pattern="MM/dd"/>
</h:outputText></div>
<h:outputText value="#{post.story.summary}" styleClass="previewBodyText" >
<vs:truncatedTextConverter maxLength="130" replacement="..."/>
</h:outputText><div class="clear"></div>
</div>
</h:column>
</c:forEach></div>
- I feel physically sick.mikotondria3
- make sure the width of the h3 is not more than 219px, including margins and padding...7point34
- that's based on the 275 up there and subtracting 56 for the image7point34
- is my math right? it's late7point34
- THe H3 has no width on it. Margin is 0.elahon
- *pokes eyes out with rusty fork found in the streetETM
- monospaced0
NERDS!!!
- elahon0
Yeah, the centerSubStory container is 275p wide, and the image is 50px wide. the H3 has no width and margin:0.
- elahon0
Night, all. Thanks for the assistance. I'll come back to it in about 5 hours from now. =/
- nighty night.mikotondria3
- yeah, i'm exhausted and i've only been looking at it for 15 mins7point34
- I did suggest giving the h3 an explcit width in a note about 8 posts ago, so if that is the solution, I want half the $.mikotondria3
- BUT I will not share half the stigma of suggesting the wrong answer. I'm just like that. A 2-faced snakey rat.mikotondria3
- ETM0
Man this seems to be getting SOOO complicated for something as basic as a floated image in a box.
Redo that markup mess. Something simple (i've used my own (more logical) css names than that generated stuff)
<div class="newsStory">
<div class="newsStoryImage"> -- div floats image left, padding etc.
<img src="someguy.jpg">
</div>
<h3>Story Title</h3>
<p class="credit">Inserted by Admin</p>
<p class=summary">Story summary goes here</p>
</div>