Div inside td

[arunpatal]

Hi,

 

I am using jquery for hover effect on div

 

here is the code

 

<style type="text/css">
body{margin:0px;}
#menu{background:#FFF; border:#1E1E1E 0px solid; padding:8px 0px 9px 0px;}
.style1 {
background-color:#FFF;
font-size:16px; color:#666;
padding:10px 50px 10px 50px;
border-right:#1E1E1E 1px solid;
text-decoration:none;
}
.style2 {
background-color:#055F7C;
font-size:16px; color:#FFF;
padding:10px 50px 10px 50px;
border-right:#1E1E1E 1px solid;
text-decoration:none;
}
#header_menu_tr{
height:30px;
}
#header_menu_td{
background:#FFF;
text-align:left;
}
.header_menu_div{
padding-left:30px;
width:980px;
margin:auto;
float:left;
}
/* End styles for the menu elements */
</style>
</head>
<table id="header_table">

<tr id="header_top_tr">
<td id="header_left_td"> </td>
<td id="header_center_td"> </td>
<td id="header_right_td"> </td>
</tr>

<tr id="header_menu_tr">
<td id="header_menu_td" colspan="3">

<div class="header_menu_div" id="menu"><a class="style1" href="#">Home</a><a class="style1" href="#">Home</a></div>
</td>
</tr>
</table>

 

But on left side there is 1px margin and i dont want this.

checkout image.

Edited January 25, 2013 by arunpatal

[gizmola]

How are we supposed to help you when you omitted the jquery plugin specifics?

[arunpatal]

How are we supposed to help you when you omitted the jquery plugin specifics?

 

Hi

 

This is jquery code

 

<script type="text/javascript" src="style/jQuery.js"></script>
<script type="text/javascript" src="style/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Mouse Enter Animation Mechanism
$("#menu a").mouseenter(function () {
$(this).switchClass("style1", "style2", 500);
});
// Mouse Leave Animation Mechanism
$("#menu a").mouseleave(function () {
$(this).switchClass("style2", "style1", 500);
});
});
</script>

 

Should i upload jquery-ui.min.js file also ????

 

Hope this problem can be solve

[computermax2328]

You set the body margin to 0px, but not the padding. Set the padding to 0px as well and see what happens. Could be something as small as that. I know some browsers set padding and margins by default.

[gizmola]

I'm not able to replicate the issue. See: http://jsfiddle.net/gizmola/3BZqN/ as computermax suggests, a css reset might help. the specific markup and css you provided does not exhibit the issue, so it suggests it would be something that contains the menu.