...

View Full Version : In serious need of help!



SKY-ProToSs
12-23-2006, 01:32 PM
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.



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;
}




<!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

tpgames
12-23-2006, 08:58 PM
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! :D

Arbitrator
12-23-2006, 09:35 PM
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.

tpgames beat me to the post

SKY-ProToSs
12-24-2006, 07:28 AM
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.

SKY-ProToSs
12-25-2006, 09:22 AM
please someone help me

tpgames
12-29-2006, 05:23 AM
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. :D

whizard
12-29-2006, 06:33 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum