PDA

Click to See Complete Forum and Search --> : Screen Size Issue

kaio393
10-06-2007, 08:29 PM
one of my friends visted it this site:
http://ubergoogling.googlepages.com/calendar2.html

and got this screen on his comp
http://img522.imageshack.us/img522/7601/wtffk4.png

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
#nav{
position: absolute;
top: 30px;
right: 125px;
}
#nav a{
padding: 10px;
}
body {
background-color: #010c1e;
background-image: url(mainbg.jpg);
background-repeat: no-repeat;
background-position: center top;
font-family: "Segoe UI", Geneva, Arial, Helvetica, sans-serif;
color: #555555;
}
a {
color: #000066
}
p {
margin: 1em 0;
}
#pagewrap {
width: 700px;
margin: 0 auto;
padding-right: 3px;
height: 800px;
}

#leftcol {
float: left;
width: 450px;
padding-top: 269px;
padding-left: 15px;
}
#leftcol h2, #rightcol h2 {
line-height: 30px;
padding-bottom: 5px;
font-weight: normal;
}
#leftcol a {
float: left;
width: 82px;
height: 108px;
background-repeat: no-repeat;
background-position: center top;

color: #0D81CE;
}

#contentWrap {
margin: 0 207px 0 220px;
padding-top: 150px;
}
.style2 {font-size: medium}
#rightcol {
float: right;
width: 165px;
padding-top: 269px;
text-align: right;
padding-right: 15px;
}

</style>
<title>Uber Googlers :: Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="pagewrap">
<div id="nav">
<a href="forums/"><img src="forumsbutton.gif" border="0" /></a>
<a href="#"><img src="calendarbutton.gif" border="0"/></a>
<a href="facts2.html"><img src="factsbutton.gif" border="0"/></a>
<a href="news2.html"><img src="newsbutton.gif" border="0"/></a>
</div>
<div id="leftcol">
<h2>Calendar</h2>

<h1>October</h1>
<p>31:<br> Halloween... Scary!!</p>
</div>
<div id="rightcol">
<a href="../index2.html">
<p> <img src="bullet.gif" style="border-style: none"/> Main</p></a>
<a href="../contact2.html"><p> <img src="bullet.gif" style="border-style: none"/> Contact Us</p></a>

<a href="../about2.html"><p><img src="bullet.gif" style="border-style: none"/> About Us</p></a>
<a href="http://feeds.feedburner.com/blogspot/MKuf" ><p><img src="bullet.gif" style="border-style: none"/> Old News</p></a>
</div>

</body>
</html>
scragar
10-06-2007, 08:32 PM
the site used a fixed length, so the position absolute thing messes it up.

replace the lines that read:

position: absolute;
top: 30px;
right: 125px;
with:
float: right;
margin-top: 25px;
margin-right: 30px;
yet again, adjust for appearance.
kaio393
10-06-2007, 08:42 PM
lol
yet again, thanks much :)