Responsive CSS, HTML button div graphic - looking right all devices

Got it. Except there's a gap sometimes on the end of the round buttons of 1 px. A 1 px indent. I've attached an image. It's a small thing, but why is this happening?

image attached
indent.gif

#home-menu
{
background:#3babdd;
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom
{
max-width:100%;
height:auto;
}

#home-menu, #home-menu .top,#home-menu .bottom,#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
float:left;
padding:0px;
margin:0px;
background:transparent;
}

#home-menu .top-4-guides,#home-menu .8-minute-video,#home-menu .faq,#home-menu .glossary, #home-menu .best-6-adult-diapers
{
max-height:155px;
max-width:133px;
overflow:hidden;
background-transparent;
}

#home-menu .top
{
margin-bottom:-12px;
max-width:100%;
}

#home-menu .bottom
{
margin-top:-9px;
max-width:100%;
background-color:#3babdd;
}

.holder-buttons-home
{
max-width:100%;
height:auto;
background-color:#3babdd;
}

.holder-buttons-home div {
	width: 16.666666%;
	height:auto;
	background-color:#3babdd;
}

.holder-buttons-home div img {
	width:100%;
	max-height:133px;
}

Select allOpen in new window

<div id="home-menu" style="text-align:center;background-color:#3babdd;">
<div class="top">
	<img alt="top of menu that says, relax, breath, you've come to the right place, clickable menu below" src="/assets/images/top2.gif" style="width: 100%;">
	</div><div class="holder-buttons-home" style="text-align:center">
				<br>
		<div class="top-4-guides" style="float:left">
		<a href="#top-4-guides"><img alt="top 4 guides button" src="/assets/images/top-4-guides2.gif"></a>
		</div>
		<div class="shop-by-category" style="float:left">
		<a href="#shop-categories"><img alt="shop-by-category button" src="/assets/images/shop-by-category2.gif"></a>
		</div>
		
		<div class="8-minute-video" style="float:left">
		<a href="#8-minute-video"><img alt="8-minute-video button" src="/assets/images/8-minute-video2.gif"></a>
		</div>
		
		<div class="best-6-adult-diapers" style="float:left">
		<a href="#best-6"><img alt="best-6-adult-diapers button" src="/assets/images/best-6-adult-diapers2.gif"></a>
		</div>
		
		<div class="faq" style="float:left">
		<a href="#faq"><img alt="faq" src="/assets/images/faq2.gif"></a>
		</div>
		
		<div class="glossary" style="float:left">
		<a href="#glossary"><img alt="glossary button" src="/assets/images/glossary2.gif"></a>
		</div>
	</div>
		<br>
	<div class="bottom" style="float:left;width:100%;">
	<img alt="bottom of menu with testimonial" src="/assets/images/bottom2.gif">
	</div>
</div>

Select allOpen in new window

there's a gap sometimes on the end of the round buttons of 1 px. A 1 px indent. I've attached an image. It's a small thing, but why is this happening?

I believe, that's because of the width precision calculation error.
100% / 6 buttons = 16.6666666666666666666666666666(6) % each
But we set the button width with a rough value of 16.666666%;
(So, if there were 4 or 5 buttons instead of 6, the gap would not appear.)
To hide that gap, we could try to make the height of the buttons div container (which has the background-color:#3babdd and which height collapses because all the children are floating to the left) be actually equal to the buttons height.
I am not sure how to do that correctly, but if you change its display mode to "table", it will actually wrap its children.

<div class="holder-buttons-home" style="text-align:center;max-width:100%;background-color:#3babdd;display: table;">

Select allOpen in new window

I noticed one more thing. The quote (white on blue at the bottom) doesn't scroll smaller as the screen shrinks. Can you help me with that? Last thing.

I tried to fix it and it left a white space to the right.

Thanks.

Last thing.

bob

By the quote, do you mean  this one - "I just cot off the phone with..." ?
The img element does not have the width set.
I've change the code to the following:

<div class="bottom" style="float:left;width:100%;height:auto"> <img alt="bottom of menu with testimonial" src="/assets/images/bottom2.gif" style="width: 100%;"> </div>

Select allOpen in new window

It resizes fine now.

Slick812,

I really want to clean up my code unfortunately:

1. I've modified the code to serve something else mobile-ly and I can't get yours to work for it.
2. I think I've had this question answered well.

I'm going to open up a new ticket about cleaning up my code and getting what I serve to mobile to look right.

Can you look for that question and help?

I absolutely love how clean your code is and I'm very thankful.

Closing this question. Thanks everyone.

Bob

Thanks a lot guys. You are both very skilled and talented.

You're welcome