Vote

Title Bigger, Cell Is Changing

Posted by topdog 776 days ago Questions| html indexnl html indexnl All
Hey,

First: Sorry for my bad english (if so), but I'm from Holland.

I'm really getting desperate right now. Probably it's just a simple thing, but I can't find it. glare.gif
I'm working on a website for a customer. This is how it looks like now:



The black bar under the title DV-11 shouldn't be there. That bar shows up if the title gets big as it is now. It is 36 px high and it is
a H1 heading defined in CSS. Even if I change it to a paragraph text with the class as it is now, it does the same thing.

Oke Oke. Maybe I'm a bit unclear right now, so here is the HTML code + CSS so you guys can take a look at it.
I can't place the website online, as it is a website which still needs to get online (and it's not finished yet, as you can see):

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HGL003 Davin Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../../css/main.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" bgcolor="#000000" marginheight="0" marginwidth="0">

<table id="Table_01" width="1150" align="center" border="0" cellpadding="0" cellspacing="0" height="811">
<tr>
<td rowspan="8" width="115" height="780"> </td>
<td colspan="2" height="30" bgcolor="#000000" >
<a href="../../indexNL.html" class="menulanguage">NL</a>
<a href="../../indexNL.html" class="menulanguage">UK</a>
<a href="../../indexNL.html" class="menulanguage">DU</a>
<a href="../../indexNL.html" class="menulanguage">ES</a>
<a href="../../indexNL.html" class="menulanguage">HU</a></td>
<td colspan="2" rowspan="2" background="../../images/top_tree.png" height="70"> </td>
<td rowspan="8" width="135" background="../../images/tree.png" height="780"> </td>
</tr>

<tr>
<td colspan="2" height="40" background="../../images/menu_bar.png">
<a href="../../indexNL.html" class="menu">HOME</a>
<a href="../../indexNL.html" class="menu">PRODUCTS</a>
<a href="../../indexNL.html" class="menu">DOWNLOADS</a>
<a href="../../indexNL.html" class="menu">UPCOMING</a>
<a href="../../indexNL.html" class="menu">DEALERS</a>
<a href="../../indexNL.html" class="menu">CONTACT</a></td>
</tr>

<tr>
<td colspan="4" height="195"><img src="../../images/banner_header.png" width="900" height="195" border="0"></td>
</tr>

<tr>
<td width="460" background="../../images/banner_logo.png" height="70"> </td>
<td width="79" background="../../images/grey_bar.png" height="70" style="background-repeat:repeat-x"> </td>
<td width="130" background="../../images/upcoming.png" height="70"> </td>
<td width="230" background="../../images/upcoming_schedule.png" height="70" valign="top"> </td>
</tr>

<tr>
<td height="61" colspan="2" align="left" valign="top" background="images/titel_product.png"><p class="product">DV-11</p></td>
<td height="61" colspan="2" valign="top" background="images/bg_img_product.png"></td>
</tr>

<tr>
<td height="325" colspan="2" valign="top" background="images/bg_description.png"><p class="description">The DV-11 is a fan controller that will help you to easily determine the speed of an engine. </p></td>
<td height="325" colspan="2" valign="top" background="images/bg_img_product.png"><img src="products/details_DV-11.jpg" width="320" height="240" border="0" class="product"></td>
</tr>

<tr>
<td colspan="2" height="55" background="images/items.png"> </td>
<td colspan="2" height="55" background="images/browse.png"> </td>
</tr>

<tr>
<td colspan="4" height="35" align="center" background="../../images/footer.png"> </td>
</tr>

</table>
</body>
</html>


And the CSS:

CODE

@charset "utf-8";
/* CSS Document */

td {
background-repeat:no-repeat;
}

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#FFF;
}

#productlist{
overflow-y:scroll;
overflow-x: none;
height: 350;
width: 360;
scrollbar-3dlight-color:#555;
scrollbar-arrow-color:#000;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#333;
scrollbar-face-color:#444;
scrollbar-highlight-color:#888;
scrollbar-shadow-color:#333;
scrollbar-track-color: #666;
}


.productlist {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:20px 0px 0px 150px;
color:#444;
}

a.productlist:link, a.productlist:visited,a.productlist:active{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#444;
text-decoration:none;
}

a.productlist:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
text-decoration:none;
}

.browse {
background-image:url(images/DV-11_details_09.png);
background-repeat:repeat-x;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #999;
width: 150px;
}

a.menulanguage:link, menulanguage:visited, menulanguage:active {
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color:#999;
text-decoration:none;
}

a.menulanguage:hover{
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
color:#FFF;
text-decoration:none;
}

a.menu:link, menu:visited, menu:active {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#999;
text-decoration:none;
margin: 0px 0px 0px 20px;
}

a.menu:hover{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFF;
text-decoration:none;
margin: 0px 0px 0px 20px;
}

/*Product details*/

p.product {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#FFF;
}

p.description {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#444;
padding-left:20px;
}

img.product {
display:block;
margin: 20px 0px 0px 20px;
border:solid 1px #333;
}


Please don't pay attention to the scripting. Wether it is clean or not or search-friendly or not, I don't care for now. I want it to work.
I hope you guys can help me out with this one. If anything is still unclear, please ask!
Discuss Bury


Who Voted for this Question