Gap Around HTML Element

User 2098492 Photo


Registered User
60 posts

I'm using an HTML element inside of a column to include the menus for my main page. As you can see in the attached image, there is a gap between the first and second rows (above the menus). After inspecting the elements, I cannot determine what is causing the height to be 59px. It should be 36px.

Here's the link to the page: http://www.datacad.com/datacad_index.html
Attachments:
User 2484360 Photo


Registered User
3,293 posts

Take a look at your HTML Element and make sure there is no extra coding.

In the inspector of the page I see "" added above the Menu.
User 2098492 Photo


Registered User
60 posts

This is the text of my include as generated by Menu Builder. If I paste this code directly into the HTML element field in RSD instead, the top gap is eliminated, but there's still a small gap on the right, left, and bottom.
See: http://www.datacad.com/datacad_index.html

<!-- Start of the body content for CoffeeCup Menu Builder -->
<div id="menuBuilderContainer">
<div id="menuBuilder">
<button class="nav-button button bar"><i class="icon_menu_handle"></i><span class="text_menu_link">datacad.com -- Menu</span></button>
<div id="nav" class="nav">
<ul id="mainmenu" class="nav-collapse">
<li id="menu_1" class="menu_1 menu_items">
<a href="/">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">Home</span>
</a></li>
<li id="menu_2" class="has-flyout menu_2 menu_items">
<a href="products/">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">Products</span>
</a>

</li>
<li id="menu_3" class="menu_3 menu_items">
<a href="support/">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">Support</span>
</a></li>
<li id="menu_4" class="has-flyout menu_4 menu_items">
<a href="demo/">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">Free Trial</span>
</a>

</li>
<li id="menu_5" class="menu_5 menu_items">
<a href="https://www.datacad.com/cgi-bin/commerce.cgi?display=home">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">Store</span>
</a>
</li>
<li id="menu_6" class="menu_6 menu_items">
<a href="http://forum.datacad.com/">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">Forum</span>
</a>
</li>
<li id="menu_7" class="menu_7 menu_items">
<a href="contact/">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">Contact</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- End of the body content for CoffeeCup Menu Builder -->
User 2098492 Photo


Registered User
60 posts

Interesting. If I use an include to add the menu code, a "" gets added in front, though you won't see it when you view the source. There are no spaces at the beginning or end of the included html file.
Attachments:
User 2098492 Photo


Registered User
60 posts

The bottom gap was coming from the difference between the menu height of 32px and the min row, col, html height of 36 px. Now I just have to figure out where the right/left gaps are coming from.
User 187934 Photo


Senior Advisor
18,128 posts

Give your row the same background color as your menu.
There's left and right padding on the row of 8px
Go to the menu builder and make you menu buttons 14.28% wide.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2098492 Photo


Registered User
60 posts

Doh! I've got 7 menus at 14% each which equals 98%. I've set them to 14.2% to fill the gap. Regardless, I'll also set the background color to match. ;)
User 2098492 Photo


Registered User
60 posts

Is the 8px row padding 'hard-coded?' I don't see it in the interface values.
User 187934 Photo


Senior Advisor
18,128 posts

Sorry padding is on the column.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2098492 Photo


Registered User
60 posts

O.K., I found it. That gets me a lot closer. I'll have a few more questions for you tomorrow I'm sure. :P

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.