PDA

Click to See Complete Forum and Search --> : How to display the web page as it is for various browser pixel size

hari
12-15-2002, 10:27 AM
How to display the web page as it is for various browser pixel size.
coding

<% @ Language="VBScript" %>
<html>
<head>
<title> HomePage of Chandra Company Formations Ltd., </title>
<style TYPE="text/css">
<!--
a:hover
{
color:"Blue";
}
h2
{
color:"#0f26f7";
}
font.a
{
color:green;
font-weight:bold;
font-family:"Courier New"
}
-->
</style>
<link rel="stylesheet" type="text/css" href="contents/cssfiles/styles.css">
<script>
function statusAll()
{
window.defaultStatus = "www.chandracompanyformations.co.uk"
}
</script>
</head>

<body bgcolor="#F5F5F5" text="#000000" link="#FFFFFF" vlink="#FFFFFF" topmargin="0"
alink="#FFFFFF" leftMargin=0 bottomMargin=0 rightMargin=0>
<table cellspacing="0" cellpadding="0" width="757" border="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" height="79" width="757">
<img src="logo.jpg" width=750 height="70">
</td>
</tr>
</tbody>
</table>
<div align="center"></div><div align="center"><center>

<table width="751" border="0" cellspacing="0" cellpadding="0">
<tr align="top">
<td valign="top" bgcolor="#f5f5f5"><table border="0" cellpadding="0" cellspacing="0" width="176">
<!-- fwtable fwsrc="alllinks.png" fwbase="alllinks.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
<tr>
<!-- Shim row, height 1. -->
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="174" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>

<tr><!-- row 1 -->
<td colspan="3"><img name="alllinks_r1_c1" src="images/alllinks_r1_c1.gif" width="176" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr><!-- row 2 -->
<td rowspan="7"><img name="alllinks_r2_c1" src="images/alllinks_r2_c1.gif" width="1" height="232" border="0"></td>
<td><a href="homepage.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r2_c2','images/alllinks_r2_c2_f2.gif','images/alllinks_r2_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r2_c2','images/alllinks_r2_c2_f3.gif',1);" ><img name="alllinks_r2_c2" src="images/alllinks_r2_c2.gif" width="174" height="47" border="0"></a></td>
<td rowspan="9"><img name="alllinks_r2_c3" src="images/alllinks_r2_c3.gif" width="1" height="338" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="47" border="0"></td>
</tr>
<tr><!-- row 3 -->
<td rowspan="2"><a href="generalinfo.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r3_c2','images/alllinks_r3_c2_f2.gif','images/alllinks_r3_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r3_c2','images/alllinks_r3_c2_f3.gif',1);" ><img name="alllinks_r3_c2" src="images/alllinks_r3_c2.gif" width="174" height="47" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="45" border="0"></td>
</tr>
<tr><!-- row 4 -->
<td><img src="images/spacer.gif" width="1" height="2" border="0"></td>
</tr>
<tr><!-- row 5 -->
<td><a href="prices.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r5_c2','images/alllinks_r5_c2_f2.gif','images/alllinks_r5_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r5_c2','images/alllinks_r5_c2_f3.gif',1);" ><img name="alllinks_r5_c2" src="images/alllinks_r5_c2.gif" width="174" height="45" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="45" border="0"></td>
</tr>
<tr><!-- row 6 -->
<td><a href="order.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r6_c2','images/alllinks_r6_c2_f2.gif','images/alllinks_r6_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r6_c2','images/alllinks_r6_c2_f3.gif',1);" ><img name="alllinks_r6_c2" src="images/alllinks_r6_c2.gif" width="174" height="46" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="46" border="0"></td>
</tr>
<tr><!-- row 7 -->
<td rowspan="2"><a href="contacts.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r7_c2','images/alllinks_r7_c2_f2.gif','images/alllinks_r7_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r7_c2','images/alllinks_r7_c2_f3.gif',1);" ><img name="alllinks_r7_c2" src="images/alllinks_r7_c2.gif" width="174" height="47" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr><!-- row 8 -->
<td><img src="images/spacer.gif" width="1" height="46" border="0"></td>
</tr>
<tr><!-- row 9 -->
<td colspan="2"><img name="alllinks_r9_c1" src="images/alllinks_r9_c1.gif" width="175" height="105" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="105" border="0"></td>
</tr>
<tr><!-- row 10 -->
<td colspan="2"><img name="alllinks_r10_c1" src="images/alllinks_r10_c1.gif" width="175" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<!-- This table was automatically created with Macromedia Fireworks 4.0 -->
<!-- http://www.macromedia.com -->
</table>
</td>
<td valign="top"><table width="601" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="contents/homepage.html" width="582" height=330> </iframe></td>
</tr>
</table>
</td>
</tr>
</table>
</center></div>
</body>
</html>
khalidali63
12-15-2002, 05:10 PM
This is what I understood from your question.
You have a problem display ing correct layout in different browser windows since IE and NS render Xpx and Xpt with a difference?
If this is correct can you please pin point your code in question or just paste the complete code..since the code in the thread is not complete

