IE7 & Opera Creating Line Break on White-Space:nowrap Div

I don’t know what’s happening here:

If you go down right side under Trending Now, the film links display fine on all browsers except Opera and IE7.

For some reason the longest film gets a line break that I can’t figure out. Is this a bug, or what am I overlooking in my code/css to fix this?


I can’t see anything down the right side that says ‘trending now’. :frowning:


I can’t see any line break in that section. IE7 has more space at the bottom of the box probably due to you setting a height and not letting content dictate the height as browsers are never exactly the same.

You also have an invalid structure and you can’t wrap block elements in a span.

<span class="afix"><img src="/images/trendtop1.png" class="topnumbers" />
 <h2><a href="/tags/the-avengers" style="width:230px; white-space:nowrap; overflow:hidden; display:block;">The Avengers</a></h2>

That span would need to be a div instead.

It’s about a third of the way down on the right under the ads :slight_smile:

Sorry guys. I should have updated this. The span is display:block. I had to make the anchor display block with set pixel width to fit the div to stop the odd whitespace break from happening. I may remove the span entirely and just have the block href and see if that works with less code.


[QUOTE=casbboy;4980814]Sorry guys. I should have updated this. The span is display:block.

It doesn’t matter what “display” the inline element is it is still invalid in that context. You can change the display of an element but you can’t change what the element is and the rules of html must still be obeyed :slight_smile: Inline “elements” are not allowed to wrap block elements.

With css you can change the “box” that the element displays but that has nothing to do with html rules.

Display:block !== block LEVEL. H2 is a block LEVEL element, it CANNOT go inside a span or an anchor.

As typical with sites so knee-deep in scripting for nothing, you’re entire document structure is complete gibberish that I’d be shocked to see render consistently across two versions of the SAME browser, much less different ones. The headings on NON-HEADING ELEMENTS (what the makes those H2 the starts of new subsections?!?) – what makes them all need spans when you’ve got perfectly good anchors – If all the images in that section are getting the SAME class, none of them need classes, the endless inlined static CSS pretty much defeats the point of USING CSS…

I mean looking at this, you might as well forget CSS and go back to HTML 3.2 for all the good it’s doing you; though that goes hand in hand with the tranny doctype; basically saying you’re in transition from 1997 to 1998…

This is apparent in the sheer size of the HTML – a 53k HTML file to deliver 3k of plaintext and two dozen or so actual content images is an indication that – as I tell people almost daily – it’s time to throw that all away and start over using coding practices from THIS century.

That section Paul pointed out for example – there is no reason for the HTML on that to be much more than:

<li class=“trendTop1”><a href=“/tags/the-avengers”>The Avengers</a></li>

(that would be inside a OL, since that’s… well… an OL!)

with EVERYTHING else you’re doing there going in an external stylesheet. The entire page is filled with that type of over-thought disastrously bad HTML.

Ah, yeah, I have the H2 already set to display:inline. It’s not block level. Was a move I told was great for SEO (not exactly design). And when it comes to your idea:

<li class=“trendTop1”><a href=“/tags/the-avengers”>The Avengers</a></li>

Too complicated, simplifying it even more. One complication I have to watch for is the blend you see (notice the title is fading out). A css trick with PNG-8.

I’ll update soon.


Fixed it!

Looks the same in all browsers and versions now; no more odd line break. Went from all that span stuff to just a simple anchor/css combo.

The blending on Adventures of Tintin (long title) is still evident also.

Look okay?


ARRGH!!! Again, Display:inline does NOT EQUAL INLINE LEVEL. Display:block; does NOT EQUAL BLOCK LEVEL. Setting the H2 to display:inline does NOT change it to inline-level – EVER!!!

The “level” of a tag has jack to do with it’s display state – so you CANNOT EVER put a H2 inside and Anchor or a SPAN. Invalid HTML… you can’t do that! (though the HTML5-tards want to change that)

… and it’s not ‘alright’ – with 224 validation errors you don’t even have HTML, you have gibberish. It’s just going to keep breaking again and again and again every time you try to change… well… anything.

I’ll work on those now. Looks like about 100 of the 224 are just from ad codes (that I can’t touch) from ad networks. And another 80 are missing ALT and wrong closing tags on images (some of which are from networks). I don’t think any of those create much of a layout change though, but I can fix to make the report happier.


To be honest that was the first major cross-browser issue I’ve had was that weird white space. We get between 200k-300k visitors per day and nobody complains about the layout being off. And, trust me, I ask our social followers often.