Forum Moderators: not2easy
I have been workin gon the design for:
<snip>
But if you noticed the page has a bar at the bottom that will allow the user to scroll over a ton. Posted below is a screenshot:
<snip>
If you could help me fix this problem that would be great! Thanks!
I posted a topic in another forum, and they stated the problem had to do with the CSS, hope that helps.
[edited by: Robin_reala at 10:16 pm (utc) on May 17, 2007]
[edit reason] Removed URLs as per TOS #13 [webmasterworld.com] [/edit]
Yes I've seen the code, and decided it might be worth doing another Case Study, to see if following the troubleshooting guide [webmasterworld.com] would work
It did! - the original site code was approx 630 lines with embedded CSS & javascript, the sample I landed up with still producing the error is approx 35 lines. The troubleshooting guide was invaluable in this case because It's not the footer :o
As the title is misleading, Spirix is referring to a horizontal scroll which is approximately but not quite 100% of the page, and just FYI it's only visible in IE (inc IE7)
First I removed all javascript, and stripped all the code from between the body tags, then adding in the main layout divs one by one, along with their relevant CSS was a jackpot hit because I started at the top of the page and the problem is in the "masthead"!
So without boring you any further here's the sample code:
<!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=iso-8859-1" />
<title>Store</title>
<style type="text/css" media="screen">
body{margin: 0; padding: 0; background: #eee; /*gray */}#masthead{
position: absolute;
/* top: 0; left: 2%; right: 2%; */
width: 100%; /* 95.6%; *//* added for visual only */
height: 50px; background: #ff0;
}#utility {
text-align: center;
background: #dad; /* added for visual */
position: absolute; top: 5px; right: 0px;
}
</style>
</head>
<body>
<div id="masthead"><h1>Site Name</h1>
<div id="utility">
<p>Lorem ipsum dolor sit amet.<br /><em>#-###-###-####</em></p>
</div>
</div>
</body>
</html>
I added some color, after the fact, for visual only and I changed the width to 100% - have left actual measurements in comments
OK that's the technical bit done, but perhaps someone else can have a look at the why? I've got to be elsewhere today, apologies
Suzy
Thanks again for anyone's help on this subject!
