Help! Roll-over link alignment & centering a div within a div...

issentia

I'm working on this site:
http://www.essenceofsoy.com/redesign/index2.html

and I'm having a few problems with getting the layout exactly right.

1) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is below the word. This happens in both Firefox and IE6.

2) In Firefox, the pink quote banner and two gray form boxes above and below the content aren't centered in the "content" div, and I can't figure out to center a div within another div! I used display: table which works great in Firefox, but in IE 6, nothing seems to be working for me!

If anyone can help me with any of the above problems, I would be so grateful!
I'm a newbie at this DIV/CSS thing, so please bear with my messy code.
I can provide screenshots if needed.

Thanks again!

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<title>Essence of Soy - Gourmet Candles & Fine Products</title>

<!--[if lt IE 7]>

<script type="text/javascript" src="unitpngfix.js">

</script>

<![endif]-->
 
<!--[if IE]>

<style>

.parent    {

    margin-left: 15%;

    width: 100%;

    margin-right: 15%;

    }

</style>

<![endif]-->
 
<style>

*     {

    margin: 0;

    padding: 0;

    border: 0;

    text-align: left;

    }
 
body    {

    width: 100%

    background: #fff;

    text-align: center;

    }
 
.wrapper{

    margin: 0 auto;

    clear: both;

    display: table;

    }
 
.fr    {

    float: right;

    margin:    0;

    }
 
.fl    {

    float: left;

    }
 
h1    {

    background: url(images/logo.jpg) no-repeat;

    margin: 0;

    display:inline;

    float:left;

    overflow: hidden;

    width: 263px;

    height: 72px;

    }
 
h1 a    {

    margin: 0;

    display: inline;

    float: left;

    overflow: hidden;

    width: 263px;

    height: 72px;

    text-indent: -100em;

    }
 
#header {

    width: 100%;

    text-align: left;

    margin-top: 0;

    margin-left: 0;

    padding: 0;

    overflow: hidden;

    clear: both;

    padding-top: 5px;

    background: #fe79a4 url(../images/header.jpg) repeat-x;

    }
 
#header .main

    {

    width: 60%;

    margin-left: 20%;

    margin-right: 20%;

    text-align: left;

    clear: both;

    overflow: hidden;

    }
 
#bubble    {

    position: absolute;    

    width: 60%;

    background: transparent;

    margin-left: 20%;

    margin-right: 20%;

    top: 5px;

    right: 0px;

    text-align: right;

    overflow: hidden;

    }
 
#menu    {

    text-align: left;

    width: 100%;

    clear: both;

    padding-bottom: 5px;

    padding-top: 5px;

    float: top;

    padding: 0;

    overflow: hidden;

    background: #e94a72 url(images/menu.jpg) repeat-x;

    }
 
#menuin    {

    margin-left: 200px;

    }
 
#menu ul

    {

    text-align: left;

    display: inline;

    margin: 0;

    padding: 0;

    }
 
#menu li

    {

    text-align: left;

    display: inline;

    list-style: none;

    margin-left: 30px;

    padding: 0;

    float: left;

    font-size: 150%;

    }
 
li.home a

    {

    text-align: left;

    background: url(images/homea.jpg);

    display: block;

    width: 50px;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    }
 
li.home a:hover 

    {

    text-align: left;

    background: url(images/homea.jpg);

    background-position: -50px 0;

    }
 
li.about a

    {

    background: url(images/abouta.jpg);

    display: block;

    text-align: left;

    width: 50px;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    }
 
li.about a:hover 

    {

    text-align: left;

    background: url(images/abouta.jpg);

    background-position: -50px 0;

    }
 
li.shop a

    {

    background: url(images/shopa.jpg);

    display: block;

    width: 50px;

    text-align: left;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    margin-left: 5px;

    }
 
li.shop a:hover 

    {

    text-align: left;

    background: url(images/shopa.jpg);

    background-position: -50px 0;

    }
 
