Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 97
  • Last Modified:

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

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
brucegust
Asked:
brucegust
2 Solutions
 
Branislav BorojevicFounderCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
brucegustPHP DeveloperAuthor Commented:
I figured it out, gentlemen! Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now