My button is out of position?

kmgilbert · 06-24-2012, 01:15 AM

This just randomly happened, and I don't know whats wrong. I've triple checked over all my code and couldn't find what was wrong. What I am working on here is for my client and I really need to get this fixed so I can finish the rest of it. So whatever help will be greatly appreciated

. Thanks in advance!

Here is what is happening Note its the blue box that is messing up

Here is my CSS Code

Code:

/* CSS Document */
* {
	padding:0;
	margin:0;
}

body {
	background-color:#ebebeb;
}

#graphic-container {
	margin-top:70px;
	vertical-align:middle;
	height:531px;
	max-height:531px;
	max-width:494px;
	width:494px;
	background-color:#fdeada;
	background-image:url(../images/inside-background.png);
	background-repeat:no-repeat;
	background-position:center center;
	border:4px solid #395e8a;
}

#red_btn {
	background-image:url(../images/red_btn.png);
	background-repeat:no-repeat;
	height:168px;
	width:171px;
	margin-top:75px;
	margin-left:70px;
	float:left;
}

#green_btn {
	background-image:url(../images/green_btn.PNG);
	background-repeat:no-repeat;
	height:180px;
	width:168px;
	margin-top:75px;
	margin-right:70px;
	float:right;
}

#purple_btn {
	background-image:url(../images/purple_btn.PNG);
	background-repeat:no-repeat;
	height:168px;
	width:173px;
	margin-top:9px;
	margin-left:70px;
	float:left;
}

#blue_btn {
	background-image:url(../images/blue_btn.PNG);
	background-repeat:no-repeat;
	width:180px;
	height:168px;
	margin-top:9px;
	margin-right:70px;
	float:right;
}

.red_btn_text {
	float:left;
}

Here is my HTML Code

Code:

<!--
Script Written By: Kevin Gilbert
Programmer Contact Information: kevin@scriptingfire.com
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clickable Graphics Project</title>
</head>

<body>
	<center>
	<div id="graphic-container">
    	<!-- START Top 2 Button Container -->
        <div id="top_btn_container">
        	<!-- START Red Button -->
            <div id="red_btn">
            </div>
            <!-- END Red Button -->
            <!-- START Green Button -->
            <div id="green_btn">
            </div>
            <!-- END Green Button -->
        </div>
		<!-- END Top 2 Button Container -->
		<!-- START Bottom 2 Button Container -->
        <div id="bottom_btn_container">
        	<!-- START Purple Button -->
            <div id="purple_btn">
            </div>
            <!-- END Purple Button -->
            <!-- START Blue Button -->
            <div id="blue_btn">
            </div>
            <!-- END Blue Button -->
        </div>
        <!-- END Bottom 2 Button Container -->
	</div>
    </center>
</body>
</html>

EpicWebDesign · 06-24-2012, 03:24 PM

The first thing I noticed about your code is that all the images are different sizes.

The red and purple buttons have the same height of 168px, but different widths (only 2px difference so not that big of a deal) One is 171px and the other is 173px.

However, your green and blue are totally different. Green is 180px H by 168px W. Blue is just the opposite. 168px H by 180px W. That may be where you problem is. Did you maybe mix up the height and width on one of those? (I'm guessing green since all other buttons are 168px high and it does appear to be a tad elongated vertically and cut off on the right side.)

If not, it could be in your CSS. There is no mention of the top_btn_container or bottom_btn_container and your buttons aren't nested inside them. (Just to test, I manually assigned a style="border:4px solid #395e8a;" to each and saw they just sit at the top of the pink graphic and your buttons are all over the place.) I removed them completely and it made no difference to the layout.

Hopefully one or both of these suggestions will be the easy fix you need.