Hi,

I have put a span inside a div and heading tag so that I have content floated to the right of the div block. You can see this on the live site (site build in progress) on this page where I have floated the date to the far right of the heading.

Example : link text

All of this works fine in FF and Safari but on IE 6/7/8 the date drops below the line and out of the div. Do I need to specify another span with a fixed width or is their a neater piece of code I can use ?

Here is my css and html

CSS

#events_list h2 {padding-bottom:5px; border-bottom: 2px solid #333;}#events_list h2 span {float:right; width: 310px; text-align: right; font-size: 16px; line-height: 30px; vertical-align: baseline;}

HTML

<h2>{title} <span><strong>Date :</strong> {event_date format="%l %j%S %F"}</span></h2>

2 answers

0
points

IE8 is working great for me, but IE7 (actually, IE8 in IE7 mode) is displaying that exact same problem. Here's an ugly kludge (I'm not against using ugly kludges to try to fix the ugly kludges known as IE7 and IE6)... add these lines to your existing #events_list h2 span selector:

position: absolute; right: 112px;

This fixed it for me. No idea why, but IE7 is pushing your floated <span> into the margin of the <h2>, which (if I understand the CSS spec properly) is possible, but inappropriate in this context.

You could, as an alternative, put that <span> before your {title} shortcode (or Smarty tag, or whatever it is). I can't test it out myself, but I presume that would float it in the proper place -- however, that's ugly and semantically weird, even if you can consistently make it look pretty across all browsers.

(Note: I didn't test this out in IE8 or FF to see if the new rules threw it off, but you could always use browser conditionals like <!--[if lte IE 7]><[endif]--> to import a stylesheet fulla hacks. That's what I do; I know some people abhor such a thing, but I gotta roll out these websites!)

Answered about 9 years ago by Paul d'Aoust
0
points

only block elements may be floated. SPAN is, by default, an inline element. you must set it to "display:block" in your CSS if you want it to behave like a block element. so, to start, add "display:block;" to the css for #events_list h2 span.

the next problem is that you're floating it RIGHT, but it comes AFTER the content you want it to float around (the title) in the source. you can change your HTML to this:

<h2><span><strong>Date :</strong> {event_date format="%l %j%S %F"}</span> {title} </h2>

and it will work just fine.

there are, of course, several OTHER ways to achieve what you're looking for as well...

Answered almost 10 years ago by jenny ham