3 replies [Last post]
gabew84
Offline
newbie
Last seen: 12 years 37 weeks ago
Joined: 2008-11-14
Posts: 2
Points: 0

Hello Everyone,

This is my first time ever posting on a forum ever!

I'm having trouble viewing the code consistently across browsers. You'll notice, if the pasted code below is viewable, that there is an awkward space in the left-hand panel below the gray area with the two small images in it (It's a small brown space in IE and a large one in Firefox). The gray should touch the black bar that has the "back" and "next" buttons. I've made sure that the images, even though they won't load, have a defined dimension. I've been testing in Firefox, IE, and Chrome. Any suggestions at all would be tremendous.

Thank you very much in advance,

Gabe

Here's the code:

<style type="text/css">
.scent_title
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	font-size: 20px;
	line-height: 15px;
}
.scent_subtitle
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #ffffff;
	font-size: 13px;
	line-height: 10px;
}
 
.scent_info
{
	width: 368px;
	height:361px;
	padding: 15px;
	float: left;
	clear: right;
}
.scent_info P
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	margin-top: 15px;
}
.scent_info P BR
{
	line-height: 10px;
}
.scent_controls
{
	width: 825px;
	height: 25px;
	clear: both;
	background-color: #999b9e;
}
.scent_image
{
	padding-right: 10px;
	padding-bottom: 10px;
}
 
.wholesale_container {
    background-color: rgb(159, 134, 94);
}
 
.wholesale_scent_info {
 
    width: 375px;
	height:500;
	padding: 15px;
	float: left;
	clear: right;
	}
 
 
.wholesale_icon_container {
    margin:0px;
    padding-top:10px;
	padding-left:20px;
	padding-bottom:0px;
}
.wholesale_scent_controls
{
	width: auto;
	height: 25px;
	clear: both;
	background-color: #000000;
	text-align: center;
}
</style>
 
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--HEADER-->
<img src="#" width="876" height="156">
 
 
<!--IMAGE AND INFO BLOCK-->
 
<div class="wholesale_container" style="background-color: rgb(159, 134, 94);">
 
<div style="float: left; clear: left; background-color:#979b9e; height:auto;">
  <img src="#" width="455" height="343">
  <p class="wholesale_icon_container">
<span class="scent_subtitle">AVAILABLE AS: (Click to Purchase)</span><br /><br />
<a href="#">
<img src="#" width="65" height="105" border="0"/></a>
<a href="#">
<img src="#" width="41" height="105" border="0"/></a></p>
</div> 
 
<!--SCENT INFO CONTAINER-->
<p class="wholesale_scent_info">
 
<span class="scent_title">BLAH</span><br><br>
  <span style="color:#FFFFFF;">blah blah blah<BR>
  blah blah<BR>
  blah blah<br><br>
  blah blah blah blah blah blah</span></p>
 
 
 
<!--NEXT AND LAST BUTTONS-->
<div class="wholesale_scent_controls">
<a href="#"><img alt="Back" src="http://ronrobinson.com/v/wholesale/images/previous_button.jpg" width="57" border="0" height="25"></a><a href="#"><img alt="Next" src="http://ronrobinson.com/v/wholesale/images/next_button.jpg" width="57" border="0" height="25"></a></div>
</div>
 
<!--END IMAGE AND INFO BLOCK-->
</td></tr></table>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 46 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Errors

I noticed lots of errors in the code. It did not validate, lots of nesting errors and such. Work out the errors, get validated then come back.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 29 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Welcome to the forum

Welcome to the forum Gabe,

A couple of points that will help us; if no link is available try and post your code as a complete document i.e a dtd, head element containing the styles as embedded rulesets in style tags then the body markup, that way it's a simple matter for most of us to copy the code in it's entirety and paste it into our editor. try to reference elements by their element name or ID/class it's easier for us to understand which elements we are talking about.

I don't notice any specific control of margins and reference to things not touching would make me think that this could be the issue, so you could try and zero marigns on those elements that are giving problems, but equally I could be wide of the mark, but havn't time at the moment to replicate the code in an editor. Collapsing margins could also be an issue , this is where element sitting to the top or bottom of a parent have the effect of pushing through their parents boundary with their own margins thus appearing to push the parent away from the element above or below, searching the forum will throw up posts on this subject.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gabew84
Offline
newbie
Last seen: 12 years 37 weeks ago
Joined: 2008-11-14
Posts: 2
Points: 0

Thanks

Thank you for taking a look. I'm sorry for not being as thorough with validation. This is what I get for being a graphic designer trying to do client-side development.

There's a slight problem with validation:

We're using an e-commerce CMS that has about 6 zillion errors in the validator. It's completely non-standards based and structured almost entirely from tables. It's a mess. It even uses transparent spacer gifs instead of css. Plus, the "skin" "template" whatever is made out of tables! It think the tables ruin it because I'm tryig to nest more standard code into a table. I dunno. I'll work on this and then re-post my code. Thanks again!