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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts

    In serious need of help!

    I can't get the side bar on my site to work right. There is a black space under it when the content is bigger than the sidebars original size. When I set the height of the content div to 100% it messes the page up in firefox and wont work in IE.

    Here is my code.. I am really clueless and I would appreciate help with this specific problem.

    Code:
    html, body{
    margin:0;
    padding:0;
    border:0;
    background-color:#000000;
    height:100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #2130BD;
    font-weight:normal;
    background-image: url(); background-repeat: repeat-x; }
    a, a:link, a:visited, a:active {
    color:#000000;
    background-color:inherit;
    text-decoration:none;
    }
    a:hover {
    color:#df0000;
    background-color:inherit;
    }
    img {
    border:0;
    } 
    #container {
    width:799px;
    margin:auto;
    background:#FFFFFF;
    color:#9695c9;
    padding-right:0;
    padding:0;
    min-height:100%;
    border-right:0px solid #000;
    }
    * html #container {
    height:100%;
    }
    #header {
    width:800px;
    height:179px;
    line-height:0px;
    font-size:0;
    border-right:0px solid #000;
    }
    #header2 {
    width:801px;
    height:31px;
    background-image: url(mech2.jpg); background-repeat: no-repeat;
    border-right:0px solid #a1a1b6;
    border-left:0px solid #a1a1b6;
    border-bottom:0px solid #a1a1b6;
    }
    #content {
    width:801px;
    height:100%;
    padding:0px;
    background:#000000 url(mech3.jpg) no-repeat;
    text-align:left;
    border-right:0px solid #a1a1b6;
    border-left:0px solid #a1a1b6;
    border-bottom:1px solid #a1a1b6;
    }
    #content p {
    margin:0;
    padding:0 0 5px 0;
    text-align:justify;
    }
    .clear {
    clear:both;
    line-height:0px;
    font-size:0;
    }
    hr {
    height:0;
    line-height:0px;
    font-size:0;
    border:0;
    border-bottom:1px solid #707070;
    }
    .borderTable { 
    padding: 2px 4px 2px 4px;
    border: 1px solid #d60707;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Omhi Slash : NegroSmash</title>
    
    <link rel="stylesheet" type="text/css" href="/style.css">
    
    </head>
    <body>
    <div id="container">
    	<div id="header">&nbsp;<img src="mech1.jpg" width="801" height="179" border="0" alt="Omni Slash"></div>
    	<div id="header2"><table align="right" cellpadding="0" cellspacing="0"><tr><td><a href="home.html"><img height="31" border="0" src="home.gif"></a></td></tr></table></div>
    	<div id="content">
    <table align="right" cellpadding="5" cellspacing="0" height="100%" width="129" style="border:1px solid #3f487f" background="navbar.gif">
    <tr>
    <td valign="top">
    <a href="members.html">» Members</a><br><br>
    <a href="moonunits.html">» Moon Units</a><br><br>
    <a href="negrosmash.html">» NegroSmash</a><br><br>
    <a href="howtojoin.html">» How to Join</a><br><br>
    </td>
    </tr>
    </table>
    <table align="right" cellpadding="5" cellspacing="0" width="425" height="100%">
    <tr>
    <td align="right" valign="top">
    <img src="negrosmashbanner.gif">
    <br>
    <br>
    <br>
    <br>
    <br>
    </td>
    </tr>
    <tr>
    <td>
    <center><font color="white"><b>How to Join</b></font></center>
    </td>
    </tr>
    <tr>
    <td style="border-left:1px solid #646ead; border-top:1px solid #646ead" background="newsimg.gif">
    &nbsp;
    </td>
    </tr>
    <tr>
    <td cellpadding="5" valign="top" style="border-left:1px solid #646ead; border-top:1px solid #646ead; border-bottom:1px solid #646ead" background="newsbackground.gif">
    To join the clan you have a few choices: Either use the email form below to email a message to me(only if you have a question) don't ask me to join through the email form, or contact a squad leader. Squad leaders names are listed on each squad page. Simply ask for a try out and do well. Your rank is decided by your skill level.
    </td>
    </tr>
    <tr>
    <td>
    <br>
    <br>
    <form action="process.php" method="post">
    Name:<br>&nbsp&nbsp<input type="text" name="name" size="20" maxlength="20" /><br />
    Email:<br>&nbsp&nbsp<input type="text" name="email" size="30" maxlength="30" /><br />
    Subject:<br>&nbsp&nbsp<input type="text" name="subject" size="30" maxlength="30" /><br />
    Text:<br>&nbsp&nbsp<textarea name="text" name="text" cols="40" rows="10"></textarea><br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Send" />
    </form>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </td>
    </tr>
    </table>
    
    	</div>
    </div>
    </div>
    </div>
    <!-- --><script type="text/javascript" src="/i.js"></script></body>
    </html>
    The <br>'s are just there to show you the problem im having. Thank you in advance for any advice I shall recieve.

    The site is:

    http://www.omnislash.twilightcity.net/howtojoin.html

  • #2
    New Coder
    Join Date
    Feb 2006
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've found several errors by using


    Even though they allow CSS style stuff on the html page, I've found that all CSS stuff registers as an error in the validator and in standards compliant browsers whenever I tried putting it on the html page.

    I am posting a link to my CSS sheet from my own site that illustrates background images and more:

    Use link:
    http://www.tpgames.com/tpgames/tpgames.css

    The link to the page used with above CSS sheet:
    http://www.tpgames.com/tpgames/h0Jm3.html
    The source code for the page, use Ctrl U to view source.

    I have copied your images, html, and css to my site to try and figure out how to make it work. I fixed what I could.
    I fixed the "nbsp" to = "nbsp;"
    I also deleted most of the style stuff.

    You'll want to add class names to your TD tags to get address the CSS you want used for that particular tag. I used in the CSS sheet and HTML code the names of your images for the class names.

    Example: <td class="newsbackground">
    Then in your style sheet, you'll see

    TD.newsbackground {
    background-image: url(/newsbackground.gif);
    background-position: top;
    padding-left: "5";
    padding-rightt: "5";
    border-left:1px solid #646ead;
    border-top: 1px solid #646ead;
    border-bottom: 1px solid #646ead;
    }

    Here are the links to the CSS sheet as I fixed it. It might still have some errors. You will just have to change the link info to reflect where it really is on your server.
    http://www.tpgames.com/games/b/help/style.css

    Here is the link to the HTML page with the fixed code.

    http://www.tpgames.com/games/b/help/howtojoin.html

    The code now validates however, you still don't have the white space contained how you want it. I'm not sure why this is.

    The validator does not like height tags in tables. I'm not sure how to fix this. I just let the height be automatic except for when I'm using frames.

    You are missing the code for mech2.jpg and mech3.jpg to showup. I'm not sure where they should be on in the HTML page as I'm falling asleep. Sorry!

    This should help you a little at least. If I find that you still have not figured out the white space AFTER fixing the mech2/mech3 image coding, and if I remember, I'll take another look at it on Tuesday when I have time.

    Happy Holidays!

    ps. I'm keeping the copies of your images on my space, and copies of the coding until I figure out the white space problem OR until you fix it on your site. After that, I will delete it from my site. The only links to those images and pages were posted here. I did not put links to those pages anywheres on my site for the visitor to find. Any problems with this, please PM me, and I'll fix it on Tuesday or whenever I get the PM. Thanks! Best Wishes!

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    You need to fix a critical issue first shown below in red. There are other errors in your code that should also be fixed as well. The errors:
    • You have a mis‐matched number of div tags; you have four opening tags and six closing tags.
    • You have two name attributes on one element.
    • The “background” and “height” attributes don’t exist for the table element. Use the CSS background-image and height properties for those effects.
    • The “background” and “cellpadding” attributes don’t exist for the td element. Use the CSS background-image and padding properties for those effects.
    • The required alt attribute is missing for some images. It provides a textual alternative for cases when the images cannot be displayed.

    You have a whole host of other issues as well such as using presentational attributes when CSS should be used instead, using inline CSS, using un‐semantic HTML such as tables for layout, et cetera. These issues don’t make your code invalid, but they are not good practice either.

    Edit: tpgames beat me to the post
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    When I fix the repeat of the background for the mech3 image it makes it so the navbar image stops repeating. Can you tell me why?

    Thanks for your help up to this point I appreciate it but it wont work

    you had

    Background:#000000 url(mech3.gif); no-repeat;

    The ; was cuasing it to still repeat so I fix this and all of a sudden its back to normal.

  • #5
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    please someone help me

  • #6
    New Coder
    Join Date
    Feb 2006
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Sorry! Haven't found solution yet.

    I've found it easier to make an image the size I want it, and to use it instead of a smaller image that repeats to fill the space.

    Perhaps Arbitrator knows? I'm still learning the finer points of HTML and CSS myself.

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    no-repeat is supposed to stop it from repeating. I'm not sure I understand your problem.. Do you want it to repeat, or not?

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

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