Page layout question

[r1formetoo]

Gary, I believe I only have one issue left to fix to my new zencart site before customers can use it and I've not found anyone who knows how to fix this issue. Please check the page below and notice how my attributes display down and to the right instead of just to the right. Might you know why it's doing this?

Ian
http://www.redlinestands.com/catalog...dirt-bike-lift

[gjh42]

If you add a clear: left; to the attribute wrapper, they will keep to their own lines:

.wrapperAttribsOptions
{ margin:0.3em 0; clear: left; }

It seems you have done some tweaking in that file, because there should be <h3> elements with a class tag of optionName, but all I see is text with a class of "optionname (extraneous quote), which cannot be used in the stylesheet.

[r1formetoo]

If you add a clear: left; to the attribute wrapper, they will keep to their own lines:

.wrapperAttribsOptions
{ margin:0.3em 0; clear: left; }

It seems you have done some tweaking in that file, because there should be <h3> elements with a class tag of optionName, but all I see is text with a class of "optionname (extraneous quote), which cannot be used in the stylesheet.

Well, I added the clear you spoke of but it didn't really do what I wanted it to do. It then made them display down the page instead of displaying across the page. I would rather they not display down the page because that makes the page taller than it needs to be. Any idea how I'll get them to display across the page?

Ian

[gjh42]

There are a few things that are giving your attributes layout problems. From view source:

<!--bof Attributes Module -->
<div style="float:left">
<div id="productAttributes">
<h3 id="attribsOptionsText"> </h3>


<div class="wrapperAttribsOptions">
<class="optionName back">Color<br />
<div class="back">

<input type="radio" name="id[1]" value="29" checked="checked" id="attrib-1-29" /><label class="attribsRadioButton zero" for="attrib-1-29">Black</label><br />
<input type="radio" name="id[1]" value="16" id="attrib-1-16" /><label class="attribsRadioButton zero" for="attrib-1-16">Red</label><br />

</div>
<br class="clearBoth" />
</div>





<br class="clearBoth" />

<div class="wrapperAttribsOptions">
<class="optionName back"><label class="attribsSelect" for="attrib-2">Size</label><br />

<div class="back">
<select name="id[2]" id="attrib-2">
  <option value="20">Large</option>
  <option value="18">Medium</option>
  <option value="37" selected="selected">Select from below ...</option>
</select>

</div>
<br class="clearBoth" />
</div>




<br class="clearBoth" />

<div class="wrapperAttribsOptions">
<class="optionName back">Add TK3000 Mounting Kit<br />
<div class="back">
<input type="radio" name="id[14]" value="38" id="attrib-14-38" /><label class="attribsRadioButton zero" for="attrib-14-38">none</label><br />
<input type="radio" name="id[14]" value="39" checked="checked" id="attrib-14-39" /><label class="attribsRadioButton zero" for="attrib-14-39">Please Select</label><br />
<input type="radio" name="id[14]" value="40" id="attrib-14-40" /><label class="attribsRadioButton zero" for="attrib-14-40">TK3000</label><br />

</div>
<br class="clearBoth" />
</div>

<br class="clearBoth" />

</div></div>
<!--eof Attributes Module -->

You have
<class="optionName back">
which is not a valid HTML tag - class is not an HTML element. It should be
<h4 class="optionName back"> </h4>
You can always change the styling here if you don't like the default h4 style.

<h4 class="optionName back">Color</h4>

<h4 class="optionName back"><label class="attribsSelect" for="attrib-2">Size</label></h4>

<h4 class="optionName back">Add TK3000 Mounting Kit</h4>


The cause of your attributes going down and right is the
<br class="clearBoth" />
that are all over here. Change them to plain <br /> tags.

Get rid of the clear: left; as it is not what you want to do here.

[r1formetoo]

There are a few things that are giving your attributes layout problems. From view source:

<!--bof Attributes Module -->
<div style="float:left">
<div id="productAttributes">
<h3 id="attribsOptionsText"> </h3>


<div class="wrapperAttribsOptions">
<class="optionName back">Color<br />
<div class="back">

<input type="radio" name="id[1]" value="29" checked="checked" id="attrib-1-29" /><label class="attribsRadioButton zero" for="attrib-1-29">Black</label><br />
<input type="radio" name="id[1]" value="16" id="attrib-1-16" /><label class="attribsRadioButton zero" for="attrib-1-16">Red</label><br />

</div>
<br class="clearBoth" />
</div>





<br class="clearBoth" />

<div class="wrapperAttribsOptions">
<class="optionName back"><label class="attribsSelect" for="attrib-2">Size</label><br />

<div class="back">
<select name="id[2]" id="attrib-2">
  <option value="20">Large</option>
  <option value="18">Medium</option>
  <option value="37" selected="selected">Select from below ...</option>
</select>

</div>
<br class="clearBoth" />
</div>




<br class="clearBoth" />

<div class="wrapperAttribsOptions">
<class="optionName back">Add TK3000 Mounting Kit<br />
<div class="back">
<input type="radio" name="id[14]" value="38" id="attrib-14-38" /><label class="attribsRadioButton zero" for="attrib-14-38">none</label><br />
<input type="radio" name="id[14]" value="39" checked="checked" id="attrib-14-39" /><label class="attribsRadioButton zero" for="attrib-14-39">Please Select</label><br />
<input type="radio" name="id[14]" value="40" id="attrib-14-40" /><label class="attribsRadioButton zero" for="attrib-14-40">TK3000</label><br />

</div>
<br class="clearBoth" />
</div>

<br class="clearBoth" />

</div></div>
<!--eof Attributes Module -->

You have
<class="optionName back">
which is not a valid HTML tag - class is not an HTML element. It should be
<h4 class="optionName back"> </h4>
You can always change the styling here if you don't like the default h4 style.

<h4 class="optionName back">Color</h4>

<h4 class="optionName back"><label class="attribsSelect" for="attrib-2">Size</label></h4>

<h4 class="optionName back">Add TK3000 Mounting Kit</h4>


The cause of your attributes going down and right is the
<br class="clearBoth" />
that are all over here. Change them to plain <br /> tags.

Get rid of the clear: left; as it is not what you want to do here.

Wow, I'm a bit confused now. It seems like you're telling me to edit just the source code for this one page but that can't be right because that wouldn't solve the problem when I wanted multiple attributes for all the other pages, not to mention I don't know how to edit the code for just one page. I checked my style sheet and I don't have any <br class="clearBoth" /> to remove in the entire thing. I tried removing the clear left from the statement

.wrapperAttribsOptions
{ margin:0.3em 0; clear: left; }

in my stylesheet but that again made the attributes display down the page instead of across it. I suppose my ultimate problem here is that I don't know what to do with the advice you're giving me. I'm just not that advanced yet.

Ian

[gjh42]

You have apparently made some edits in
/includes/templates/your_template/templates/tpl_modules_attributes.php, which have removed the h4 that should be there, leaving <class="optionName back"> . You need to restore that, and delete some <br class="clearBoth" /> that are in that file.