Jump to content


Photo

Div inside td


  • Please log in to reply
4 replies to this topic

#1 arunpatal

arunpatal

    Advanced Member

  • Members
  • PipPipPip
  • 273 posts

Posted 25 January 2013 - 12:18 PM

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

  • Attached File  1px.png   4.34KB   19 downloads

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


#2 gizmola

gizmola

    Advanced Member

  • Administrators
  • 4,102 posts
  • LocationLos Angeles, CA USA

Posted 25 January 2013 - 05:39 PM

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

#3 arunpatal

arunpatal

    Advanced Member

  • Members
  • PipPipPip
  • 273 posts

Posted 26 January 2013 - 06:07 AM

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

#4 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • LocationUnited States
  • Age:22

Posted 28 January 2013 - 02:08 AM

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.

Follow me on Twitter @maxrbaldwin


#5 gizmola

gizmola

    Advanced Member

  • Administrators
  • 4,102 posts
  • LocationLos Angeles, CA USA

Posted 28 January 2013 - 02:15 AM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com