Khalid
hari
12-16-2002, 03:42 PM
Originally posted by hari
How to display the web page as it is for various browser pixel size.
coding
Please visit the URL www.chandracompanyformations.co.uk and view the sight in different pixel sizes, 600*800, 1024*1200 .The display of contents will not compact according to the size. How to solve this problem

--------------- coding section------------------

<% @ Language="VBScript" %>
<html>
<head>
<title> HomePage of Chandra Company Formations Ltd., </title>
<style TYPE="text/css">
<!--
a:hover
{
color:"Blue";
}
h2
{
color:"#0f26f7";
}
font.a
{
color:green;
font-weight:bold;
font-family:"Courier New"
}
-->
</style>
<link rel="stylesheet" type="text/css" href="contents/cssfiles/styles.css">
<script>
function statusAll()
{
window.defaultStatus = "www.chandracompanyformations.co.uk"
}
</script>
</head>

<body bgcolor="#F5F5F5" text="#000000" link="#FFFFFF" vlink="#FFFFFF" topmargin="0"
alink="#FFFFFF" leftMargin=0 bottomMargin=0 rightMargin=0>
<table cellspacing="0" cellpadding="0" width="757" border="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" height="79" width="757">
<img src="logo.jpg" width=750 height="70">
</td>
</tr>
</tbody>
</table>
<div align="center"></div><div align="center"><center>

<table width="751" border="0" cellspacing="0" cellpadding="0">
<tr align="top">
<td valign="top" bgcolor="#f5f5f5"><table border="0" cellpadding="0" cellspacing="0" width="176">
<!-- fwtable fwsrc="alllinks.png" fwbase="alllinks.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
<tr>
<!-- Shim row, height 1. -->
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="174" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>

