words appearing over images
-
Lately, I’ve noticed something strange on my blog: http://www.threefates.wordpress.com. I’m using the Connections 1.0 theme by Patricia Miller. I’m having a hard time laying out the photos with the text. The text keeps appearing OVER the pictures. Does anyone have any suggestions? I’ve got a 6 pixel border around all photos. I’ve tried putting in manual <p> marks, but that doesn’t seem to help. Anyone more experienced with CSS have ideas about whether something in the CSS is causing this?
-
*sigh*
Just for reference you don’t use the ‘www’ bit in the URL like that. The ‘threefates’ takes the place of it. 30% of the net and most search engine spiders can’t or won’t follow such a link. You’ll note that the link under your user name doesn’t have it.
I’m not seeing any text over pictures. Can you point to a specific place where this is occuring please? Also what browser, browser version, OS and screen resolution are you using?
-
It looks fine to me on Firefox 2.0.0.3 Can you tell us exactly where you see this happening?
-
-
I upgraded Firefox to 2.0.0.3. It looks a little better, but I’m still having trouble. If you go to the blog, then click on the first entry, you can see it then.
Or use this link. http://threefates.wordpress.com/2007/04/13/a-project-spectrum-20-update-aprilmay/#more-415
It starts about the fourth photo down with text from the top. If you still can’t see it, I’ve posted a screen shot on my blog main page: http://threefates.wordpress.com.
BTW, thanks for the tip on writing my link.
-
Ah, I always get that when the photos are not consecutively down the page but staggered and slightly overlapping, vertically. What I actually see using IE6 is that the pictures are overlapping the text, making it unreadable.
I have never found a way around it except to make the text longer (ie type more or make more paragraph breaks) or make the photos smaller. Or to align them all to the same side, but boy, does that look weird when you haven’t got much text.
-
I vote for making them a tad bit smaller, since most of them don’t require the reader to see much detail. I think if you do that, you’ll probably be okay (BTW i see what you’re talking about on that post, thanks).
-
Try using <p style=”clear: both”> on the paragraph that contains the picture that is getting over written.
-
It looks really bad in IE 6.0.2900.2180.
This is going to sound silly but take a look at the Features page on the main wp.com site as they do what you’re trying to do. (I’m on a locked down terminal so i can’t check for you)
-
In firefox 2.0.0.3 there is text overwriting on the last two images. I vote for making all trying to eliminate the blank line spacing between paragraphs. Example 1:
“foot.
This is the Cherry Tree Hill in …”
In this case try eliminating the blank line between “…foot.” and “This is…”
Example 2:
“… stitch pattern either.
And now for the most exciting …”
In this case try eliminating the blank line between “…either.” and “And now for…”
-
Trinifar – This was the best solution so far and worked like a charm once combined with some minor CSS adjustments.
Here’s the example.
<p style=”clear: both”> <img src=”http://farm1.static.flickr.com/221/457986098_89e00cc4d9.jpg?v=0″ align=”right” height=”225″ hspace=”6″ vspace=”6″ />This is the Rapid River Sock in Lorna’s Laces using envy. I’m just past the heel on sock #2. I hope I can wear them soon. This is a great sock. Cookie has her fake leg. I’ve got plastic grocery store and Target bags stuffed into mine. Not bad, although I think I should have put another bag into the foot.</p>
Dr. Mike, thanks for the advice. Actually my css already has something like that and I adjusted it and used the Clear tag to fix up the posts.
p img {
font-size:2.5em;
font-weight:normal;
border:none;
line-height:100%;
margin:6px;
padding:6px;
}My line-height was set at 120%. Setting it to 100%, increasing the margin and padding and adding the pclear commands fixed the problem.
-
BTW, in case anyone is interested, the <p style=”clear: both”> is saying something like “stop respecting floating images”. The images are “floating” when you set align=”right” or align=”left” on the <img> tag; that’s the bit that causes the text to flow around images and you sometimes need to explicitly clear it.
-
-
I have been trying to figure this out since the day I started using Word Press! I tried line breaks, paragraph tags, and I don’t know what else…
Thank you, thank you for {p style=”clear: both”}
- The topic ‘words appearing over images’ is closed to new replies.
WordPress.com Forums 
