SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text wrapping and IE7

    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:

    Code HTML4Strict:
    <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>

    Code CSS:
    #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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <!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>

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Zealot Raphaelle's Avatar
    Join Date
    Jul 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I were you I would either
    • set the image as a background image for the link
    • or put the text of the button into a SPAN and float the image and SPAN

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TraceyG View Post
    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.
    Hi,

    It's not clear what you want to happen exactly.

    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?

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Location
    Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •