SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <br /> drives me crazy!

    I have a wordpress site and am having incredibly inconsistent and crazy results with the <br /> tag. I put it on one of my pages to create a break, and one minute it works, the next it doesn't. I put it in one html side widget and it works, and put it the same code in another widget, and it doesn't. It goes back and forth like this with no logic. It will suddenly work, and one day one of my pages it will just stop working, out of nowhere, just like that.

    One example below of a widget where the line break works in one widget, but I put the same code in another widget and it doesn't work. It's driving me crazy.

    Any suggestions?

    <br /><p style="text-align: left;"><span style="color: #3e74ac; font-size: 15px; font-family: tahoma,palatino;">Sign up for our newsletter to <span style="color: #3ca328;">receive a free sample</span> from the program.</span></p>
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. You have a line break (the <br />) before any of the text (I'm assuming you want a space above the paragraph) and a hot mess of inline CSS and overalapping spans. I know Wordpress doesn't handle HTML/CSS as cleanly as hand-coded designs, but there's a lot of ... stuff going on here. In a way, having the line break not appear as your only problem is not such a bad thing!

    Edit: In light of Ralph's post below, it might have been good for me to actually address the problem rather than just sniping at the code...

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You shouldn't be using <br> between block elements, but within them—and then only rarely. Instead, you should be using padding and/or margins to visually separate items—or, in other words, CSS.

    Most of the time there is a better option than the br element.

  4. #4
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure about the widgets, but their structure may be stopping your line break from working. As a test (although not a best practice) try

    Code:
     <br clear="all" /><br />

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for your help. I tried using the margin within the paragraph style but had no luck. Maybe the code is so messed up that nothing is working now.

    Is there anywhere you can recommend where I could learn how to do this? I tried w3 schools but don't see what I need there. I understand how to make changes to my style.css file - somewhat - but don't know how to do the code for widgets or pages on my wordpress site.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Try something like

    HTML
    Code:
    <p class="news">Sign up for our newsletter to <span>receive a free sample</span> from the program.</p>
    CSS
    Code:
    .news {
      color: #3e74ac; 
      font-size: 15px; 
      font-family: tahoma,palatino, serif;
      margin-top: 30px;
    }
    
    .news span {
      color: #3ca328;
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Try something like

    HTML
    Code:
    <p class="news">Sign up for our newsletter to <span>receive a free sample</span> from the program.</p>
    CSS
    Code:
    .news {
      color: #3e74ac; 
      font-size: 15px; 
      font-family: tahoma,palatino, serif;
      margin-top: 30px;
    }
    
    .news span {
      color: #3ca328;
    }
    Hello and thank you.

    I did it and the text appears with the right colors etc., but the margin isn't working. I've tried up to 90 px and the position still doesn't change, and it's right below the widget above it. I also tried changing it from margin to 'padding' and that didn't work.

    Any ideas?
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by fifthhouse View Post
    the margin isn't working. I've tried up to 90 px and the position still doesn't change
    Sounds like the previous element is floated. Is that the case? If so, place bottom margin on the floated item instead, or preferably un-float it if it doesn't need to be floated.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what 'floated' means. But here is the code from the widget above it:

    <a href="/anger-management-programs"><br><img src="http://mindfulnessangermanagement.com/wp-content/uploads/2011/08/frontpage.jpg" class="alignleft" /></a>
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Could you post a live link to this? Otherwise we are shooting in the dark here. You can PM it to me if you like.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's mindfulnessangermanagement.com

    The two widget's are in the sidebar on the right.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, so what do you want to change visually here?

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, so what do you want to change visually here?
    I want to move the words: Sign up for our newsletter to receive a free sample from the program.

    down two or three line breaks distance, so there is a space between them and the image above.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    In your style.css file, remove the following lines in red:

    Code:
    .alignleft, img.alignleft {
      display: inline;
      float: left;
      margin-right: 15px;
      margin-top: 4px;
    }
    
    .alignleft, img.alignleft {
      display: inline;
      float: left;
    }
    If that causes layout issues at other points of the site, we can refine those cuts, but see what this achieves.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for this code and advice. I don't want to seem ungrateful but I don't want to do that. The code is there for a reason and I don't want to potentially create problems for myself, that might not be obvious to me now but could appear later on. I realize there are some problems with my code but I am going to keep searching for a solution I can implement right from the widgets.

    Again though, thank you. Your help is much appreciated.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, I understand. However, it is CSS that is causing the problem, so best to use CSS to fix it. If you add this to style.css, it will just apply to that one instance of the widget on the home page, and thus not affect anything else on the site.

    Code:
    .home .textwidget img.alignleft {
         float: none;
    }
    That will be safe.

  17. #17
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah beautiful, that did the trick. Thanks so much.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond


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
  •