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
Gap Around HTML Element
Mark Madura
Registered User
60 posts
Adam East
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.
In the inspector of the page I see "" added above the Menu.
Mark Madura
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
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 -->
<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 -->
Mark Madura
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.
Mark Madura
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.
Eric Rohloff
Senior Advisor
20,195 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.
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.
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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mark Madura
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. 
Mark Madura
Registered User
60 posts
Is the 8px row padding 'hard-coded?' I don't see it in the interface values.
Eric Rohloff
Senior Advisor
20,195 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.
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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
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 personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Mark Madura
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. 
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.
