Solved

Is there any way I can get rid of this line break?

Posted on 2016-08-02
3
77 Views
1 Endorsement
Last Modified: 2016-08-08
Here's my code:

<div id="foo" style="display:none; border:1px solid #cccccc; padding:10px; border-radius:10px; margin-bottom:25px;">Products are catgorized according to a Macro Category->Category->Subcategory hierarchy.<br><br>
Below, you'll see all of the Macro Catgories in blue. Below each of the Macro Categories are their corresponding Categories which are listed in a dark grey background. In most, but not all instances, you've got a Subcategory listed under each Category. Those Categories that do not have a series of Subcategories attached to them have an "Edit | Delete" option listed to the right. </div>
<?php include ("help.php"); ?>

Open in new window


Here's how it looks before you hit the link that triggers the Javascript that makes it go from "display:none;" to "display:block;"

Here's the Javascript:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
//-->
</script>

Open in new window


The Javascript works fine and the page looks good AFTER you hit the link to make the text visible. Prior to that, however, I've got a problem. There's too much of a gap between the hidden text and the next line. Here's a screenshot:

too many line breaks...
Is there a way to remove the extra line break? Again, it looks great when I click on "here," but prior to that, it looks like it's a mistake and I want an equal amount of carriage returns between my paragraphs.

What do you think?
1
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 4

Accepted Solution

by:
Branislav Borojevic earned 250 total points
ID: 41740103
I think the most important part of getting to the bottom of your issue is to see the rest of the code. Because the issue clears out after the button is pressed, the issue seems to lay somewhere else, and is not directly linked to the div that is hidden.

Maybe if you link any CSS that you have for the rest of the content, that might be the culprit.

I doubt that the issue is caused by the script or the div that is hidden initially.
2
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 250 total points
ID: 41740105
I agree with Branislav Borojevic. The problem is likely the margins attached to the elements above and below the hidden div. Something is preventing these margins from overlapping when the div is hidden. Then when the div is not hidden, it either has no margin or its margins are being allowed to overlap those above and below. We need to see the code for the other elements and the CSS applied to them. The best way to do this is to give us a link to the actual page.
1
 

Author Comment

by:brucegust
ID: 41747572
I figured it out, gentlemen! Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question