is there a line break bug with WordPress?

When I copy past code from dreamweaver into a page in wordpress (while in "HTML mode") it seems to add a line break everytime the code starts on a new line.
<div class="gallery_box">
                            <a class="grouped_elements" rel="pro" href="images/pro/ftba-pro-01.jpg"  title="photo courtesy of Adam Scard">
                            <img src="images/pro/ftba-pro-01s.jpg" alt="" class="gallery_img"  /></a>
                        	<a class="grouped_elements" rel="pro" href="images/pro/ftba-pro-02.jpg" title="photo courtesy of Scott Fantini">
                            <img src="images/pro/ftba-pro-02s.jpg" alt="" class="gallery_img"  /></a>

Open in new window

So on the website it should look like:
[linked image][linked image]
but it actually looks like:
[linked image]
[linked image]

This is really frustrating.
I notice that if I switch from HTML mode to VISUAL mode, it removes any actual <BR>'s and puts the following code on a new line.

How can I stop it doing this?
ReeceICT ConsultantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
Are you sure it's due to line breaks in the code and not CSS issues with the theme causing too much margin so the second image wraps?
Abhijeet RananawareWeb & Mobile DeveloperCommented:
Try saving directly .Don't click on visual.Directly save.Second You need to check css for gallery box, gallery_img

ReeceICT ConsultantAuthor Commented:
@jason1178: It's definately nothing to do with CSS and wrapping.  The text I'm about to show you is is less than 30 characters in a 760px wide div.  Using the gallery early was a poor choice of example as it caused unnecessary confusion.

@webmatrixpune:  If I edit and save directly, the BR's stay there and the page reflects them.  But it still shows the code on a new line as having an extra line break.  If I toggle to Visual mode, then back, it removes the line breaks I put in and replaces them with just new lines.
 This in theory should only be ONE blank line... But as you can see, it shows THREE... the two BR's and the new line.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Abhijeet RananawareWeb & Mobile DeveloperCommented:
Can i get link to site ?

ReeceICT ConsultantAuthor Commented:

If you can let me know what I need to do to get the comments showing, that'd be awesome.
It's a custom built theme (from scratch) so I might be missnig a few crucial sections.
Jason C. LevineDon't talk to me.Commented:
What I think is going on is the visual editor (which is not pure HTML in the HTML tab) is picking up the CRLF (\r\n) sequence that DW sticks in its code and renders that as you see it.

See what happens when you use this plugin:
Abhijeet RananawareWeb & Mobile DeveloperCommented:
You want output like screenshot??

For Comments
check following link

then do following things

Add code to page.

Add following css to style.css