li.join a

    {

    background: url(images/joina.jpg);

    display: block;

    width: 50px;

    text-align: left;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    }
 
li.join a:hover

    {

    text-align: left;

    background: url(images/joina.jpg);

    background-position: -50px 0;

    }
 
li.contact a

    {

    background: url(images/contacta.jpg);

    display: block;

    width: 70px;

    text-align: left;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    }
 
li.contact a:hover

    {

    background: url(images/contacta.jpg);

    background-position: -70px 0;

    }
 
#trimt    {

    width: 100%;

    float: top;

    overflow: hidden;

    height: 23px;

    background: #fff url(images/trimtop.jpg) repeat-x;

    }
 
.contentwrap

    {

    width: 100%;

    text-align: center;

    }
 
#content{

    float: top;

    background: #fff;

    text-align: left;

    padding: 5px;

    width: 60%;

    margin: 0 auto;

    color: #989898;

    font-size: 13px;

    font-family: trebuchet ms, georgia, tahoma;

    line-height: 14px;

    }
 
.emc

    {

    font-weight: normal;

    font-size: 16px;

    color: #ff79a4;

    }
 
.quote    {

    padding: 0;

    line-height: 24px;

    font-family: georgia, times;

    font-size: 23px;

    width: 70%;

    color: #fff;

     background: #ffb8ce;

    margin: 0 auto;

    }
 
.quoteblock

    {

    display:block;

    width: 70%;

    margin: 0 auto;

    }
 
.quoteblock *

    {

     display:block;

     height:1px;

     overflow:hidden;

     font-size:.01em;

     background:#ffb8ce

    }
 
.quoteblock1

    {

    margin-left:3px;

    margin-right:3px;

      padding-left:1px;

      padding-right:1px;

      border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce;

      background:#ffb8ce

    }
 
.quoteblock2

    {

      margin-left:1px;

      margin-right:1px;

      padding-right:1px;

      padding-left:1px;

      border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce;

      background:#ffb8ce

    }
 
.quoteblock3

    {

    margin-left:1px;

      margin-right:1px;

      border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce;

    }
 
.quoteblock4

    {

    border-left:1px solid #ffb8ce;

     border-right:1px solid #ffb8ce

    }
 
.quoteblock5

    {

     border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce

    }
 
.emq

    {

    font-style: none;

    font-size: 32px;

    }
 
.quote i

    {

    float: right;

    }
 
#box    {

    background: #f0f0f0 url(images/info.jpg) no-repeat;

    width: 254px;

    height: 169px;

    overflow: hidden;

    margin: 25px;

    display: block;

    }
 
#boxentry

    {

    color: #636363;

    font-family: trebuchet ms, georgia, tahoma, sans;

    font-size: 12px;

    line-height: 14px;

    padding: 15px;

    width: 254px;

    height: 169px;

    overflow: hidden;

    }
 
#boxentry br

    {

    line-height: 10px;

    }
 
h5    {

    color: #5c3428;

    font-family: georgia, times, sans;

    font-weight: lighter;

    font-size: 22px;

    line-height: 14px;

    }    
 
#footer{

    position: absolute;

    width: 100%;

    height: 64px;

    background: #5c3428 url(images/trimbottom.jpg) repeat-x;

    clear: both;

    left: 0;

    padding: 0px;

    }
 
#spacer    {

    clear: both;

    margin: 0;

    bottom: 0;

    height: 3px;

    }
 
.fnav    {

    color: #fff;

    font-family: trebuchet ms, tahoma, verdana;

    font-size: 12px;

    float: left;

    line-height: 14px;

    }
 
.fcopy    {

    color: #fff;

    font-family: trebuchet ms, tahoma, verdana;

    font-size: 12px;

    width: 100%;

    padding: 0;

    line-height: 14px;

    text-align: right;

    float: left;

    }
 
