Problems With Comment Box

I can’t seem to be able to get a few things to show up correctly in my comment box on my webpage. I can’t post the address because I’m a new member and am not allowed to display links. It’s inkzoid||||com|||slash our_gallery2||| dot ||| html

  1. The comment box works, but the submit button is invisible even though it is in fact there and working.

  2. There are white lines directly above the text area field and I’m not sure how to remove them.

  3. I also have images that are supposed to be placed at the top and bottom right hand corners of the text area to give the illusion of rounded corners.

Thanks in advance for your help

Alex

Here’s the CSS:

div.hcb-shadow-tl {background:url(shadow-bg.jpg) top left;}
div.hcb-shadow-tr {background:url(shadow-bg.jpg) top right;}
div.hcb-shadow-bl {background:url(shadow-bg.jpg) bottom left;}
div.hcb-shadow-br {background:url(shadow-bg.jpg) bottom right;}
div.hcb-shadow-t {background: url(shadow-bg-t.jpg) repeat-x;}
div.hcb-shadow-b {background: url(shadow-bg-t.jpg) repeat-x bottom;
margin-bottom: 5px;}
div.hcb-shadow-m {background: url(shadow-bg-r.jpg) repeat-y right;
padding-right: 7px;
clear:both;}
div.hcb-shadow-r {background: url(shadow-bg-l.jpg) repeat-y left;
display:block;}

div.hcb-shadow-t,div.hcb-shadow-tr,div.hcb-shadow-b,div.hcb-shadow-br,div.hcb-shadow-tl,div.hcb-shadow-bl {
background-color:white;
height:7px;
}

div.hcb-shadow-tr,div.hcb-shadow-br,div.hcb-shadow-tl,div.hcb-shadow-bl{
width:7px;
}
div.hcb-shadow-tr,div.hcb-shadow-br{
float:right;
}
div.hcb-shadow-tl,div.hcb-shadow-bl{
float:left;
}

br.hcb-shadow-clear {
display:block;
clear:both;
}

#HCB_comment_box {
position: absolute;
top: 171px;
left: 387px;
width: 415px;
height: auto;
background-color: #128911;
}
#HCB_comment_box * {
margin:0;
padding:0;
outline:0;
border-width:0;
}

#HCB_comment_box textarea.commentbox {
width:100%;
display:block;
border: 0;
background-color: #ffffff;
}

#HCB_comment_box textarea, #HCB_comment_box input.text, #HCB_comment_box input.submit {
border: 0px none transparent;
background-color: transparent;
padding-left:5px;
color: #yellow;
}

#HCB_comment_box div.hcb-wrapper {
width: 70%;
}

#HCB_comment_box input.text {
width: 70%;
}

/* the submit button */
#HCB_comment_box .submit {
cursor:pointer;
font-weight:bold;
background-color:#ffffff;
width:84px;
height:25px;
color: transparent;
}

#HCB_comment_box span.home-desc {
font-size:10px;
opacity:0.4;
}

#HCB_comment_box blockquote {
margin:0 !important;
padding:20px;
background:url(speech-bubble.jpg) no-repeat;
}

/* the individual comment display containers */
#HCB_comment_box div.comment {
border-bottom:1px solid #ffffff;
margin-bottom:5px;}

Here’s the HTML - I hope it posts correctly because I have trouble with forums sometimes interpreting the code…I’ll remove the brackets from the div and script tags just to be on the safe side.

BRACKETdiv id=“HCB_comment_box”> some website address">HTML Comment Box</a> is loading comments…</div>

BRACKETscript type=“text/javascript” language=“javascript” id=“hcb”> /BRACKET!–/ (function(){s=document.createElement(“script”);s.setAttribute(“type”,“text/javascript”);s.setAttribute(“src”, “some website address/jread?page=”+escape(window.location)+“&mod=%241%24wq1rdBcg%24r7GwXg/mW5NqXzlWiCOdB.”+“&opts=478&num=30”);if (typeof s!=“undefined”) document.getElementsByTagName(“head”)[0].appendChild(s);})(); if(typeof hcb_user==“undefined”)hcb_user={};hcb_user.submit=“”;/–>/ </script>
BRACKET!-- end some website address –>
</div>

Hi, please try posting the html inside these without the spaces [code ][ /code]

