Solved

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

Posted on 2016-08-02
3
60 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Animated .jpg? 13 57
Syntax Error 2 42
Change javascript css 1 16
Change CSS to show Notification Bar 9 11
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

929 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now