.sponsors {
      margin:0 10px 0 35px;
.sponsors p {
      margin: 4px 0 4px 0;
.sponsors em{
.sponsors h2 {
      font-size: 28px;
      font-weight: bold;
      color: #303025;
      margin:10px 0 10px 0;
.sponsors h1, .sponsors h1 a{
      margin:30px 0 10px 0;
.sponsors h3, .sponsors h4 {
      color: #303025;
      margin:15px 0 10px 0;
.sponsors h4 {
.sponsors h1:hover, .sponsors h3:hover, .sponsors h4:hover {}
.sponsors .indent {
.sponsors .indent p {
.sponsors small {
.sponsors small a {
.sponsors .alignright {
.sponsors .alignleft {
.sponsors .aligncenter {
      margin:0 auto;
.sponsors abbr {
.sponsors ul{
      margin:0 0 0 25px;
.sponsors ol{
      margin:0 0 0 30px;
.sponsors .wp-caption {
      border:1px solid #ccc;
      padding:5px 0 0;
.sponsors .wp-caption-text {
.sponsors .wp-caption a, .sponsors .wp-caption a:hover {
.sponsors blockquote {
      border-left:5px solid #ccc;
      margin:15px 30px 0 10px;
.sponsors pre {
      margin:14px 0 14px 0;
.sponsors .message ul {
      margin:12px 0 0;
.sponsors .message {

<div class="sponsors">
			<h2>Sponsors for 2012</h2>
<h3>Major Sponsors</h3>
<p>No Bull Butcher</p>
<p>Jungle Surf</p>
<p>Primary Printing</p>
<p>Scardy 4 Life</p>
<p>Hogs Breath Forster</p>
<p>Joes Auto (aka Repco Forster)</p>
<p>Natural Ice Creamery (main street)</p>
<p>Buko’s Bistro</p>
<div style="border-bottom: dotted #666 1px !important;">&nbsp;</div>
<h3>Minor Sponsors</h3>
<p>Michelle’s Jewelers</p>
<p>Dunes International</p>
<p>Reef Bar &amp; Grill</p>
<p>Shane Chalker Photography</p>
<p>Wagner Painting</p>
<p>Rewind Digital Media</p>
<p>NSWBB (NSW BodyBoarding)</p>
<div style="border-bottom: dotted #666 1px !important;">&nbsp;</div>
<p>Pacific Palms seafood</p>
<p>Bright Eyes Sungalsses</p>
<p>The Advocate</p>
<p>Focus Magazine</p>
<p>Forster Tuncurry First National</p>

Open in new window

ReeceICT ConsultantAuthor Commented:
Thanks Jason... I tried that plugin and it did nothing.  The result was still the same... The visual editor strips the BR's and the HTML editor acts as if a new line of code is separated by a line break.

Webmatrixpune... I'll try your comments link shortly, but I think your missing my point with the BR issue.  The problem is occurring on EVERY SINGLE wordpress edited section whether it be a "page" or a "post".  I think Jason kind of understands the issue but his suggestion didn't help.

Thanks for sticking with me guys
Jason C. LevineDon't talk to me.Commented:
Shoot, so much for the easy fix.

What happens if you go from DW to Notepad to WP?
ReeceICT ConsultantAuthor Commented:
i don't think it's a dw issue...
the sponsors page was just text copied from a pdf.
other pages (such as the Info page I literally just hand typed using the HTML mode of the editor) are copy pasted, hand typed (using HTML) or edited using the VISUAL  mode.

I've attached a series of screenshots of the Info page I just made...
 typing the page contents in HTML switching to VISUAL switching back to HTML - see what it did to my code!!! what it looks like on the site (doesn't matter whether I used visual or html, it see's the BR's unless they were stripped by visual first.  It still see's a new line of code as being separated by a li
Abhijeet RananawareWeb & Mobile DeveloperCommented:
Its simple answer to your issue..

What happens when you type in HTML ..wordpress editor loads css from template and adjusts the text according to CSS .

For eg

<p> tag has got 14 px margin at top and 14 px margin at bottom thats why it adds 2 lines in between text

For h2 tag ...margin is 10px

so 10px+14px=24px .

Change your margins.It will fix

ReeceICT ConsultantAuthor Commented:
I'm not sure I understand how that is creating the problem though...
I understand what you mean, but why does (in the HTML editing mode):
<span>text line 1<br />text line 2</span>
show exactly the same as:
<span>text line 1
text line 2</span>

In the second one above, I did not type a <br />, so why does it line break on the live result...?
"text line 1
text line2"
Shouldn't it show as "text line 1 text line 2"  ???

If what you're saying about the CSS .post p {margin:14px 0;} is true, does that mean the wordpress editor's HTML mode is seeing a new line as a new <p>?  I though it was seeing the new line as a <br />, when it should be ignoring it.

I'm not concerned about the margin between the h2 and the p... more by the fact that if I want to "edit" in HTML mode, I have to make sure NOTHING is separated in the code by a new line, else it will see it as a <br /> and screw up the layout...

Eg.  I can't use:

text line 1<br/>
text line 2<br />
conclusion text.

I'd have to use:
<h2>title</h2><br/></br>text line 1<br/>text line 2<br /></br>conclusion text.

else it would see every new line of code as another <br />

I'm so confused...!
Abhijeet RananawareWeb & Mobile DeveloperCommented:
oh!!!!!!!!!!!!!!!!!!!!!!! .... Wordpress editor strips <br/> tags!..

Install this editor

After installing-activating, the option to enable line breaks can be found in the Settings->TinyMCE Advanced panel.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ReeceICT ConsultantAuthor Commented:
thankyou thankyou thankyou.

TinyMCE Advanced worked fine.
And yes, now that the HTML editor shows "true" HTML, it seems that a new line in the old HTML was being treated as a </p><p>... So you were partially right in that it was my CSS for .post p that was creating such a gap.
Abhijeet RananawareWeb & Mobile DeveloperCommented:
Glad you finally resolved problem... :-)

Cheers And Regards,
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.