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

template sizing problems

Status
Not open for further replies.
SIG357

SIG357

Programmer
Jun 29, 2000
164
US
I seem to be encountering a peculiar problem. I have a template setup that I'm trying to get resolution compliant. Looks great on IE at resolutions of 1024 and above, but on 800x600, the initial load of the page results in the template widening out, requiring a horizontal scroll. Subsequent refreshes return the page properly formatted, no scrolling necessary.
I can't, for the life of me, figure out why the initial
load screws up, but the others don't. Am i missing something obvious?

Thanks in advance
Joe

Code: 
<html>
<head>
	<title>
	
	</title>
	<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/script/style.css&quot;[/URL] />
	<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/script/apps.css&quot;[/URL] />
	<script language=&quot;Javascript&quot; src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/script/javascript.js&quot;></script>[/URL]
	<script>
		function getScreen()
		{
			var innerHeight, innerWidth

			if (document.all)
			    innerHeight = document.body.offsetHeight, innerWidth = document.body.offsetWidth;
			else if (document.layers)
				innerHeight = window.innerHeight, innerWidth = window.innerWidth;
		
			return screen.width
		}
	</script>
</head>
<body bgcolor=&quot;#FFFFFF&quot; topmargin=&quot;0&quot; leftmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; onload=&quot;&quot; style=&quot;background-color: #FFFFFF;&quot;>
<font face=&quot;verdana, arial, helvetica, sans-serif&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; height=&quot;100%&quot;>
	<tr>
		<td><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=&quot;1&quot; ></td>
		<td><IMG height=1 src='[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif'[/URL] width=&quot;180&quot; ></td>
		<td><IMG height=1 src='[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif'[/URL] width=&quot;40&quot; ></td>
		<td><IMG height=1 src='[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif'[/URL] width=&quot;17&quot; ></td>
		<td><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=&quot;6&quot; ></td>
		<td><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=&quot;4&quot; ></td>
		<td><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=&quot;408&quot; ></td>
		<td><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=&quot;6&quot; ></td>
		<td><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=&quot;5&quot; ></td>
	</tr>
	<tr>
		<td><IMG height=5 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=1 ></td>
		<td colspan=&quot;3&quot; rowspan=&quot;4&quot; style=&quot;BACKGROUND: #0e1839; TEXT-ALIGN: left&quot; align=&quot;left&quot; bgcolor=&quot;#0e1839&quot;> 
			<table>
				<tr><td style=&quot;text-align: left; border: 1px solid #F1F1F1;&quot;><A class=&quot;aheader&quot; href=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/articles/services.asp&quot;[/URL] target=textfrm>&nbsp;&nbsp;SERVICES OVERVIEW</a></td></tr>
				<tr><td style=&quot;text-align: left; border: 1px solid #F1F1F1;&quot;><A class=&quot;bheader&quot; href=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/articles/improveyourteam.asp&quot;[/URL] target=textfrm>&nbsp;&nbsp;IMPROVE YOUR TEAM</a></td></tr>
				<tr><td style=&quot;text-align: left; border: 1px solid #F1F1F1;&quot;><A class=&quot;bheader&quot; href=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/articles/savetime.asp&quot;[/URL] target=textfrm>&nbsp;&nbsp;SAVE TIME &amp; MONEY</a></td></tr>
			</table>
		</td>
		<td colspan=&quot;5&quot; style=&quot;background: #0e1839&quot; bgcolor=&quot;#0e1839&quot;><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=1></td>
	</tr>
	<tr>
		<td><IMG height=7 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=1 ></td>
		<td align=&quot;left&quot; valign=&quot;top&quot; style=&quot;TEXT-ALIGN: left; VERTICAL-ALIGN: top&quot;><IMG src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/tl-corner.gif&quot;[/URL] ></td>
		<td colspan=&quot;2&quot; width=&quot;100%&quot;></td>
		<td align=&quot;right&quot; valign=&quot;top&quot; style=&quot;TEXT-ALIGN: right; VERTICAL-ALIGN: top&quot;>
			<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;right&quot;><tr>
          <td><IMG src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/tr-corner.gif&quot;[/URL] ></td></tr></table>
		</td>
		<td rowspan=&quot;3&quot;  style=&quot;BACKGROUND: #0e1839&quot; bgcolor=&quot;#0e1839&quot;><IMG height=1 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=1></td>
	</tr>
	<tr>
		<td><IMG height=90 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=1 ></td>
		<td></td>
		<td colspan=&quot;2&quot; width=&quot;0&quot; align=&quot;center&quot; style=&quot;text-align: center;&quot;>
			<iframe name=&quot;moviefrm&quot; src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/logos/DSILogo.gif&quot;[/URL] width=&quot;408&quot; height=&quot;90&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; framespacing=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; noresize align=&quot;center&quot; bgcolor=&quot;#FFFFFF&quot; style=&quot;background-color: #FFFFFF; text-align: center;&quot;></iframe>
		</td>
		<td></td>
	</tr>
	<tr>
		<td><IMG height=6 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=1 ></td>
		<td align=&quot;left&quot; valign=&quot;bottom&quot; style=&quot;TEXT-ALIGN: left; VERTICAL-ALIGN: bottom&quot;><IMG src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/bl-corner.gif&quot;[/URL] ></td>
		<td colspan=&quot;2&quot; width=&quot;100%&quot;></td>
		<td align=&quot;right&quot; valign=&quot;bottom&quot; style=&quot;TEXT-ALIGN: right; VERTICAL-ALIGN: bottom&quot;>
			<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; align=&quot;right&quot;><tr>
          <td><IMG src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/br-corner.gif&quot;[/URL] ></td></tr></table>
		</td>
	</tr>
	<tr>
		<td><IMG height=20 src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] width=1 ></td>
		<td colspan=&quot;8&quot; background=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/hd-fade-775.gif&quot;[/URL] style=&quot;BACKGROUND-IMAGE: url([URL unfurl="true"]http://www.digeratisolutions.net/images/hd-fade-775.gif)&quot;>[/URL]
			<table background=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/hd-fade-775.gif&quot;[/URL] style=&quot;BACKGROUND-IMAGE: url([URL unfurl="true"]http://www.digeratisolutions.net/images/hd-fade-775.gif)&quot;[/URL] width=&quot;100%&quot; height=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;><tr>
				<td></td>
			</tr></table>
		</td>
	</tr>
	<tr valign=&quot;center&quot; height=&quot;100%&quot; align=&quot;center&quot;>
		<td height=&quot;100%&quot;><img src=&quot;../images/shim.gif&quot; width=1 ></td>
		<td valign=&quot;top&quot; style=&quot;text-align: left; background-image: url(../images/sidebar.gif); vertical-align: top;&quot;>
			<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;right&quot; style=&quot;text-align: right;&quot;>
				<!--onclick=&quot;moviefrm.document.location='./movies/AboutDSI.swf'&quot;-->
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><br /></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;./pages/who.asp&quot; target=&quot;textfrm&quot;>Who is dsi&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><img src=&quot;./images/shim.gif&quot; height=&quot;5&quot;></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;./pages/what.asp&quot; target=&quot;textfrm&quot;>What dsi does&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><img src=&quot;./images/shim.gif&quot; height=&quot;5&quot;></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;./pages/difference.asp&quot; target=&quot;textfrm&quot;>The dsi difference&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><img src=&quot;./images/shim.gif&quot; height=&quot;5&quot;></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;./pages/choose.asp&quot; target=&quot;textfrm&quot;>Choose dsi&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><img src=&quot;./images/shim.gif&quot; height=&quot;5&quot;></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;./pages/partners.asp&quot; target=&quot;textfrm&quot;>dsi partners&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><img src=&quot;./images/shim.gif&quot; height=&quot;5&quot;></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;./pages/careers.asp&quot; target=&quot;textfrm&quot;>dsi careers&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><img src=&quot;./images/shim.gif&quot; height=&quot;5&quot;></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;./pages/contact.asp&quot; target=&quot;textfrm&quot;>contact dsi&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><img src=&quot;./images/shim.gif&quot; height=&quot;5&quot;></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><a class=&quot;amenu&quot; href=&quot;[URL unfurl="true"]https://www.digeratisolutions.net/secure/login.asp&quot;>client[/URL] login&nbsp;&nbsp;</a><br/></td></tr>
				<tr><td align=&quot;right&quot; style=&quot;text-align: right;&quot;><br/></td></tr>
				
			</table>
		</td>
		<td colspan=&quot;7&quot; width=&quot;100%&quot; align=&quot;center&quot; valign=&quot;middle&quot; border=&quot;1&quot; style=&quot;text-align: center; vertical-align: middle&quot;>

<iframe name=&quot;textfrm&quot; noresize width=&quot;85%&quot; height=&quot;75%&quot; align=&quot;middle&quot; vspace=&quot;50&quot; src=&quot;./pages/who.asp&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; ></iframe>

		</td>
	</tr>
	<tr>
		<td><img src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/shim.gif&quot;[/URL] height=&quot;40&quot; width=&quot;1&quot;></td>
		<!--<td background=&quot;./images/ft-fade.gif&quot; style=&quot;background-image: url(./images/ft-fade.gif)&quot; colspan=&quot;8&quot;>-->
		<td colspan=&quot;8&quot; bgcolor=&quot;#0E1839&quot; valign=&quot;top&quot; style=&quot;vertical-align: top; background: #0E1839;&quot;>
			<table  bgcolor=&quot;#0E1839&quot; style=&quot;background: #0E1839;&quot; width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
				<tr><td valign=&quot;top&quot; style=&quot;vertical-align: top;&quot;>
				<img src=&quot;[URL unfurl="true"]http://www.digeratisolutions.net/images/ft-fade.gif&quot;[/URL] width=&quot;100%&quot; height=&quot;25&quot; />
				<div class=&quot;smtext&quot;>Our mission is to provide a new, all encompassing, level of IT 
				consulting and support services that saves time, money, and manpower, while 
				giving small companies full IT coverage and the freedom to focus their energies 
				on their primary business.</div>
				</td></tr>
			</table> 
		</td>
	</tr>
</table>
</font>
</body>
</html>
 
Sort by date Sort by votes
Would be best just to post a url to the site with the actual code so we can see what is happening.

Remember in 800x600 resolution, you only can have images and tables that can't exceded 710 pixels. Anything bigger than that, and you scroll off the page.

Check your image widths and table widhts to make sure they dont exceded 710 px wide total.
 
Upvote 0 Downvote
And looking at your code, I dont get a scroll bar at the bottom, but then again, I didn't get all the contents in the frame either.
 
Upvote 0 Downvote
710px is too strong restriction. If the total page width will be 770-780 you still won't get horizonlal scrolling.

Let me ask you something SIG357. You chech out 2 options: document.all and document.layers. What would happen if some browser doesn't support any of them?
Examples are Opera and all Gecko-based browsers (including Netscape 6+). Your script is out of date for about 2 years already.
 
Upvote 0 Downvote
Starway -
that javascript was very rudimentary and not intended to do any serious resolution detection. The problem I am having occurs in IE5 at least, haven't checked other versions yet, and only with 800x600 resolution (not really worried about anything below that). I'm kinda confused because this problem only occurs on the initial load of the page. subsequent refreshes return my page perfectly fit to the window size. As far as images and tables, I set up my layout using a table of shims, totalling 667px in width. For some table and cell elemnts, I use width=100% to expand cells to fill the remainder of the horizontal space. Is this a bad/buggy idea? Should I be calculating exact window width and coding exact widths?
 
Upvote 0 Downvote
Thanks cian -
Sounds like a good place to start, but would that explain resolution dependency or refresh fixing it?
 
Upvote 0 Downvote
I don't see any calls of getScreen() in your code. Did you tried to add it to body onload?

>>For some table and cell elemnts, I use width=100% to expand cells to fill the remainder of the horizontal space. Is this a bad/buggy idea? Should I be calculating exact window width and coding exact widths?
No, this is not a bad idea.
It is usually done like this on many well-designed sites - to create a feel that the layout is fluid to fit any resolution, while the actual content area is fixed to some pixel value.
 
Upvote 0 Downvote
One other observation: if I change the border to 1 on the main template-defining table, the problem does not occur. Don't know if that helps any...
 
Upvote 0 Downvote
You didn't tell what browser you're testing.
I just opened your page in Opera 6 and IE5 - everything is OK. No any scrollings are seen.

However, there's a problem in Mozilla: lower part with &quot;Our mission ...&quot; text occupies about the half of total height and therefore iframe is almost hidden.
 
Upvote 0 Downvote
Well, I seem to have found a way around whatever was wrong. I played with the sizes of my template shims until I got it to work. It was still really weird, though. With the same template, it would work with the iframe in the content area, but if I used the same template with straight content, it would still have the same problem. Eventually I found shim values that worked for both scenarios. Thanks for evryone's help

joe
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

1DMF
  • Locked
  • Question
box-sizing - floated elements 2
Replies
7
Views
88
1DMF
1DMF
h2mhd
  • Locked
  • Question
problems with accent (spécialisé Ã)
Replies
3
Views
132
vacunita
vacunita
datamasher
  • Locked
  • Question
Browser Cache - Still having problems 2
Replies
5
Views
234
datamasher
datamasher
hmunster123
  • Locked
  • Question
Having problems with embedding mp3 player on Google blogger
Replies
1
Views
83
ErwinHofmann
ErwinHofmann
madrik79
  • Locked
  • Question
email to link in html/css template
Replies
4
Views
75
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top