<br /> drives me crazy!

HTML & CSS
1

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>

2

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

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… :stuck_out_tongue:

3

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

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

 <br clear="all" /><br />
5

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.

6

Try something like

HTML

<p class="news">Sign up for our newsletter to <span>receive a free sample</span> from the program.</p>

CSS

.news {
  color: #3e74ac; 
  font-size: 15px; 
  font-family: tahoma,palatino, serif;
  margin-top: 30px;
}

.news span {
  color: #3ca328;
}
7

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?

8

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

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>

10

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

It’s mindfulnessangermanagement.com

The two widget’s are in the sidebar on the right.

12

OK, so what do you want to change visually here?

13

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.

14

In your style.css file, remove the following lines in red:

.alignleft, img.alignleft {
  [COLOR="Red"]display: inline;
  float: left;[/COLOR]
  margin-right: 15px;
  margin-top: 4px;
}

[COLOR="Red"].alignleft, img.alignleft {
  display: inline;
  float: left;
}[/COLOR]

If that causes layout issues at other points of the site, we can refine those cuts, but see what this achieves. :slight_smile:

15

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.

16

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.

.home .textwidget img.alignleft {
     float: none;
}

That will be safe. :slight_smile:

17

Yeah beautiful, that did the trick. Thanks so much.