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

Page width issues

Status
Not open for further replies.
serverguy78

serverguy78

MIS
Sep 7, 2009
29
US
Hello, For some reason my page width is 990. I want to constrict the width to 550px width. Can someone help me here is my code snippet.

<link type="text/css" href="css/cupertino/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
collapsible: true
});
});
</script>
<style type="text/css">
<!--
li.MsoNormal
{mso-style-parent:"";
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";
color:windowtext; margin-left:0in; margin-right:0in; margin-top:0in}
-->
</style>
<!--[if !mso]>
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
table.MsoTableGrid
{border:1.0pt solid windowtext;
font-size:10.0pt;
font-family:"Times New Roman";
}
</style>
<![endif]--><!--[if gte mso 9]>
<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</HEAD>
<BODY style="text-align: left">
<body style="text-align: left">



<div id="tabs">
<h1>Services Index</h1>
<ul>
<li><a href="#tabs-1">A</a></li>
<li><a href="#tabs-2">B</a></li>
<li><a href="#tabs-3">C</a></li>
<li><a href="#tabs-4">D</a></li>
<li><a href="#tabs-5">E</a></li>
<li><a href="#tabs-6">F</a></li>
<li><a href="#tabs-7">H</a></li>
<li><a href="#tabs-8">I</a></li>
<li><a href="#tabs-9">M </a></li>
<li><a href="#tabs-10">N </a></li>
<li><a href="#tabs-11">O</a></li>
<li><a href="#tabs-12">P </a></li>
<li><a href="#tabs-13">R </a></li>
<li><a href="#tabs-14">S </a></li>
<li><a href="#tabs-15">T </a></li>
<li><a href="#tabs-16">V </a></li>
<li><a href="#tabs-17">W</a></li>
</ul>
<h1 align="center"></h1>
<div id="tabs-1" >

<TABLE width = "498" BORDER="1" CELLPADDING="1" cellspacing="1" style="border-collapse: collapse" >
<tr>

<td width="60" height="10" align="left" valign="top">
<strong><span style="font-size: 12px;" >Department</span></strong>
</td>

<td width="80" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Phone</span></strong>
</td>

<td width="118" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Services offered</span></strong>
</td>

<td width="95" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Eligibility/Fees</span></strong>
</td>

<td width="188" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Notes</span></strong>
</td>

</tr>

</table>

<table width="498" align="left" border="1" cellpadding="1" cellspacing="0">

<tr>
<td width="79" height="10" align="left" valign="top">
<strong><span style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit.
</span></strong>
</td>

<td width="69" height="20" align="left" valign="top">
<span style="font-size: 10px;"></span>
</td>
<td width="95" height="20" align="left" valign="top">
<span style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. </span>
</td>

<td width="95" height="20" align="left" valign="top">
<span style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. </span>
</td>

<td width="50" height="20" align="left" valign="top">
<p style="font-size: 10px;"></p></td>
</tr>

</table>



</tr>


</table>

</div>

<div id="tabs-2" >

<TABLE width = "498" BORDER="1" CELLPADDING="1" cellspacing="1" style="border-collapse: collapse" >
<tr>

<td width="60" height="10" align="left" valign="top">
<strong><span style="font-size: 12px;" >Department</span></strong>
</td>

<td width="101" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Phone</span></strong>
</td>

<td width="181" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Services offered</span></strong>
</td>

<td width="95" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Eligibility<br>Fees</span></strong>
</td>

<td width="175" height="20" align="left" valign="top">
<strong><span style="font-size: 12px;">Notes</span></strong>
</td>

</tr>

</table>

<table width="498" align="left" border="1" cellpadding="1" cellspacing="0">

<tr>
<td width="46" height="10" align="left" valign="top" >
<strong>
</strong>
</td>

<td width="48" height="20" align="left" valign="top">

</td>
<td width="70" height="20" align="left" valign="top">
<span style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. Nulla lacinia libero sit amet orci hendrerit at gravida nunc pulvinar. Integer aliquet mauris tortor. Vivamus sapien massa, posuere ac facilisis at, porta ultrices nunc. Vestibulum ac diam a sapien rutrum consequat.</span>
</td>

<td width="50" height="80" align="left" valign="top">

</td>

<td width="50" height="20" align="left" valign="top">
<p style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum arcu eu turpis sagittis dictum. Aenean in risus felis, ut hendrerit elit. Nulla lacinia libero sit amet orci hendrerit at gravida nunc pulvinar. Integer aliquet mauris tortor. Vivamus sapien massa, posuere ac facilisis at, porta ultrices nunc. Vestibulum ac diam a sapien rutrum consequat.</p></td>
</tr>

</table>



</tr>


</table>

</div>


</div>
 
Sort by date Sort by votes
When you say your page, which part do you mean? I see some tables that are set to 498px width. Are these tables not that width? Or is it the rest of the page that is the problem? You have some CSS, that might define width of the div elements. Other than that, the page will always expand to the maximum of browser window width. Nothing in the code you've shown looks like it restricts page to either 990 or 550px.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I have a 550 width limit on the website i'm uploading it to. There is white space on the right side of the page. How to define the width of the whole page to not go over 550px?
 
Upvote 0 Downvote
Provided that none of the elements themselves have a width greater than 550px, giving your body element [tt]style="width: 550px;"[/tt] should work. However, having white space on the right would suggest narrower (498) tables to me, not wider.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
106
lmcate
lmcate
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
132
ChrisHirst
ChrisHirst
craigward
  • Locked
  • Question
Change IIS7 Default landing page
Replies
1
Views
69
feherke
feherke
tyutghf
  • Locked
  • Question
Slight page curl effect
Replies
3
Views
141
ChrisHirst
ChrisHirst
southbeach
  • Locked
  • Question
Rapid landing page development / templating 3
Replies
14
Views
241
southbeach
southbeach

Part and Inventory Search

Sponsor

Back
Top