<tr><!-- row 1 -->
<td colspan="3"><img name="alllinks_r1_c1" src="images/alllinks_r1_c1.gif" width="176" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr><!-- row 2 -->
<td rowspan="7"><img name="alllinks_r2_c1" src="images/alllinks_r2_c1.gif" width="1" height="232" border="0"></td>
<td><a href="homepage.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r2_c2','images/alllinks_r2_c2_f2.gif','images/alllinks_r2_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r2_c2','images/alllinks_r2_c2_f3.gif',1);" ><img name="alllinks_r2_c2" src="images/alllinks_r2_c2.gif" width="174" height="47" border="0"></a></td>
<td rowspan="9"><img name="alllinks_r2_c3" src="images/alllinks_r2_c3.gif" width="1" height="338" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="47" border="0"></td>
</tr>
<tr><!-- row 3 -->
<td rowspan="2"><a href="generalinfo.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r3_c2','images/alllinks_r3_c2_f2.gif','images/alllinks_r3_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r3_c2','images/alllinks_r3_c2_f3.gif',1);" ><img name="alllinks_r3_c2" src="images/alllinks_r3_c2.gif" width="174" height="47" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="45" border="0"></td>
</tr>
<tr><!-- row 4 -->
<td><img src="images/spacer.gif" width="1" height="2" border="0"></td>
</tr>
<tr><!-- row 5 -->
<td><a href="prices.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r5_c2','images/alllinks_r5_c2_f2.gif','images/alllinks_r5_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r5_c2','images/alllinks_r5_c2_f3.gif',1);" ><img name="alllinks_r5_c2" src="images/alllinks_r5_c2.gif" width="174" height="45" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="45" border="0"></td>
</tr>
<tr><!-- row 6 -->
<td><a href="order.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r6_c2','images/alllinks_r6_c2_f2.gif','images/alllinks_r6_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r6_c2','images/alllinks_r6_c2_f3.gif',1);" ><img name="alllinks_r6_c2" src="images/alllinks_r6_c2.gif" width="174" height="46" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="46" border="0"></td>
</tr>
<tr><!-- row 7 -->
<td rowspan="2"><a href="contacts.asp" target="_self" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','alllinks_r7_c2','images/alllinks_r7_c2_f2.gif','images/alllinks_r7_c2_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','alllinks_r7_c2','images/alllinks_r7_c2_f3.gif',1);" ><img name="alllinks_r7_c2" src="images/alllinks_r7_c2.gif" width="174" height="47" border="0"></a></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr><!-- row 8 -->
<td><img src="images/spacer.gif" width="1" height="46" border="0"></td>
</tr>
<tr><!-- row 9 -->
<td colspan="2"><img name="alllinks_r9_c1" src="images/alllinks_r9_c1.gif" width="175" height="105" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="105" border="0"></td>
</tr>
<tr><!-- row 10 -->
<td colspan="2"><img name="alllinks_r10_c1" src="images/alllinks_r10_c1.gif" width="175" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<!-- This table was automatically created with Macromedia Fireworks 4.0 -->
<!-- http://www.macromedia.com -->
</table>
</td>
<td valign="top"><table width="601" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="contents/homepage.html" width="582" height=330> </iframe></td>
</tr>
</table>
</td>
</tr>
</table>
</center></div>
</body>
</html>
khalidali63
12-16-2002, 11:43 PM
If I understood it correctly then take alook at this line in the code

<table cellspacing="0" cellpadding="0" width="757" border="0" align="center">

it explicitly sets the width of the table to width="757"

Whenever you will set any widht or height attributes explicitly the page rendering will be as it was in the page above,

Ofcourse the font sizes and stuff are each machine dependant, you can try to set that as well,
Or

for every page first check the screen resolution and then display the appropriate page for it..
I hope it guides you...
let me know if you need more details
Khalid
hari
12-26-2002, 03:07 AM
I got the solution to display the contents accordings to browser size , but for frames its not working.
Solution is giving the width and height in percentage
i.e. width=100%

look at this site: www.chandracompanyformations.co.uk
in that i am getting properly for 1024 pixels but not for 800 pixels.
and also i want the solution for setting different font size for various pixel settings
swon
12-26-2002, 05:45 AM
That's your frameset:

<frameset rows="25%,*" border=0>
<frame src="contents/top.html" name="top" scrolling="no">
<frameset cols="17%,*"><!-- change this to absolute width, maybe 150(px),* //-->
<frame src="contents/left.html">
<frameset rows="*,16%">
<frame src="contents/homepage.html" name="contents">
<frame src="contents/telfax.html" name="contact" scrolling="auto">
</frameset>
</frameset>
</frameset>
hari
12-27-2002, 03:30 PM
i.e . in the top and middle rows
<frameset rows="25%,*" border=0> <!-- Here I am having the problem-->
<frame src="contents/top.html" name="top" scrolling="no">
<frameset cols="17%,*"><!-- change this to absolute width, maybe 150(px),* //-->
<frame src="contents/left.html">
<frameset rows="*,16%">
<frame src="contents/homepage.html" name="contents">
<frame src="contents/telfax.html" name="contact" scrolling="auto">
</frameset>
</frameset>
</frameset>

To get clear view for my question view www.chandracompayformations.co.uk

And also one more question.

How to validate for single quote( ' ) (not to be typed by the clients in the text fields)?