4 replies to this topic

[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">&nbsp;</td>
<td id="header_center_td">&nbsp;</td>
<td id="header_right_td">&nbsp;</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.

Attached Files

•  1px.png   4.34KB   19 downloads

Edited by arunpatal, 25 January 2013 - 12:19 PM.

[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.