Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

clicking on the link moves the page up a couple of pixels 1

Status
Not open for further replies.
kzn

kzn

MIS
Joined
Jan 28, 2005
Messages
209
Location
GB
Hi

I dont understand why this page moves up a couple of pixel when I click on the link. It seems ok in mozilla but not ie .... any help would be appreciated.

Thank you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size:11px;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="main">
<table align="center" width="800" height="600" cellpadding="0" cellspacing="0" border="0">
<tr height="160" valign="top">
<td background="images/logo_bto.gif" width="560" height="160" align="left" valign="bottom"><a href="#">Contact Us</a></td>
<td><img src="images/header_img.jpg" width="240" height="160" /></td>
</tr>
<tr bgcolor="#993300" valign="top">
<td height="540">
</td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
 
Sort by date Sort by votes
It's hard to say, but it could be due to the fact that default behaviour in IE causes something, like an underline to enlarge the table cell and cause it to shift. You could probably avoid this by not using a table for layout, which is not the best idea to begin with.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Thank you Vragabond for your comment ... was just looking at some of your recent postings where you told someone to use a tabless layout. I have been reading up on the pros and cons and tabless layout is def the way to go.

I have some understanding of css but still have a way to go.

Do you know of any good sites off the top of your head where I can learn tabless layout. Im busy searching google.

Thanks for you reply
 
Upvote 0 Downvote
This is the worst possible solution. You've gone from (near) standards-compliance mode (with a complete and valid doctype) to quirks mode (incomplete or invalid doctype).

As for the sites, I like the tutorials on htmldog.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Hi Vragabond

Thanks again for taking the time to help me .... looks like I have alot of reading to do.
 
Upvote 0 Downvote
Hi Vragabond

Would you mind looking at this code please. Is my code over kill for a tabless layout. I have spent ages trying to work it out. Im finding CSS really hard but I am enjoying it. Here goes for the code.....

Thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
padding:0;
margin-top:20px;
background:#CEE3DF;}
#level0 {
margin-left:auto;
width:800px;
margin-right:auto;
background:#ffffff}
#top {
width:800px;
height:160px;}
#top_logo{
float:left;
vertical-align:bottom;
width:560px;
height:160px;
background-image:url(images/logo_bto.gif);
background-repeat:no-repeat;
}
#top_logo_links{
float:left;
padding-top:120px;
padding-bottom:5px;
vertical-align:bottom;}
#top_image{
float:right;
height:160px;
width:240px;
background-image:url(images/header_img.jpg);
background-repeat:no-repeat;
}
#left_menu {
float:left;
width:320px;
height:418px;
}
#content {
float:right;
background-color:#ffffff;
width:480px;
height:418px;}
#footer {
background-color:#E40506;
width:800px;
height:22px;
font-family:arial;
font-size:12px;
color:#ffffff;
padding-top:5px;}
.floatfix { clear: both; }
#footer_copy{
float:left;
width:600px;
height:22px;}
#footer_terms{
float:right;
width:200px;
height:22px;}
.btolinks {
text-decoration:none;
color:#FFFFFF;}
</style>
</head>

<body>
<div id="level0">
<div id="top">
<div id="top_logo">
<div id="top_logo_links"><a class="btolinks" href="#">Home</a>&nbsp;<a class="btolinks" href="#">Useful Links</a></div>
</div>
<div id="top_image"></div>
</div>
<div id="left_menu"><img src="images/mainPg_left.jpg" />
</div>
<div id="content">This is the content
<br /><br /><br />


</div>
<br class="floatfix"/>
<div id="footer">
<div id="footer_copy"><b>&nbsp;&nbsp;&nbsp;&copy;&nbsp;Copyright 2008</b></div>
<div id="footer_terms"><b><a class="btolinks" href="#">Page1</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="btolinks" href="#">Page2</a></b></div>
</div>
</div>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
540
lmcate
lmcate
cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
Alt255
  • Locked
  • Question Question
Searching for a string that contains brackets
Replies
0
Views
505
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top