• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Fit to screen --CSS out of wack

I have this following CSS, it looks fine when I developed it on my computer. But now when I checked on the other computers, it doesn't automatically fits. Can someone help me.
Style.CSS
XXXXXXXX
@charset "utf-8";
/* CSS Document */
body { background-color: #FBFEFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#2271A0;
margin:0px;
padding-bottom:20px;
scrollbar-face-color:antiquewhite;
scrollbar-highlight-color:red;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:brown;
scrollbar-shadow-color:pink;
scrollbar-arrow-color:red;
scrollbar-track-color:ivory;
}

.header { height:70px;
background-image: url('images/blue-bar3.gif');
/*background:white; */
/*border:0px solid green;*/
color:#FFFFFF;
}
.headerinside {margin-left:190px;

padding-left:500px;
}
.headerside { height: 70px;
left:0px;
width:165px;
background:white;
color:#FF0000;
}
#mainbody { margin-left:190px;
padding-top:15px;
padding-right:0px;
padding-bottom:5px;
padding-left:0px;
background:#FBFEFF;
border:0px solid brown;
}

#menu { position:absolute;
top:70px;
left:0px;
width:170px;
background:#FBFEFF;
color:brown;
/*border:1px solid blue; */
text-align: center;
}

.menuitem { width:160px;
background:#84d6f7;
color:white;
font-size:14px;
font-weight:bold;
border:3px solid #84d6f7 ;
text-align: left;
}

.menuhead { left: 0px;
width:155px;
background:#84d6f7 ;
color:white;
/*border:3px solid cornsilk ;*/
text-align: center;
font-weight:bold;
font-size:12px;
}

.footer { width:98%;
text-align:center;
margin-top:5px;
padding:1px;
background:ivory;
color:brown;
border:1px solid red;
}

a:hover { /*font-size:14px;*/
background-color:yellow;
color:brown}

h1 { font-size:30px}

h2 { font-size:24px}

h3 { font-size:20px}

p,h1,h2,h3 { margin: 10px 10px 10px 10px}

.heading { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
background-color:yellow;
color:#2271A0;
font-weight:bold;
text-align: center}

XXXXXXXXXXXXXXXXXXX
0
syedasimmeesaq
Asked:
syedasimmeesaq
  • 2
  • 2
1 Solution
 
syedasimmeesaqAuthor Commented:
The above CSS works with index.php which have include files.

here is index.html
--------------------
<!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" xml:lang="en" lang="en">
<head>
<title>
Bookmark Title Here </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noarchive" />
<meta name="keywords" content=" Insert keywords - SOME search engines still use keywords" />
<meta name="description" content=" Description is used by some search engines" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
<div class="headerside">
<?php include('headerside.html'); ?>
</div>
<div class="headerinside">
<?php include ("header.html") ?>
</div>
</div>
<div id="menu">
<?php include ("menu.html") ?>
</div>
<div id="mainbody">
<?php include ("login.php") ?>
</div>
<div class="footer">
<?php include ("footer.html") ?>
</div>
</body>
</html>

-----------------

`header.html
------------------
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<center>
<table width="641" border="1" align="center">
  <tr>
    <td>Home</td>
    <td>N/A</td>
    <td>N/A</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
</table></center>

</body>

</html>
--------------------
headerside.html
_____________
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<img src="images/schools.jpg" width="165" height="70" />
</body>
</html>
_____________________
menu.html
_______________________
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div class="menuitem">
<div class="menuhead">
Focused Monitoring Group</div>
</div>
<div class="menuitem">
<br /><br /><br />
  <table width="161" border="1">
    <tr>
      <td width="162">Oct. 29 -Nov. 2<br /></td>
    </tr>
    <tr>
      <td>Nove. 26- 30<br /></td>
    </tr>
    <tr>
      <td>Dec.3 - Dec 7<br /></td>
    </tr>
    <tr>
      <td>Jan. 14 - 18<br /></td>
    </tr>
    <tr>
      <td>Feb. 4 - 8 <br /></td>
    </tr>
    <tr>
      <td>Feb 25- 29 <br /></td>
    </tr>
    <tr>
      <td>March 17 - 21<br /></td>
    </tr>
    <tr>
      <td>Apirl 7 - 11 <br /></td>
    </tr>
    <tr>
      <td>May 5- 9 <br /></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>

</body>
</html>
-------------------------Thanks in advance
0
 
syedasimmeesaqAuthor Commented:
Anyone?
0
 
colinspursCommented:
Do you have a link we could look at?

What browser and screen size do you have on your computer?  and on the computers that it doesn't work on?

Colinspurs
0
 
colinspursCommented:
Do you need a Doctype and header in every include file?

Try forgetting include, just for the moment, and move all the included code back into the main page.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now