/* ----------- Form ----------- */

.form

    {

    margin:0 auto;

    width:200px;

    padding:14px;

    }
 
/* ----------- style1 ----------- */

#style1    {

    border: 0;

    background:transparent;

    }
 
#style1 h1

    {

    font-size:13px;

    font-weight:bold;

    margin-bottom:8px;

    }
 
#style1 p{

    font-size:11px;

    color:#666666;

    margin-bottom:20px;

    border-bottom:solid 1px #b7ddf2;

    padding-bottom:10px;

    }
 
#style1 label

    {

    display:block;

    font-weight:bold;

    text-align:right;

    width:140px;

    float:left;

    }
 
#style1 .small

    {

    color:#666666;

    display:block;

    font-size:11px;

    font-weight:normal;

    text-align:right;

    width:140px;

    }
 
#style1 select

    {

    border: solid 1px #000;

    color: #000;

    opacity: .5;

    font-size: 11px;

    font-family: georgia;

    }
 
#style1 input

    {

    float:center;

    font-size:11px;

    padding:2px 2px;

    border:solid 1px #000;

    color: #000;

    width:200px;

    opacity: .5;

    font-family: georgia;

    margin:2px 0 0 2px;

    }
 
#style1 button

    {

    clear:both;

    float: right;

    margin-top: 5px;

    width:94px;

    height:21px;

    background:#494949 url(images/button.png) no-repeat;

    text-align:center;

    padding: 0;

    color:#fff;

    font-size:13px;

    font-weight: normal;

    }
 
#corner    {

    position: absolute;

    right: 0;

    top: 0;

    margin: 0;

    padding: 0;

    background: transparent;

    z-index: 99;
 
    }
 
</style>

</head>

<body>
 
<!--TOP LAYOUT-->
 
<div id="header">
 
<div class="main">

<h1><a href="index.html">Essence of Soy</a></h1>

</div>
 
</div>
 
<div id="bubble">

<img src="images/sbubble.png">

</div>
 
<div id="corner"><a href="makeadifference.html"><img src="images/bcbanner.png"></a></div>
 
<div id="menu">

<div id="menuin">
 
<!-- BEGIN NAV-->
 
<ul>

    <li class="home"><a href="index2.html">Home</a></li>

    <li class="about"><a href="about.html">About</a></li>

    <li class="shop"><a href="shop.html">Shop</a></li>

    <li class="join"><a href="join.html">Join</a></li>

    <li class="contact"><a href="contact.html">Contact</a></li>

</ul>
 
<!--END NAV-->
 
</div>

</div>
 
<div id="trimt">

</div>
 
<!--END TOP LAYOUT-->

<div class="contentwrap">
 
<div id="content">
 
<div id="spacer">&nbsp;</div>

<div id="spacer">&nbsp;</div>
 
<!--[if IE]>

<div class="parent">

<![endif]-->

<div class="wrapper">
 
<div>

  <b class="quoteblock">

  <b class="quoteblock1"><b></b></b>

  <b class="quoteblock2"><b></b></b>

  <b class="quoteblock3"></b>

  <b class="quoteblock4"></b>

  <b class="quoteblock5"></b></b>
 
  <div class="quote">

"how far that little <span class="emq">candle</span> throws his beams! so &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="emq">shines</span> a good deed in a weary <span class="emq">world</span>." 

<br />
 
  </div>
 
  <b class="quoteblock">

  <b class="quoteblock5"></b>

  <b class="quoteblock4"></b>

  <b class="quoteblock3"></b>

  <b class="quoteblock2"><b></b></b>

  <b class="quoteblock1"><b></b></b></b>

</div>
 
</div>

<!--[if IE]>

</div>

<![endif]-->
 
<div id="spacer">&nbsp;</div>
 
<!--BEGIN CONTENT-->

<img src="images/welcome.jpg">

<p>

<img class="fr" src="images/candles.png">

