View Full Version : Phantom Lines (?!?)

08-08-2005, 08:17 PM
In an attempt to make my site 800X600 friendly (http://www.nadamt.xmgfree.com/hub.php), I've resorted to using percentages--substituting pixels--as measuring attributes for most my elements. The result would be fine had it not been for the debris that appears and disappears depending on the size of the browser window, these "phantom lines." Sometimes it's a horizontal line on the bottom right-hand corner, other times it's a vertical line right smack in the middle of my header. Is this a problem that comes with percentage territory, or an error on my part?

XHTML 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" xml:lang="en-us" lang="en" dir="ltr">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="en-us" />
<meta name="author" content="nadamt" />
<base href="http://www.nadamt.xmgfree.com/" />
<link rel="stylesheet" href="nadamt.css" type="text/css" media="screen" />
<link rel="stylesheet" href="red.css" type="text/css" media="screen" />
<title>nadamt: hub;</title>
<div id="interface">
<!--Hub links:-->
<div class="hub"><ul><li><a href="hub.php" class="red">hub</a></li></ul></div>
<!--Log links:-->
<div class="log"><ul><li><a href="log.php" class="blue">log</a><ul>
<li><a href="log.php">July 2005</a></li>
<li><a href="log.php">June 2005</a></li></ul></li></ul></div>
<!--Works links:-->
<div class="works"><ul><li><a href="works.php" class="green">works</a><ul>
<li><a href="works.php">Poetry</a></li>
<li><a href="works.php">Essays</a></li>
<li><a href="works.php">Short Stories</a></li></ul></li></ul></div>
<!--Info links:-->
<div class="info"><ul><li><a href="info.php" class="grey">info</a></li></ul></div>
<div id="background">&nbsp;</div>
<div id="threshold"><div id="content">
<p>This is the "hub" section of my website. Updates, general happenings, and whatnot will be shown here.</p>

Stylesheet 1 (skeleton):

html, body{ height: 100%; width: 100%; margin: 0%; padding: 0%; overflow: auto; }
body{ background-color: rgb(90,90,90); color: rgb(255,255,255); font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 17px; letter-spacing: 1.25px; text-align: left; word-spacing: 2px; }
p { margin: 0px; padding: 0px 0px 15px 0px; }

#interface { position: absolute; top: 5%; left: 5%; height: 90%; width: 90%; }
#background { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
#threshold { position: absolute; overflow: auto; width: 105%; height: 100%; }
#content { position: absolute; background: transparent; padding: 30px 40px 5px 1px; }

.hub, .log, .works, .info { position: absolute; top: 0%; margin: 0%; padding: 0%; top: 0%; width: 25%; }
.hub { left: 0%; }
.log { left: 25%; }
.works { left: 50%; }
.info { left: 75%; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/*Drop down menu:*/
ul, li ul, ul li a, li ul a { color: rgb(255,255,255); font-weight: bold; text-decoration: none; padding: 0px; margin: 0px; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; position: relative; z-index: 1; font-size: 1.03em; text-transform: lowercase; text-align: center; width: 100%; }
ul { list-style: none; width: 100%; }
li ul { position: relative; width: 100%; display: none; }
li ul a { text-align: right; }
ul li a, li:hover ul { display: block; }
ul li a:hover { width: 100%; }
li ul a:hover { background: rgb(75,20,20); text-align: right; padding-top: .75em; }

Stylesheet 2 (skin):

li:hover ul { background-color: rgb(140,85,85); }
body { background-image: url(http://www.nadamt.xmgfree.com/red_tile.PNG); background-position: center; }
li ul a, ul li a, ul li a.red:hover{ background-color: rgb(115,55,55); }
ul li a:hover, li ul a:hover, ul li a.red { background-color: rgb(45,0,0); }
#background { background-color: rgb(35,0,0); }
The site is funtional on in Firefox. Thanks in advance.

Tristan Gray
08-09-2005, 01:58 PM
I have no idea about that problem honestly but I did want to say two things. Incredibly menu, I really like it, quite a bit different. Have you considered simply making your page a fixed with and making that width 600px? I know everyone talks about fluid pages but in my opinion most layouts are better off as fixed-width for major resolution changes. That being said I do not design for 640x400. 800x600+.

08-09-2005, 02:39 PM
Where the heck is that phantom line then? Can't see it.