Edit: Sorry, nevermind I didn’t see your URL there :wink:
http://inkzoid.com/our_gallery2.html

The problem is that the button has no text (value=“”) and the background-color and color properties are set to transparent :slight_smile:

Another bigger problem is that it uses javascript to populate the form :frowning:
Lets just say that scripts like http://www.htmlcommentbox.com/ should never ever be used on the web.

Thanks for the quick reply!

*******ized comment scripts! I should have done it myself…it’s just that I was looking for a quick fix and that was my problem right there. I’m not really trying to make the site too professional and make a lot of money from it…I just wanted it be a place to put my art and show people cool links and ***** about things…kinda like merging a blog and an art portfolio together.

I wrote the code for the whole site myself from scratch, except for that damned comment box because I didn’t want to have to learn another language like Javascript or PHP…looks like I might have to after all… I’ll give the button another shot with your advice and see if it clears up the problem. Otherwise I may have to toss the laptop off the 8th floor as it doesn’t fit in the microwave and my woodchipper is not functioning.

Well thanks to your help I’ve figured out how to tweak a bunch of the code and have got most of the results I wanted. My only issue now remains on how to allow the purple border image at the bottom of my site to be pushed downwards as the number of comments increases…right now it’s overlapping on top of the comment box.

When I type in overflow-y: scroll; in the attributes of the comment box it doesn’t show up a scrollbar. It does for the image gallery on the left hand side. I wonder if it would work if I put the entire comment box inside it’s own div?

Thanks again for helping me improve my site.

Hi,

If this is your first site you’ve done very well so far.

My only issue now remains on how to allow the purple border image at the bottom of my site to be pushed downwards as the number of comments increases…right now it’s overlapping on top of the comment box.

You can’t do that with absolute positioning i’m afraid - it removes it from the ‘normal flow’ of the document meaning that you can no longer let it’s content effect the position of something else.
The alternative is to use the float property to stack blocks horizontally - I’ll whip you up the same thing but using floats instead of AP.

Here’s a few tips:

Font’s that have more than one word need single quotes ‘’ e.g.
font-family: ‘letter gothic std’, ‘times new roman’;

Don’t use files with with spaces or special characters like apostraphe’s e.g.
home (2).jpg, nancy’s_dogs_thumbnail_shine.jpg

Put your css and javascript in external files e.g.
<link rel=“stylesheet” type=“text/css” href=“styles.css” />
<script type=“text/javascript” src=“scripts.js”>