..to <span class="emc">essenceofsoy.com</span> where you can find gourmet candles and quality service in one super, happy-go-lucky little bundle. Experience a world of <span class="emc">opportunity and happiness</span> self-created through <span class="emc">working at home</span> on your time, at your leisure. Please feel free to browse through these pages,where you can shop online, <span>quickly and conveniently</span>, and learn more about

our company and why we provide the <span class="emc">very best</span> the candle industry has to offer. >> read more 

</p>

<!--END CONTENT-->
 
<div class="wrapper">
 
<div id="box" class="fl">

<div id="boxentry">

<h5>know what you need?</h5>

<br />

&nbsp;&nbsp;&nbsp;see that fancy box down there?

<br />go ahead and give it a click!
 
<p>

<div id="style1" class="form">

<form id="form" name="form" method="post" action="index.html">

<select>

<option>- - - please select a product - - -</option>

<option>--------------Candles--------------</option>

<option>Jar candles</option>

<option>Votives</option>

<option>Mia Melts</option>

<option>-----------Body Products---------</option>

<option>Bella Bars</option>

<option>Bella Wash</option>

<option>---------------Misc----------------</option>

<option>Car Fresheners</option>

</select>

<button type="submit">Find it!</button>

</form>

</div>

</p>
 
</div>

</div>
 
<div id="box" class="fl">

<div id="boxentry">

<h5>join the team</h5>

<br />

find out how you can work from home!

<br />&nbsp;&nbsp;sign up to get some free info on how.

<p>

<div id="style1" class="form">

<form id="form2" name="form" method="post" action="index.html">
 
<input type="text" name="name" id="name" value="Enter your name here" />
 
<input type="text" name="email" id="email" value="And a valid e-mail address" />
 
<button type="submit">Go, go, go!</button>

</form>

</div>

</p>
 
</div>

</div>

</div>
 
<div id="spacer">

</div>
 
</div>

</div>
 
<div id="footer">
 
<div class="fnav">

<p>

&nbsp;

</p>

<br />

</div>
 
<div class="fcopy">

Design by <u>issentia design</u>.

<br />

Content &copy; 2008 Ganjana Ticlo. All Rights Reserved.

</div>
 
</div>
 
</body>

</html>

drhowarddrfine

You will never get IE to attempt to perform like modern browsers, such as Firefox, without a proper doctype. See the article about doctypes in the Howtos section under HTML above.

issentia

Oh my gosh, I can't believe I forgot that! Silly me. :P
Now everything seems to be working fine for the center alignment EXCEPT the two gray info boxes at the bottom which are each floated to the left to keep them in line. How do I go about centering these two little items?

And now the menu doesn't work at all in Firefox and is still slightly off in IE6.

drhowarddrfine

Well, now you have to validate your html and css for those lists of errors. Ignore what IE is doing until you get it working FF cause IE will screw you up.

issentia

Well, now you have to validate your html and css for those lists of errors. Ignore what IE is doing until you get it working FF cause IE will screw you up.

Okay, so I validated both my HTML and CSS, and I'm still having problems in FF with my image menu.

I can't figure out why I'm not able to click the image links when I hover over them.

David Laakso

My error... see reply below.

David Laakso

Please upload the valid file to your host/server.
The URI you provided at the top of the thread still shows 5 errors and 15 warnings on a cleared cache.

drhowarddrfine

Yep. Plus, you've declared HTML yet try to use Xhtml end tags. This causes browsers to sometimes stop rendering at that point.

issentia

Okay, I updated the site so now the link I posted above should be the current validated version.

Just in case, here's the new code:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Essence of Soy - Gourmet Candles &amp; Fine Products</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
<!--[if lt IE 7]>

<script type="text/javascript" src="unitpngfix.js">

</script>

<![endif]-->
 
<style type="text/css">

*     {

    margin: 0;

    padding: 0;

    border: 0;

    text-align: left;

    }
 
body    {

    width: 100%;

    background: #fff;

    text-align: center;

    }
 
#wrapper{

    margin: 0 auto;

    clear: both;

    display: table;

    }
 
.fr    {

    float: right;

    margin:    0;

    }
 
.fl    {

    float: left;

    }
 
h1    {

    background: url(images/logo.jpg) no-repeat;

    margin: 0;

    display:inline;

    float:left;

    overflow: hidden;

    width: 263px;

    height: 72px;

    }
 
h1 a    {

    margin: 0;

    display: inline;

    float: left;

    overflow: hidden;

    width: 263px;

    height: 72px;

    text-indent: -100em;

    }
 
#header {

    width: 100%;

    text-align: left;

    margin-top: 0;

    margin-left: 0;

    padding: 0;

    overflow: hidden;

    clear: both;

    padding-top: 5px;

    background: #fe79a4 url(../images/header.jpg) repeat-x;

    }
 
#header .main

    {

    width: 60%;

    margin-left: 20%;

    margin-right: 20%;

    text-align: left;

    clear: both;

    overflow: hidden;

    }
 
#bubble    {

    position: absolute;    

    width: 60%;

    background: transparent;

    margin-left: 20%;

    margin-right: 20%;

    top: 5px;

    right: 0px;

    text-align: right;

    overflow: hidden;

    }
 
#menu    {

    text-align: left;

    width: 100%;

    clear: both;

    padding-bottom: 5px;

    padding-top: 5px;

    padding: 0;

    overflow: hidden;

    background: #e94a72 url(images/menu.jpg) repeat-x;

    }
 
#menuin    {

    margin-left: 200px;

    }
 
#menu ul

    {

    text-align: left;

    display: inline;

    margin: 0;

    padding: 0;

    }
 
#menu li

    {

    text-align: left;

    display: inline;

    list-style: none;

    margin-left: 30px;

    padding: 0;

    float: left;

    font-size: 150%;

    }
 
li.home a

    {

    text-align: left;

    background: url(images/homea.jpg);

    display: block;

    width: 50px;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    float: left;

    }
 
li.home a:hover 

    {

    text-align: left;

    background: url(images/homea.jpg);

    background-position: -50px 0;

    float: left;

    }
 
li.about a

    {

    background: url(images/abouta.jpg);

    display: block;

    text-align: left;

    width: 50px;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    float: left;

    }
 
li.about a:hover 

    {

    text-align: left;

    background: url(images/abouta.jpg);

    background-position: -50px 0;

    float: left;

    }
 
li.shop a

    {

    background: url(images/shopa.jpg);

    display: block;

    width: 50px;

    text-align: left;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    margin-left: 5px;

    float: left;

    }
 
li.shop a:hover 

    {

    text-align: left;

    background: url(images/shopa.jpg);

    background-position: -50px 0;

    }
 
li.join a

    {

    background: url(images/joina.jpg);

    display: block;

    width: 50px;

    text-align: left;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    float: left;

    }
 
li.join a:hover

    {

    text-align: left;

    background: url(images/joina.jpg);

    background-position: -50px 0;

    }
 
li.contact a

    {

    background: url(images/contacta.jpg);

    display: block;

    width: 70px;

    text-align: left;

    height: 30px;

    background-position: 0 0;

    text-indent: -999999px;

    overflow: hidden;

    float: left;

    }
 
li.contact a:hover

    {

    background: url(images/contacta.jpg);

    background-position: -70px 0;

    }
 
#trimt    {

    width: 100%;

    overflow: hidden;

    height: 23px;

    background: #fff url(images/trimtop.jpg) repeat-x;

    }
 
.contentwrap

    {

    width: 100%;

    text-align: center;

    }
 
#content{

    background: #fff;

    text-align: left;

    padding: 5px;

    width: 60%;

    margin: 0 auto;

    color: #989898;

    font-size: 13px;

    font-family: trebuchet ms, georgia, tahoma;

    line-height: 14px;

    }
 
