PDA

View Full Version : Fixed layout not working on MAC and Dell monitors



techster
Sep 1st, 2007, 06:05 PM
Hi

Firstly thanks alot for letting us learn so much from this forum.... I have learnt alot from this.

Well, problem is I have created a website with horizon/wrapper tags to adjust it to screen center. I have selected the width to 6.5 inches or 624 pixels. To make it to the center I have a negative margin applied with -312pixels; height being at 4.5 inches. Now the problem is it looks perfect on my monitors with 1024+ resolutions but in DELL monitors, mac and certain Widescreen monitors it gets stretched to 7.5inches X 5.5 inches.

This makes it look really awful. Please help me with it.

_Aerospace_Eng_
Sep 1st, 2007, 06:10 PM
Use margin:auto; instead of negative margins. In the future posting your code and/or a link to your page is better so we can see what is happening for ourselves.

techster
Sep 1st, 2007, 07:39 PM
Below is the code that I have used.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About Us</title>
<style>
body {
background-color:#FFFFFF;
scrollbar-base-color: #ffffff;
scrollbar-arrow-color: #808080;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;
}

/* styles for IE 5 Mac */
#horizon {
background-color: transparent;
position: absolute;
top: 20px;
left: 20px;
}

/* following rules are invisible to IE 5 \*/


#horizon
{
color: white;
background-color: #FFFFFF;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display:block;
}

/* end IE 5 hack */

#wrapper
{
font-family: Calibri;
background-color: #FFFFFF;
margin-left: -325px;
position: absolute;
top: -275px;
left: 50%;
width: 650px;
height: 500px;
visibility: visible
}




.text
{
font-family: Calibri;
font-size: 11pt;
color: #808080;
text-align: justify;



}
.copyright
{
font-family: Calibri;
font-size: 8.5pt;
color: #808080;
text-align: right;
}

.c
{
font-family: Calibri;
font-size: 8.5pt;
color: #ED8607;
}

.design
{
font-family: Calibri;
font-size: 8.5pt;
color: #808080;
}

a{
color: #808080;
font-family: Calibri;
font-size: 11pt;
}

a:hover
{
color:#ED8607;
font-family:Calibri;
font-size:11pt;
}

.menu
{
font-family:Calibri;
font-size:11pt;
color:#808080;
text-decoration:none;
}
.menusep {
font-family: calibri;
font-size: 11pt;
color: #ED8607;
text-decoration:none;
}
.footerlink {
font-family: calibri;
font-size: 8.5pt;
color: #808080;

}
.footerlink:hover
{
color:#ED8607;
font-family:Calibri;
font-size:8pt;
}


#textarea
{
width:6.4in;
height:3.5in;
text-align:justify;
vertical-align:baseline;
line-height:13pt;
font-family:Calibri;
font-size:11pt;
overflow:auto;
padding-left:5px;
padding-right:5px;
position:relative;
top: 45px;
}

#footer
{
position:relative;
top:85px;
}


.internallinks
{
font-family:Calibri;
font-size:11pt;
color: #808080;
text-decoration:none;
font-style:italic;
}

.internallinks:hover
{
color:#ED8607;
font-family:Calibri;
font-size:11pt;
text-decoration:none;
}

.csr
{
font-family:Calibri;
font-size:11pt;
color: #808080;
text-decoration:none;
}

.internallinks:hover
{
color:#ED8607;
font-family:Calibri;
font-size:11pt;
text-decoration:none;
}

.scase
{
font-family: Calibri;
font-size: 11pt;
color: #808080;
text-align: justify;
line-height:16.5pt;



}

.scase:hover
{
font-family: Calibri;
font-size: 11pt;
color: #808080;
text-align: justify;



}

.style1 {
margin-bottom: 0px;
}
.style3 {
vertical-align: bottom;
}
.style4 {
white-space: nowrap;
}
</style>
<meta name="keywords" content="shambho, publishing india, publishing house, book printers, press printing, printing, China printing" />
</head>


<body>
<div id="horizon">
<div id="wrapper">
<div id="header">
<table width="100%" style="text-align:right">
<tr>
<td nowrap="nowrap" style="padding-top:47px" width="90%">
<hr size="1" noshade="noshade" />
</td>
<td><a href="default.html" style="border:none"> <img style="border:none" src="5.75 - 72 dpi 1.jpg" alt="SHAMBHO" width="163" height="46" /></a></td>

</table>
<div style="text-align:right; position:relative; top: -7px; padding-right:5px;">
<span class="menusep"> About Us</a>
<span class="menusep">I</span> <a class="menu" target="_self" href="mission.html">Mission</a>
<span class="menusep">I</span> <a class="menu" target="_self" href="services.html">Services</a>
<span class="menusep">I</span> <a class="menu" target="_self" href="showcase.html">Showcase</a>
<span class="menusep">I </span><a class="menu" target="_self" href="contact.html">Contact</a></div>
</div>

<div id="textarea" align="justify" style="padding-right:10px; ">

-------- CONTENT GOES HERE

</div>

<div id="footer">
<div style="text-align:left; padding-left:2.5px; position:relative; top: 5px;">
<a href ="csr.html" target="_self" class="csr">CSR<span style="color:#FF9900; text-decoration:none">@</span>SHAMBHO</a></div>
<table width="100%">
<Tr>
<td width="100%">
<hr size="1" />
</td>
</Tr>
</table>
<div style="text-align:right; position:relative; top: -25px; line-height:11px; ">
<p><span class="copyright">Copyright </span>
<span class="c"></span><span class="copyright"> 2007 SHAMBHO. All Rights Reserved.<br />
</p>
</div>
</div>
</div>
</div>
</body>

</html>



I have included CSS file in the header for the post.
My target audience will generally have Mac and Windows Vista with atleast a gig ram and 1024+ resolution, IE6+.