Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Phantom Lines (?!?)

    In an attempt to make my site 800X600 friendly, 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:
    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">
    <head>
    <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>
    </head>
    <body>
    <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>
    </div></div></div>
    </body>
    </html>
    Stylesheet 1 (skeleton):
    Code:
    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; } 
    
    /*Containers:*/
    #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;  } 
    
    /*Header:*/
    .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):
    Code:
    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.

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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+.
    Once I thought I was wrong but I was mistaken.

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where the heck is that phantom line then? Can't see it.
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •