Logo positioning in the webpage

I have positioned this logo on the left top of my webpage design,the rest of the page is designed with the help of table and as the logo placement in this style is not possible in the table format i have made a 2 div's one wrapping the entire layout and another for the logo.. The wrapping div is made relative and the logo div relative and somehow have place the logo where i wish to as you see in the page.. but the problem is that the navigation bar links are not working as soon as the logo is positioned above the navbar..

The second problem is that the leaving a blank space in the place it was positioned before providing the top and left attributes to it!! if the way i am positioning the logo is wrong! or if there is any other alternative please suggest.. thanks in advance!! cheers!

the webpage is :http://www.aravind123.0fees.net/products.html

css:

    #mainwrap{
postion:absolute;
width:1000px;
margin: 0 au``to;
margin-top:0px:
vertical-align:top;
z-index:99;
}

body {
background-image: url(Images/bg.jpg);
background-repeat:repeat-y;
top: auto;
}
.text1 {
font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text2{
font-family:"Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size:12px;
color:#333;
text-decoration:none;
text-align:center;
}
p{
font-family:"Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size:12px;
color:#333;
text-decoration:none;
text-align:center;
}
#logo{
position:relative;
bottom:-90px;
left:-50px;
z-index:50;
}

a:hover{
color: #000;
}

.logo{
border:none;
}

.offer{
font-size:28px;
vertical-align:middle;
}

.text11 {   font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text111 {font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf'开发者_高级运维);
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text1111 {font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}

---

add float:left; to the #logo class it makes the element take the space of its contents instead of the entire width of the page.

if you want to debug your css I can recommend getting firefox and the latest version of firebug. You get a "inspect element" option in the right mousebutton menu that enables you to see the actual css properties it has. Also it enables you to see the real width, height, margins and paddings of a element.

---

Couple of problems:

1. You misspelt position (as "postion") on your #mainwrap element. This is probably why you've had to do odd things.
2. The #logo's position is currently relative with a very large negative value for bottom. This isn't what you want

To fix your issue, ensure you have the following:

#mainwrap {
    position: relative;
}

#logo {
    position: absolute;
    top: -20px;
    left: -50px;
}

Once the outer container has a relative position, setting #logo to an absolute position will adjust its position within that outer container (as opposed to the entire page). Setting position: absolute also has the nice side-effect of reducing the box sizes of your element to only take up what it needs to. As Benjamin noted, the #logo box was spanning the entire width of your page, blocking the menu items. This change will allow the cursor to activate the menu items again.