.emc

    {

    font-weight: normal;

    font-size: 16px;

    color: #ff79a4;

    }
 
.quote    {

    padding: 0;

    line-height: 24px;

    font-family: georgia, times;

    font-size: 23px;

    width: 70%;

    color: #fff;

     background: #ffb8ce;

    margin: 0 auto;

    }
 
.quoteblock

    {

    display:block;

    width: 70%;

    margin: 0 auto;

    }
 
.quoteblock *

    {

     display:block;

     height:1px;

     overflow:hidden;

     font-size:.01em;

     background:#ffb8ce

    }
 
.quoteblock1

    {

    margin-left:3px;

    margin-right:3px;

      padding-left:1px;

      padding-right:1px;

      border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce;

      background:#ffb8ce

    }
 
.quoteblock2

    {

      margin-left:1px;

      margin-right:1px;

      padding-right:1px;

      padding-left:1px;

      border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce;

      background:#ffb8ce

    }
 
.quoteblock3

    {

    margin-left:1px;

      margin-right:1px;

      border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce;

    }
 
.quoteblock4

    {

    border-left:1px solid #ffb8ce;

     border-right:1px solid #ffb8ce

    }
 
.quoteblock5

    {

     border-left:1px solid #ffb8ce;

      border-right:1px solid #ffb8ce

    }
 
.emq

    {

    font-style: normal;

    font-size: 32px;

    }
 
.quote i

    {

    float: right;

    }
 
#wrapleft

    {

    width: 50%;

    margin: 0 auto;

    float: left;

    display: table;

    text-align: center;

    }
 
#wrapright

    {

    float: left;

    width: 50%;

    margin: 0 auto;

    display: table;

    text-align: center;

    }
 
#boxl    {

    background: #f0f0f0 url(images/info.jpg) no-repeat;

    text-align: left;

    width: 254px;

    height: 169px;

    overflow: hidden;

    margin-left: 50px;

    float: left;

    display: block;

    }
 
#boxr    {

    background: #f0f0f0 url(images/info.jpg) no-repeat top left;

    text-align: left;

    width: 254px;

    height: 169px;

    overflow: hidden;

    margin-left: 50px;

    float: left;

    display: block;

    }
 
.boxentry

    {

    color: #636363;

    font-family: trebuchet ms, georgia, tahoma, sans;

    text-align: left;

    font-size: 12px;

    line-height: 14px;

    padding: 15px;

    margin: 0 auto;

    overflow: hidden;

    }
 
.boxentry br

    {

    line-height: 10px;

    }
 
h5    {

    color: #5c3428;

    font-family: georgia, times, sans;

    font-weight: lighter;

    font-size: 22px;

    line-height: 14px;

    }    
 
#footer{

    position: absolute;

    width: 100%;

    height: 64px;

    background: #5c3428 url(images/trimbottom.jpg) repeat-x;

    clear: both;

    left: 0;

    padding: 0px;

    }
 
.spacer    {

    clear: both;

    margin: 0;

    bottom: 0;

    height: 3px;

    }
 
.fnav    {

    color: #fff;

    font-family: trebuchet ms, tahoma, verdana;

    font-size: 12px;

    float: left;

    line-height: 14px;

    }
 
.fcopy    {

    color: #fff;

    font-family: trebuchet ms, tahoma, verdana;

    font-size: 12px;

    width: 100%;

    padding: 0;

    line-height: 14px;

    text-align: right;

    float: left;

    }
 
/* ----------- Form ----------- */

.form

    {

    margin:0 auto;

    width:200px;

    padding:14px;

    }
 
/* ----------- style1 ----------- */

.style1    {

    border: 0;

    background:transparent;

    }
 
.style1 h1

    {

    font-size:13px;

    font-weight:bold;

    margin-bottom:8px;

    }
 
