Trouble with buttons

Discussion in 'CSS' started by Alexander Quinn, Jun 13, 2008.

0
  1. #1
    Im having a problem with my buttons.
    I can get the right one in each div to work but the left one is way out of place and not showing the background.

    this is what it looks like:http://www.uploadpad.com/files/buttonproblem.JPG
    As you can see the second link on each one is below the order button.

    Also the rollover is not working in IE.

    html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>M and J Web Services</title>
<link rel="stylesheet" media="screen" type="text/css" href="stylesheet.css" >
<style type="text/css">
</style>
</head>
<body>
<div class="site-wrapper">
    <div class="header-wrapper">
        <div class="Logo"><a href=""><img alt="logo" src="images/MJLogo.gif" style="border-style: none"></a>
            <div class="navbar">
            <div alight="center">
  <ul>
    <li><a href="#"><b>Home</b></a></li>
    <li><a href="#"><b>Shared Web Hosting</b></a></li>
    <li><a href="#"><b>Dedicated Server Hosting</b></a></li>
    <li><a href="#"<b>E-Business Solutions</b></a></li>
    <li><a href="#"><b>Support</a></b></li>
  </ul>
        </div>
        </div>
    </div>
    <div class="body-wrapper">
        <div class="content-wrapper">
            <div class="main_table">
                <div class="shared_table"><a class="shdbutton_order" href="#"><span>Order</span></a><a class="shdbutton_learn" href="#"><span>Learn More</span></div>
                <div class="dedicated_table"><a class="dedbutton_order" href="#"><span>Order</span></a><a class="dedbutton_learn" href="#"><span>Learn More</span></div>
                <div class="ebusiness_table"><a class="busbutton_order" href="#"><span>Order</span></a><a class="busbutton_learn" href="#"><span>Learn More</span></div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href=""><b>About Us</b></a> |</li>
            <li><a href=""><b>Privacy Policy</b></a> | </li>
            <li><a href=""><b>Terms of Service</b></a> |</li>
            <li><a href=""><b>Contact Us</b></a> |</li>
            <li><b>&copy;2008 M and J Web Services</b> </li>
        </ul>
    </div>
</div>
</body>
</html>
    Code (markup):
    and the stylesheet:
    
/*==============================
SITE WRAPPER
===============================*/
html,body{
    margin:0;
    padding:0;
}
p,h1,h2,h3,h4,h5,h5,ul,ol{
    margin:0 0 1em 0;
    padding:0;
}
ul,ol{margin:0 0 1em 16px;}
body{
    font-family:Arial;
    font-size:12px;
    background:url(images/mjbg.gif);
}
.site-wrapper{
    width:801px;
    margin-top:54px;
    margin-left:auto;
    margin-right:auto;
}

/*==============================
HEADER WRAPPER
===============================*/
.header-wrapper
{
    width:775px;
    height:90;
    margin-left:auto;
    margin-right:auto;
}
.logo{float:left}
.header-menu
{
    z-index: 0;
    margin-top: -40px;
    float:right;
    width:370px;
    height:10x;
}
.navbar ul
{
    z-index: 1;
    flight:left;
    margin: 0;
    margin-top:10px;
    height:35px;
    width: 745;
    list-style-type: none;
    text-align: center;
    background:url(images/navbar.gif);
    background-repeat: no-repeat;
}

.navbar ul li
{
    margin-top: 20px;
    padding: 0px 20px 0px 10px;
    display: inline;
    height: 33px;
}

.navbar ul li a
{

    text-decoration: none;
    height: 33px;
    line-height:35px;
    color: #FFFFFF;
}

.navbar ul li a:hover
{
    color: #FBBD47;
    height: 33px;
}

/*==============================
BODY WRAPPER
===============================*/
.body-wrapper    {
    margin-top:-10px;
    width:801px;
}
/*==============================
Tables
===============================*/

.content-wrapper
{
    margin-top:20px;
    height:483px;
    width:801px;
}

.main_table
{
    height:483px;
    width:743px;
    margin:20 15px;
    padding:150px 14px 14px 14px;
    background:url(images/maintbl.gif);
    background-repeat:no-repeat;
}
/*==============================
Shared Table
===============================*/

.shared_table
{
    z-index: 0;
    height:347px;
    width:243px;
    margin:-25px 0;
    float:left;
    background:url(images/innertbl.gif);
    background-repeat:no-repeat;
    float:left;
}

.shdbutton_order
{
  z-index: 1;
  display: block;
  margin-top: 295px;
  margin-left: 10px;
  width: 103px;
  height: 33px;
  background:url(images/obbutton.gif);
  background-repeat:no-repeat;
}

.shdbutton_order:hover
{

  background-position: 0-33px;

}

.shdbutton_order span
{
  display: none;
}

.shdbutton_more
{

  display: block;
  margin-top: 295px;
  margin-left: 53px;
  width: 103px;
  height: 33px;
  background:url(images/learnbutton.gif);
  background-repeat:no-repeat;
  float:right;


}

.shdbutton_more:hover
{

  background-position: 0 -33px;

}

.shdbutton_more span
{
  display: none;
}
/*==============================
Dedicated Table
===============================*/

.dedicated_table
{
    position:relative;
    float:left;
    margin:-25px 0;
    height:347px;
    width:243px;
    background:url(images/innertbl.gif);
    background-repeat:no-repeat;
}

.dedbutton_order
{
  z-index: 1;
  display: block;
  margin-top: 295px;
  margin-left: 10px;
  width: 103px;
  height: 33px;
  background:url(images/obbutton.gif);
  background-repeat:no-repeat;
}

.dedbutton_order:hover
{

  background-position: 0-33px;

}

.dedbutton_order span
{
  display: none;
}

.dedbutton_more
{

  display: block;
  margin-top: 295px;
  margin-left: 53px;
  width: 103px;
  height: 33px;
  background:url(images/learnbutton.gif);
  background-repeat:no-repeat;
  float:right;


}

.dedbutton_more:hover
{

  background-position: 0 -33px;

}

.dedbutton_more span
{
  display: none;
}
/*==============================
E-Business Table
===============================*/


.ebusiness_table
{
    position:relative;
    height:347px;
    margin:-25px 0;
    float:left;
    width:243px;
    background:url(images/innertbl.gif);
    background-repeat:no-repeat;
}
.busbutton_order
{
  z-index: 1;
  display: block;
  margin-top: 295px;
  margin-left: 10px;
  width: 103px;
  height: 33px;
  background:url(images/obbutton.gif);
  background-repeat:no-repeat;
}

.busbutton_order:hover
{

  background-position: 0-33px;

}

.busbutton_order span
{
  display: none;
}

}
.busbutton_more
{

  display: block;
  margin-top: 295px;
  margin-left: 53px;
  width: 103px;
  height: 33px;
  background:url(images/learnbutton.gif);
  background-repeat:no-repeat;
  float:right;


}

.busbutton_more:hover
{

  background-position: 0 -33px;

}

.busbutton_more span
{
  display: none;
}

/*==============================
FOOTER
===============================*/
a
{
      text-decoration: none
}
.footer
{
     clear:both;
     text-align:center;
}
.footer ul
{
    margin:10px;
    padding:0;
    list-style:none;
}
.footer ul li
{
        display:inline
}
.footer ul li a
{
        color:#000
}
    Code (markup):
    Anyone know how to fix this?
    once i do this im finally done with this layout!
     
    Alexander Quinn, Jun 13, 2008 IP