CSS Forum

**pealo86** · 09-09-2010, 10:26 AM

Here is a page from a website that I am currently building:
http://bit.ly/8XQniQ

See in the left hand column there are 'read more' links within the paragraph. These are styled simply with:

Code:

float:right;
text-decoration:none;

However in IE 6 and 7 it does not display properly. The read more link is knocked onto a new line, I need it to be on the same line as the final line on the paragraph (provided it has room to fit in that is).

I was thinking of adding some code to my IE-specific stylesheet by positioning it relative and moving it up 10 or so pixels. But depending on how long the last line of text was within the paragraph, the link may overlap it.

Does anybody have any ideas how I can fix this in IE?

Thanks.

**chrishirst** · 09-09-2010, 11:09 AM

don't have IE7 to test with, but try adding display:inline to the rule

**pealo86** · 09-10-2010, 04:30 AM

Thanks but that doesn't seem to work

Seems like the only way I can get it to look right in IE is by adding the read more link a few words before the end of the sentence. But then it looks wrong in other browsers, and obviously makes the code a bit messy!

I think it's just something to do with it being on the last line of the paragraph that IE doesn't seem to like.

**racer x** · 09-10-2010, 12:34 PM

I think the problem you are going to run into is trying to place that read more link every time without the lead in text affecting it. What if the last line of the lead in text runs to the edge? Then the read more link will be pushed to the next line anyway. If you positioned the read more absolutely in the bottom right area of just the paragraph area, then you might overlap the last part of the lead in content.

If it were me, I'd stick with a normal document flow rather than trying to position things so exactly. Especially if you will be converting this to wordpress(?) or other CMS where you really can't control that lead in text cut-off since it is dynamic.

Perhaps float the image right AND the read more link right so that it sits right under the image in the for right corner of the divide div? Or divide each listing area into 2 halves so the paragraphs stay left and the image and read more link stay right.

One more suggestion, I'd make the image and the title a link.

Just my opinion.