?
Solved

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

Posted on 2016-08-02
3
Medium Priority
?
84 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 1000 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 1000 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

Independent Software Vendors: 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!
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

719 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