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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

What causes page to shift on some browsers but not others?

Status
Not open for further replies.
RodS2

RodS2

IS-IT--Management
Sep 11, 2007
33
US
This is just a general question. I had a website designed that contained 6 different pages. 4 of the 6 pages had a "subscribe" text field and button to sign up for a mailing list and the other 2 pages did not. The 4 pages that had this subscribe text field would shift to the left, the other 2 pages showed up normally. What would cause an issue like this? The only difference between the two pages is that one page (the page that shifts to the left) contains a "Subscribe" field in the right column.

I've attached the source code of the one that is correct and the page that shifts below:

Thanks for any help you can provide.


-----------DOESN'T SHIFT---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/welcome.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >


<body>
<!-- Top header Starts Here! -->
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td bgcolor="#003A69"><img src="images/spc.gif" width="1" height="5"></td>
</tr>
</table>
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spc.gif" width="1" height="20"></td>
</tr>
</table>
<table width="832" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td height="71" background="images/line-bg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="208"><a href="index.htm"><img src="images/logo.gif" alt="Logo" width="208" height="71" border="0"></a></td>
<td width="624" align="right">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40%"><div align="right"><img src="images/top-links.gif" width="283" height="18" border="0" usemap="#Map"></div></td>
</tr>
</table></td>

</tr>
</table></td>
</tr>
</table>
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spc.gif" width="1" height="30"></td>
</tr>
</table>

<table width="832" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="666" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="666" bgcolor="#000000"><img src="images/top-navigations-bar.gif" width="666" height="40" border="0" usemap="#Map2"></td>
</tr>
</table>

<br>
<br>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/about-maintitle.gif" width="589" height="77"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td class="bodytext"><p>This is sample text.</p></td>
</tr>
</table></td>
<td width="1" valign="top"><img src="images/spc.gif" width="1" height="1"></td>
<td width="165" valign="top" bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#000000"><div align="center"><img src="images/about-ban.gif" width="164" height="678"></div></td>

</tr>
</table></td>
</tr>
</table>

<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spc.gif" width="1" height="33"></td>
</tr>
</table>

<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="328" height="20" align="right" bgcolor="#000000" class="whitetext2a">This is sample text</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<map name="Map">
<area shape="rect" coords="1,2,101,15" href="#">
<area shape="rect" coords="111,1,182,17" href="#">

<area shape="rect" coords="189,2,283,21" href="#">
</map>
<map name="Map2">
<area shape="rect" coords="22,6,96,33" href="about-us.htm">
<area shape="rect" coords="146,5,260,36" href="our-philosohpy.htm">
<area shape="rect" coords="307,4,375,36" href="services.htm">
<area shape="rect" coords="415,4,509,39" href="op_source.htm">
<area shape="rect" coords="553,4,645,35" href="contact.htm">
</map>



-----------PAGE THAT SHIFTS------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/welcome.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >


<body>
<!-- Top header Starts Here! -->
<div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td bgcolor="#003A69"><img src="images/spc.gif" width="1" height="5"></td>
</tr>
</table>
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spc.gif" width="1" height="20"></td>
</tr>
</table>
<table width="832" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td height="71" background="images/line-bg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="208"><a href="index.htm"><img src="images/logo.gif" alt="Logo" width="208" height="71" border="0"></a></td>
<td width="624" align="right">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40%"><div align="right"><img src="images/top-links.gif" width="283" height="18" border="0" usemap="#Map"></div></td>
</tr>
</table></td>

</tr>
</table></td>
</tr>
</table>
<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spc.gif" width="1" height="30"></td>
</tr>
</table>

<table width="832" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="666" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="666" bgcolor="#000000"><img src="images/top-navigations-bar.gif" width="666" height="40" border="0" usemap="#Map2"></td>
</tr>
</table>

<br>
<br>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/philo-maintitle.gif" width="612" height="69"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td class="bodytext"><p>This is sample text.</p></td>
</tr>
</table></td>
<td width="1" valign="top"><img src="images/spc.gif" width="1" height="1"></td>
<td width="165" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#000000"><div align="center"><img src="images/our-philp-ban.gif" width="158" height="381"></div></td>

</tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><div align="center"><img src="images/subscribe.gif" width="163" height="91"></div></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>

<td width="65%" align="right">
<input name="textfield" type="text" value="Email" size="10">

</td>
<td width="35%"><input name="imageField" type="image" src="images/send-but1.gif" width="45" height="25" border="0"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>

<td><div align="center"><img src="images/subscribe1.gif" width="163" height="25"></div></td>
</tr>
</table>

</td>
</tr>
</table>

<table width="832" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spc.gif" width="1" height="33"></td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="328" height="20" align="right" bgcolor="#000000" class="whitetext2a">Management
Principles</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<map name="Map">
<area shape="rect" coords="1,2,101,15" href="#">
<area shape="rect" coords="111,1,182,17" href="#">
<area shape="rect" coords="189,2,283,21" href="#">

</map>
<map name="Map2">
<area shape="rect" coords="22,6,96,33" href="about-us.htm">
<area shape="rect" coords="146,5,260,36" href="our-philosohpy.htm">
<area shape="rect" coords="307,4,375,36" href="services.htm">
<area shape="rect" coords="415,4,509,39" href="op_source.htm">
<area shape="rect" coords="553,4,645,35" href="contact.htm">
</map>
 
Sort by date Sort by votes
You do not tell us which browsers display the problem and which are correct.

Off the top of my head, since you are using tables for layout, IE often expands the tables to fit the content (regardless of the expressly defined widths), which may (or may not) have some bearing on your problem.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Sorry, I meant the page contents moves a little over to the left. This only happens in Mozilla Firefox 3.5.3


For example, my logo might start here
{LOGO}

and then in mozilla it is here
{LOGO}

Is this something I should worry about, or is it unfixable? Do all websites have some issues in some browser? It's just a TEENY TINY issue but it's one of those things that is SO annoying because I want it to be perfect.

Any help just making me feel better about the situation would help too.

Thanks!
 
Upvote 0 Downvote
From that description, it could still be the scrollbar issue. Can you confirm that that is not what you are seeing - i.e one page has a vertical scrollbar and one doesn't.

Given the content of the page that shifts is longer, it adds even more weight to the theory.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hi

I used to have similar problems until I found out about this 'reset code' in css.

Basically you place this code at the beginning of your css file and it makes sure all browsers treat your alignments in a similar

Give it a try!

Kind regards
Clive

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
 
Upvote 0 Downvote
I figured it out. In the CSS file the developer had included the line:

input {
padding: 3px;
}


I removed that and everything is looking perfect. ugh!!!
 
Upvote 0 Downvote
Well what it was is one page had the subscribe form on it (text field and a send button) and the other page did NOT. So the page that had the subscribe (e.g. INPUT) field would shift by 3px for whatever reason.

I dont know why it worked but it did and I'm haapppy! :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
466
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
411
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
822
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
409
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top