5 replies [Last post]
Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 13 years 14 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Hey Guys.

Could you please help me figure out this weird wrapping issue I'm experiencing in IE?

http://wisetopic.com/Sandbox/JenniQuick/960px/video_LP.html

Notice the text that says "Kelly's latest ...". In FF it wraps to the next line. In IE it seems to be aligned to the right :?

The DIV that is not behaving is called "desc".

XHTML






Kelly Clarkson - Because of you
4 out of 5
(3:45)
From:
Kelly Clarkson
Comments:
564
User Ratings:
56,233
Kelly's latest music video featuring some cool *beep* daaawg.



CSS Style

/* video search result box */
.result {
width: 777px;
font-size: 11px;
float: left;
margin-bottom: 10px;
margin-top: 10px;
font-family:Arial, Helvetica, sans-serif;
}
.result .img {
width: 152px;
float: left;
padding-right: 10px;
}
.result .title {
color: #4E7E80;
display: block;
float: none;
font-weight: bold;
font-size: 12px;
padding-bottom: 4px;
}
.result .stars {
color: #4E7E80;
display: block;
float: none;
padding-bottom: 4px;
}
.result .time {
color: #000;
display: block;
float: left;
padding-right: 5px;
}
.result .fromLbl {
color: #5E5E5E;
display: block;
float: left;
padding-right: 5px;
}
.result .from {
color: #F47D00;
font-weight: bold;
display: block;
float: none;
}
.result .cmtsLbl {
color: #5E5E5E;
display: block;
float: left;
padding-right: 5px;
padding-top: 2px;
}
.result .cmts {
color: #000;
padding-top: 2px;
display: block;
float: left;
padding-right: 13px;
}
.result .rateLbl {
color: #5E5E5E;
padding-top: 2px;
display: block;
float: left;
padding-right: 5px;
}
.result .rate {
color: #000;
padding-top: 2px;
display: block;
float: left;
}
.result .desc {
color: #000;
padding-top: 8px;
font-size: 12px;
display: block;
float: left;
}
.result .left
{
float: left; width: 400px;
}
.result .hr
{
width: 667px;
height: 1px;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You could add clear:

You could add clear: left/both to .desc but you'd be better wrapping the spans for each separate line in a block level element. I also don't see why you need to float everything left - you're changing a span's default inline behaviour by making it block, but then trying to get it to behave like it's inline again by floating them all. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 13 years 14 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Yeah I see what you mean.

Yeah I see what you mean. What was I thinking?! Tongue

So you'd recommend I use Div's instead of Spans for each of the items in .result? If not div what "block level element" do you recommend I use? LIs?

I also noticed if there is not enough text in that .desc box it will also wrap to the right in fire fox. The browser must be confused by my confusing coding style :bigoops:

jq

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 36 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

'Kelly Clarkson - Because of

'Kelly Clarkson - Because of you' should be in a heading tag. '(3:45) From: Kelly Clarkson' seems like it should be a paragraph, as does 'Kelly's latest music video featuring Jenni Quick.' 'Comments: 564 User Ratings: 56,233' could be a paragraph or a list with the items floated left. Apart from the last one where you might use a list, none of the others need to be floated. You can still use spans inside those to apply different styles though.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

As Tyssen says, use clear on

As Tyssen says, use clear on the elements you want to start on a new line. Also use width where you can. IE behaves poorly with floats that don't have a width. For some of the shorter items, you are probably ok using white-space: nowrap; For the "desc", it shouldn't be floated as (I expect) you want it to take the whole width available within "left".

Re. appropriate elements. I'd probably go with a heading + DL/DT/DD. Hx being used for the title, DT being used for Time (hidden), From, Comments, User rating and Description (hidden). DD being used for the actual data associated which each of those items. However, I don't think its a big deal, "P" or "LI" will work just as well. Whatever you choose they should be within a semantic element not a plain "DIV" or "SPAN" (even if the "SPAN"s are contained within a single "P".

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 13 years 14 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Excellent advice guys. I

Excellent advice guys. I keep forgetting about Definition lists; I should always look for an excuse to use them to drive that practice into my noggin.

Thanks a million!

jq