.style1 p{

    font-size:11px;

    color:#666666;

    margin-bottom:20px;

    border-bottom:solid 1px #b7ddf2;

    padding-bottom:10px;

    }
 
.style1 label

    {

    display:block;

    font-weight:bold;

    text-align:right;

    width:140px;

    float:left;

    }
 
.style1 .small

    {

    color:#666666;

    display:block;

    font-size:11px;

    font-weight:normal;

    text-align:right;

    width:140px;

    }
 
.style1 select

    {

    border: solid 1px #000;

    color: #000;

    opacity: .5;

    font-size: 11px;

    font-family: georgia;

    }
 
.style1 input

    {

    opacity: .5;

    font-size:11px;

    padding:2px 2px;

    border:solid 1px #000;

    color: #000;

    width:200px;

    font-family: georgia;

    margin:2px 0 0 2px;

    }
 
.style1 button

    {

    clear:both;

    float: right;

    margin-top: 5px;

    width:94px;

    height:21px;

    background:#494949 url(images/button.png) no-repeat;

    text-align:center;

    padding: 0;

    color:#fff;

    font-size:13px;

    font-weight: normal;

    }
 
#corner    {

    position: absolute;

    right: 0;

    top: 0;

    margin: 0;

    padding: 0;

    background: transparent;

    z-index: 99;
 
    }
 
</style>

</head>

<body>
 
<!--TOP LAYOUT-->
 
<div id="header">
 
<div class="main">

<h1><a href="index.html">Essence of Soy</a></h1>

</div>
 
</div>
 
<div id="bubble">

<img src="images/sbubble.png" alt="Shop Online!" />

</div>
 
<div id="corner"><a href="makeadifference.html"><img src="images/bcbanner.png" alt="Make a difference" /></a></div>
 
<div id="menu">

<div id="menuin">
 
<!-- BEGIN NAV-->
 
<ul>

    <li class="home"><a href="index2.html">Home</a></li>

    <li class="about"><a href="about.html">About</a></li>

    <li class="shop"><a href="shop.html">Shop</a></li>

    <li class="join"><a href="join.html">Join</a></li>

    <li class="contact"><a href="contact.html">Contact</a></li>

</ul>
 
<!--END NAV-->
 
</div>

</div>
 
<div id="trimt">

</div>
 
<!--END TOP LAYOUT-->

<div class="contentwrap">
 
<div id="content">
 
<div class="spacer">&nbsp;</div>

<div class="spacer">&nbsp;</div>
 
<div id="wrapper">
 
<div>

  <b class="quoteblock">

  <b class="quoteblock1"><b></b></b>

  <b class="quoteblock2"><b></b></b>

  <b class="quoteblock3"></b>

  <b class="quoteblock4"></b>

  <b class="quoteblock5"></b></b>
 
  <div class="quote">

"how far that little <span class="emq">candle</span> throws his beams! so &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="emq">shines</span> a good deed in a weary <span class="emq">world</span>." 

<br />
 
  </div>
 
  <b class="quoteblock">

  <b class="quoteblock5"></b>

  <b class="quoteblock4"></b>

  <b class="quoteblock3"></b>

  <b class="quoteblock2"><b></b></b>

  <b class="quoteblock1"><b></b></b></b>

</div>
 
</div>
 
<div class="spacer">&nbsp;</div>
 
<!--BEGIN CONTENT-->
 
<img src="images/welcome.jpg" alt="Welcome!" />

<p>

<img class="fr" src="images/candles.png" alt="" />

..to <span class="emc">essenceofsoy.com</span> where you can find gourmet candles and quality service in one super, happy-go-lucky little bundle. Experience a world of <span class="emc">opportunity and happiness</span> self-created through <span class="emc">working at home</span> on your time, at your leisure. Please feel free to browse through these pages,where you can shop online, <span>quickly and conveniently</span>, and learn more aboutour company and why we provide the <span class="emc">very best</span> the candle industry has to offer. >> read more 

