I have a button which requires a line of text to sit alongside an image, and I’m using text=align left for the image. It works fine for all the browsers I’ve tested for, except IE7. Here’s my code:
<div id="twitter-follow">
<a href="http://mysite.com"><img src="/images/twitter.png" width="37" height="35" alt="Twitter" align="left"><p>Follow me on twitter</p></a>
</div>
#twitter-follow {
width: 410px;
height: 44px;
float: right;
clear: right;
margin: 0 25px 20px 0;
padding: 0 15px;
}
#twitter-follow a img {
margin: 5px 5px 0 0;
}
#twitter-follow p {
padding: 10px 0 0 3px;
}
I’ve tried word-wrap: break-word; and also word-break: break-all but neither has made any difference. Part of the problem is that I don’t know which selector to use word-wrap or word-break with: the <p> or the <div> (#twitter-follow)? Neither seems to be working for me, in any case.
Firstly, you shouldn’t have a <p> (a block level element) inside an <a> (inline element). Not sure why word-wrap would be relevant here, but try this setup instead:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style type="text/css" media="all">
#twitter-follow {width: 410px;height: 44px;float: right;clear: right;margin: 0 25px 20px 0;padding: 0 15px;}
#twitter-follow a img {margin: 0 5px 0 0; vertical-align: middle; border: none;}
#twitter-follow p {padding: 0; margin: 0;}
a {text-decoration: none;}
</style>
</head>
<body>
<div id="twitter-follow">
<p><a href="http://mysite.com"><img src="/images/twitter.png" width="37" height="35" alt="Twitter">Follow me on twitter</a></p>
</div>
</body>
</html>
Thanks for the syntax correction: it’s close to 18 months since I’ve done this and that syntax obviously slipped out of my head in the meantime.
Thanks also for your suggested modification. Unfortunately it hasn’t worked.
I went searching for the answer before posting on this forum, and found lots of blog posts which suggested that word-wrap was the answer, which was why I gave it a try but without success.
The text will by default sit to the right of the image assuming there is space to do so. If you float the image (or use the deprecated align=“left”) the the text will still start alongside the image but will not be on the baseline.
I don’t see where word-wrap:break-word fits into this as word wrap is about breaking an unbroken string of text at the boundary of the container which doesn’t seem to be an issue in this case.
If you wanted the text underneath the image then you could clear the float or set the image to display block and not floated.
Both your original and Ralph’s suggested code give me the same results in IE7 and Firefox with the image to the left and the text to the right of the image. Of course there’s default margins etc to take into account but to give specific help I think we’d need to know a little more about the requirements and what is happening that is wrong with your current set up?
Paul O’B, I see what you mean. I want to have the text sitting alongside the image, but in IE7 this was not happening for my site. I’ve gone back in and had a closer look at things and I suspect the problem may be with some CSS resets I had set up.
However, I’ve now decided that it will work better if I go with Raphaelle’s suggestion to set the image as a background image for the link.
Thanks for your helpful suggestions, and for taking the time to look at this for me.
The problem in your initial code was that you nested a p element inside the anchor which is invalid (in anything but html5) and is bad anyway because it causes browsers to freak out (technical term). As soon as the p element is seen it will create a new line and thus drop down below the image depending on how the browser handles errors like that.
Using valid code as Ralph suggested would have cured the problem as long as that was what you were after.
You can also use the background image approach mentioned above as long as the image was for decoration only. If the image is content then it really should be in the html.
