can be seen perfectly well on the screen resolution of 1024 x 768 but after reducing my screen's resolution to 800 x 600, I couldn't see it equally well. There are many other websites over the Internet that I checked using both screen's resolution & that works perfectly well in higher & lower resolution.
I wonder if there's a way I can make bit of changes to my CSS code so it can be seen equally well in low resolution screen.
/* CSS Document */
body
{
background-image:url(background.jpg);
background-attachment:fixed;
}
/* ........................................ Banner ........................................ */
#banner
{
width:100%;
height:100px;
text-align:center;
}
/* ......................................... Top Menu .................................... */
#topMenu
{
background-color:transparent;
cursor:default;
text-align:center;
width:980px;
float:right;
}
#topMenu ul
{
list-style: none;
float:right;
position:relative;
margin-left: 130px;
width:850px;
}
#topMenu ul li
{
background-color:purple;
display: inline;
border-width:medium;
border-style:outset;
width:203px;
float:left;
position: relative;
font-size:large;
}
#topMenu li:hover
{
border-width:medium;
border-style:inset;
}
#topMenu a
{
display:block;
text-decoration:none;
font-size:larger;
color:yellow;
}
#topMenu a:hover
{
background-color:black;
color:white;
text-transform:uppercase;
}
/* ....................................... Left Menu .......................................... */
#leftMenu
{
background-color:transparent;
cursor:default;
text-align:center;
width:100px;
float:left;
}
#leftMenu ul
{
text-align:center;
list-style:none;
margin:0px;
position:relative;
padding:0px;
width:120px;
border:thin solid red;
border-bottom:0px;
}
#leftMenu ul li
{
display: block;
background-color:yellow;
width:120px;
border-bottom:thin solid red;
color:blue;
position: relative;
font-size:large;
line-height:50px;
}
#leftMenu ul li:hover
{
color:black;
background-color:yellow;
text-transform:uppercase;
}
#leftMenu ul li ul
{
position:absolute;
display: none;
text-transform:none;
left:120px;
width:123px;
top:0px;
}
#leftMenu ul li ul a
{
display:block;
position:relative;
text-decoration:none;
background-color:white;
line-height:20px;
font-size:large;
width:123px;
color:green;
text-transform:none;
}
#leftMenu ul li ul a:hover
{
color:#00FFFF;
background-color:black;
}
#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}
/* This Code is for Microsoft Internet Explorer Browser
to it shows the effect of "li:hover" */
body { behavior: url(csshover.htc); }
/* ................................... Content ................................................ */
#content
{
background-color:white;
width:850px;
border:1px solid green;
float:right;
border-bottom:none;
}
#content h2
{
font-family:"Times New Roman", Times, serif;
text-align:justify;
margin:30px;
color:#990033;
text-decoration:underline;
clear:both;
}
#content h3
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:large;
margin:30px;
color:blue;
text-decoration:none;
clear:both;
}
#content h4
{
font-family:"Courier New", Courier, monospace;
text-align:justify;
font-size:large;
color:red;
margin:30px;
text-decoration:none;
clear:both;
}
#content h5
{
font-family:"Courier New", Courier, monospace;
text-align:justify;
font-size:large;
color:fuchsia;
margin:30px;
text-decoration:none;
clear:both;
}
#content h6
{
font-family:"Courier New", Courier, monospace;
text-align:justify;
font-size:medium;
color:black;
margin:30px;
text-decoration:underline;
}
#content p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
margin:20px 30px;
color:black;
}
#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
#content ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:20px 30px;
list-style-image:url(file:///C|/Darsh/list_icon.gif);
}
#content ul li
{
margin:20px;
clear:both;
}
#content ol
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:20px 30px;
list-style-type:decimal;
}
#content ol li
{
margin:20px;
}
#content img.left
{
float:left;
padding:10px;
}
#content img.right
{
float:right;
padding:10px;
}
#content ul li a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
text-decoration:none;
}
#content ul li a:hover
{
color:red;
background-color:yellow;
font-weight:bold;
}
#content ul a:active
{
color:blue;
font-weight:bold;
}
#content ul a:visited
{
color:grey;
}
/* ................................... Other Class ......................................... */
.boldText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
font-weight:bold;
}
.italicText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
font-style:italic;
}
.underlineText
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
text-decoration:underline;
}
/* ................................... Table ......................................... */
.table
{
background-color:black;
border-style:outset;
border-width:thick;
border-spacing:20px;
margin:30px 30px;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
}
.table:hover
{
border-style:inset;
border-width:thick;
}
.tr
{
border:1px solid red;
}
.th
{
border:1px solid yellow;
color:fuchsia;
}
.td
{
border:1px solid red;
font-size:medium;
color:yellow;
}
/* ................................... Bottom Menu ......................................... */
#centerTop
{
text-align:center;
float:none;
}
#centerTop img
{
border:0px;
}
#bottomMenu
{
border:1px solid red;
float:left;
background-color:black;
color:#FFFFFF;
text-align:center;
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:large;
width:100%;
height:5%;
margin:0px;
}
#validator
{
text-align:center;
float:none;
}
#validator img
{
border:0px;
} 
Unsolved 
Offline 