<!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=utf-8" />
<title>Inkzoid - A Bunch of Useless ******** I Do When I'm Bored</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body onload="MM_preloadImages('Images/home_glow (2).jpg','Images/gallery_glow.jpg','Images/cool_stuff_glow.jpg','Images/friends_glow.jpg')">
<div id="wrapper">
  <div id="banner"><img src="our_gallery2_files/banner_top.jpg" width="800" height="140" /></div>
  <div id="nav"><img src="our_gallery2_files/bar.jpg" width="1" height="30" /><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Images/home_glow	(2).jpg',1)"><img src="our_gallery2_files/home(2).jpg" alt="home" name="home" width="77" height="30" border="0" id="home" /></a> <a href="our_gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','Images/gallery_glow.jpg',1)"><img src="our_gallery2_files/gallery.jpg" alt="gallery" name="gallery" width="91" height="30" border="0" id="gallery" /></a> <a href="cool_stuff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cool stuff','','Images/cool_stuff_glow.jpg',1)"><img src="our_gallery2_files/cool_stuff.jpg" alt="cool stuff" width="123" height="30" border="0" id="cool stuff" /></a> <a href="inkzoids_friends.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('friends','','Images/friends_glow.jpg',1)"><img src="our_gallery2_files/friends.jpg" alt="friends" name="friends" width="91" height="30" border="0" id="friends" /></a></div>
  <div id="left">
    <div class="thumbnail"><a href="alien_bar.html"><img src="our_gallery2_files/alien_bar_thumbnail_200x150_shine.jpg" width="100" height="75" border="0" /></a></div>
    <div class="thumbnail"><a href="find_your_way.html"><a href="find_your_way.html"><img src="our_gallery2_files/find_your_way_thumb_shine.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="fish.html"><img src="our_gallery2_files/fish_thumb.jpg" width="100" height="75" /></a></div>
    <br class="clearboth" />
    <div class="thumbnail"><a href="tribal_phoenix.html"><img src="our_gallery2_files/tribal_phoenix_thumbnail_200x150_shine.jpg" width="100" height="75" border="0" /></a></div>
    <div class="thumbnail"><a href="african_heat.html"><a href="african_heat.html"><img src="our_gallery2_files/giraffe_thumbnail_200x150_shine.jpg" /></a></div>
    <div class="thumbnail"><a href="two_dogs.html"><img src="our_gallery2_files/nancys_dogs_thumbnail_shine.jpg" width="100" height="75" border="0" /></a></div>
    <br class="clearboth" />
    <div class="thumbnail"><a href="devilgirl.html"><img src="our_gallery2_files/devilgirl_thumb.jpg" width="100" height="75" border="0" /></a></div>
    <div class="thumbnail"><a href="bird_and_stars.html"><img src="our_gallery2_files/bird_and_stars_thumb.jpg" width="100" height="75" border="0" /></a></div>
    <div class="thumbnail"><a href="geisha.html"><img src="our_gallery2_files/geisha_thumb.jpg" width="100" height="75" border="0" /></a></div>
    <br class="clearboth" />
    <div class="thumbnail"><a href="alien_smoke.html"><img src="our_gallery2_files/thumb_stoner_alien_shine.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="bird_and_ring.html"><img src="our_gallery2_files/bird_and_ring_thumb.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="sachmo.html"><img src="our_gallery2_files/sachmo_thumb_shine.jpg" width="100" height="75" /></a></div>
    <br class="clearboth" />
    <div class="thumbnail"><a href="tribal_mask.html"><img src="our_gallery2_files/tribal_mask_thumb.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="full_house.html"><img src="our_gallery2_files/full_house_thumb.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="banner.html"><img src="our_gallery2_files/banner_thumb.jpg" width="100" height="75" /></a></div>
    <br class="clearboth" />
    <div class="thumbnail"><a href="flying_bird.html"><img src="our_gallery2_files/flying_bird_thumb.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="wants_to_play.html"><img src="our_gallery2_files/wants_to_play_thumb.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="inner_strength.html"><img src="our_gallery2_files/inner_strength_thumb.jpg" width="100" height="75" /></a></div>
    <br class="clearboth" />
    <div class="thumbnail"><a href="smoking_man.html"><img src="our_gallery2_files/smoking_man_thumb.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="our_gallery.html"><img src="our_gallery2_files/coming_soon.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="our_gallery.html"><img src="our_gallery2_files/coming_soon.jpg" width="100" height="75" /></a></div>
    <br class="clearboth" />
    <div class="thumbnail"><a href="our_gallery.html"><img src="our_gallery2_files/coming_soon.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="our_gallery.html"><img src="our_gallery2_files/coming_soon.jpg" width="100" height="75" /></a></div>
    <div class="thumbnail"><a href="our_gallery.html"><img src="our_gallery2_files/coming_soon.jpg" width="100" height="75" /></a></div>
    <br class="clearboth" />
  </div>
  <div id="HCB_comment_box">loading comments...</div>
  <script type="text/javascript"></script>
  <div id="bottom_banner"><img src="our_gallery2_files/banner_bottom.jpg" alt="bottom banner" /></div>
</div>
</body>
</html>