</p>
 
<!--END CONTENT-->
 
<div class="parent">

<div id="wrapleft">
 
<div id="boxl">

<div class="boxentry">

<h5>know what you need?</h5>

<br />

&nbsp;&nbsp;&nbsp;see that fancy box down there?

<br />go ahead and give it a click!
 
<div class="form">

<div class="style1">

<form id="form" method="post" action="index.html">

<div>

<select>

<option>- - - please select a product - - -</option>

<option>--------------Candles--------------</option>

<option>Jar candles</option>

<option>Votives</option>

<option>Mia Melts</option>

<option>-----------Body Products---------</option>

<option>Bella Bars</option>

<option>Bella Wash</option>

<option>---------------Misc----------------</option>

<option>Car Fresheners</option>

</select>

</div>

<div><button type="submit">Find it!</button></div>

</form>

</div>

</div>
 
</div>

</div>

</div>

</div>
 
<div class="parent">

<div id="wrapright">
 
<div id="boxr">

<div class="boxentry">
 
<h5>join the team</h5>

<br />

find out how you can work from home!

<br />&nbsp;&nbsp;sign up to get some free info on how.

<br />

<div class="style1">

<div class="form">

<form id="form2" method="post" action="index.html">
 
<div>

<input type="text" name="name" id="name" value="Enter your name here" />
 
<input type="text" name="email" id="email" value="And a valid e-mail address" />

</div>
 
<div><button type="submit">Go, go, go!</button></div>

</form>
 
</div>

</div>
 
</div>

</div>

</div>

</div>
 
<div class="spacer">

</div>
 
</div>

</div>
 
<div id="footer">
 
<div class="fnav">

<p>

&nbsp;

</p>

<br />

</div>
 
<div class="fcopy">

Design by issentia design.

<br />

Content &copy; 2008 Ganjana Ticlo. All Rights Reserved.

</div>
 
</div>
 
</body>

</html>

drhowarddrfine

The first problem is caused by forgetting that <a> is a seperate element from <li> so it is placed on a different line. For example, do .contact{position:absolute} and you'll see the <a> rise up into position because .contact is removed from the normal flow.

The second, 'display:table' only works in modern browsers, not IE.

Third,
In #boxleft and right, change to:

Expand|Select|Wrap|Line Numbers

 #wrapleft {

float:left;

width:50%;

}

but it doesn't quite center it but that's all I have time for right now.

issentia

The first problem is caused by forgetting that <a> is a seperate element from <li> so it is placed on a different line. For example, do .contact{position:absolute} and you'll see the <a> rise up into position because .contact is removed from the normal flow.

The second, 'display:table' only works in modern browsers, not IE.

Third,
In #boxleft and right, change to:
#wrapleft {
float:left;
width:50%;
}

but it doesn't quite center it but that's all I have time for right now.

Thank you very much for all your help! I definitely see how adding .contact{position:absolute} made the link clickable, but how do I apply that to the other links? Applying the same concept to all the links doesn't seem to work.

drhowarddrfine

I didn't mean you should use abs pos to get it to work. I was just showing how it makes the point. I'm really flying around right now and don't have time to look further.

issentia

I didn't mean you should use abs pos to get it to work. I was just showing how it makes the point. I'm really flying around right now and don't have time to look further.

That's alright, I think I've figured about 90% of it out, or at least something else that's apparently working for me. You've been a big help, so I really appreciate it!

David Laakso

All I can suggest is get it working in simple text and no images.

Strip the entire menu html and the entire menu css, and replace it with this [1] using your colors:
[1] rollover
Whether you then go on from there to make it just another inaccessible, nightmare of a Photoshop magazine ad hosted on the Web is your call...

issentia

Thank you for everything. Finally got it working! Yay! :)

Help! Roll-over link alignment & centering a div within a div...

Post your reply

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