body {
	background-color: #111111;
	background-repeat: no-repeat;
	scrollbar-base-color: #1ac817;
	scrollbar-face-color: #1ac817;
	scrollbar-arrow-color: #ffffff;
	scrollbar-darkshadow-color: #083e0a;
}
a:link {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
p.text {
	color: #FFF;
	font-family: 'letter gothic std', 'times new roman';
	font-size: 80&#37;;
	font-weight: bold;
	padding: 6px 0px 0px 2px;
	margin: 0;
	text-align: center;
}
#wrapper {
	width: 800px;
	margin: 0 auto;
}
.nav {
	float: left;
	margin: 0;
	padding: 0;
}
img.floatLeft {
	float: left;
	margin: 0;
	padding: 0;
}
img.floatRight {
	float: right;
	margin: 0px;
	padding: 0px 0px 0px 2px;
}
.clearboth {
	clear: both;
}
.thumbnail {
	float: left;
	width: 100px;
	height: 75px;
	padding: 0px 0px 5px 5px;
	margin: 0px;
}
a img {
	list-style-type: none;
	border: none;
	margin: 0px;
	padding: 0px;
}
ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}
#banner {
	height: 140px;
}
#nav {
	background-color: #333333;
	height: 30px;
	padding: 0px 0px 0px 2px;
	background-image:url(bar.jpg);
}
#bar_overlap {
	height: 30px;
	width: 250px;
}
#left {
	float: left;
	background-color: #111111;
	overflow-y: scroll;
	height: 323px;
	width: 349px;
	padding: 0px 0px 0px 2px;
}
#bottom_banner {
	clear: left;
	background-color: #111111;
	height: 120px;
}
div.hcb-shadow-tl {
	background:url(shadow-bg.jpg) top left;
}
div.hcb-shadow-tr {
	background:url(shadow-bg.jpg) top right;
}
div.hcb-shadow-bl {
	background:url(shadow-bg.jpg) bottom left;
}
div.hcb-shadow-br {
	background:url(shadow-bg.jpg) bottom right;
}
div.hcb-shadow-t {
	background: url(shadow-bg-t.jpg) repeat-x;
}
div.hcb-shadow-b {
	background: url(shadow-bg-t.jpg) repeat-x bottom;
	margin-bottom: 5px;
}
div.hcb-shadow-m {
	background: url(shadow-bg-r.jpg) repeat-y right;
	padding-right: 7px;
	clear:both;
}
div.hcb-shadow-r {
	background: url(shadow-bg-l.jpg) repeat-y left;
	display:block;
}
div.hcb-shadow-t, div.hcb-shadow-tr, div.hcb-shadow-b, div.hcb-shadow-br, div.hcb-shadow-tl, div.hcb-shadow-bl {
	background-color: #128911;
	height:7px;
}
div.hcb-shadow-tr, div.hcb-shadow-br, div.hcb-shadow-tl, div.hcb-shadow-bl {
	width:7px;
}
div.hcb-shadow-tr, div.hcb-shadow-br {
	float:right;
}
div.hcb-shadow-tl, div.hcb-shadow-bl {
	float:left;
}
br.hcb-shadow-clear {
	display:block;
	clear:both;
}
#HCB_comment_box {
	float: left;
	width: 415px;
	padding:17px;
	min-height: 323px;
	background-color: #128911;
}
#HCB_comment_box * {
	margin:0;
	padding:0;
	outline:0;
	border:0;
}
#HCB_comment_box textarea.commentbox {
	width:100%;
	display:block;
	border: 0;
	background-color: #ffffff;
}
#HCB_comment_box textarea, #HCB_comment_box input.text, #HCB_comment_box input.submit {
	border: 0px;
	background-color: #ffffff;
	padding-left:5px;
}
#HCB_comment_box div.hcb-wrapper {
	width: 70%;
}
#HCB_comment_box input.text {
	width: 70%;
}
/* the submit button */
#HCB_comment_box .submit {
	cursor:pointer;
	font-weight:bold;
	background-color:#128911;
	width:84px;
	height:25px;
	background-image:url(submit.jpg);
}
#HCB_comment_box span.home-desc {
	font-size:10px;
	opacity:0.4;
}
#HCB_comment_box blockquote {
	margin:0 !important;
	padding:20px;
	background:url(speech-bubble.jpg) no-repeat;
}
/* the individual comment display containers */
#HCB_comment_box div.comment {
	border-bottom:1px solid #ffffff;
	margin-bottom:5px;
}

Damn talk about being a good samaritan! I probably spelled that wrong but whatever. It’s actually my third redesign. I spent a few months researching CSS and HTML and just kept improving with each attempt. I’m going to give that a try tonight and I’ll let you know how it turned out…thanks a lot for recoding the CSS for me Mark! Talk to you soon.

Alex

Hey I gave your advice a try and it solves the problem with the comment box overlapping the bottom banner as the number of comments increases. I’m just trying to figure out what I can do about the green navigation bar expanding all the way across the screen… any advice on that?

Nevermind I’m a douche. I’m probably not doing it correctly…I’ll have to go through the code again and see what I missed. I’m in the middle of moving and I’m spending more on my site than on the move lol talk about prioritizing!