Why are there spaces (gaps) in my HTML output?

Hi,

I've pasted the code below. I think it may be the side effect of the
floats but I don't understand why gaps are appearing between the
rows. Any advice would be appreciated. Thanks/Don

<style>
..account_account_section_row:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .account_account_section_row { height: 1%; } /* for IE5+6 */
*:first-child+html .account_account_section_row { min-height: 1px; } /
* for IE7 */

..account_account_section_row_label_left {
padding-top: 0.75em;
padding-bottom: 0.75em;
padding-left: 1%;
padding-right: 1%;
width: 18%;
font-weight: bold;
color: #003366;
background-color: #bedbed;
float: left;
}

..account_account_section_row_data_left {
padding-top: 0.75em;
padding-bottom: 0.75em;
padding-left: 1%;
padding-right: 1%;
width: 28%;
text-align: left;
color: #3B6AA0;
background-color: #dbecf6;
float: left;
}

..account_account_section_row_label_right {
padding-top: 0.75em;
padding-bottom: 0.75em;
padding-left: 1%;
padding-right: 1%;
width: 18%;
font-weight: bold;
color: #003366;
background-color: #bedbed;
float: left;
}

..account_account_section_row_data_right {
padding-top: 0.75em;
padding-bottom: 0.75em;
padding-left: 1%;
padding-right: 1%;
width: 28%;
text-align: left;
color: #3B6AA0;
background-color: #dbecf6;
float: left;
}
</style>

<div id="account_account_section">
<div class="account_account_section_row">
<div class="account_account_section_row_label_left">Web site:</div>
<div class="account_account_section_row_data_left"><inp ut
type="text" name="txtWebsite" id="txtWebsite" size="35"
maxlength="255" value="www.test.com" /></div>
<div class="account_account_section_row_label_right">Te lephone:</
div>
<div class="account_account_section_row_data_right"><in put
type="text" name="txtPhone" id="txtPhone" size="25" maxlength="50"
value="555-555-5555" /></div>
</div>
<div class="account_account_section_row">
<div class="account_account_section_row_label_left">Str eet:</div>
<div class="account_account_section_row_data_left"><inp ut
type="text" name="txtStreet" id="txtStreet" size="35" maxlength="255"
value="123 Main Street" /></div>
<div class="account_account_section_row_label_right">Fa x:</div>
<div class="account_account_section_row_data_right"><in put
type="text" name="txtFax" id="txtFax" size="25" maxlength="50"
value="555-666-7777" /></div>
</div>
<div class="account_account_section_row">
<div class="account_account_section_row_label_left">Cit y:</div>
<div class="account_account_section_row_data_left"><inp ut
type="text" name="txtCity" id="txtCity" size="35" maxlength="50"
value="Never Never Land" /></div>
<div class="account_account_section_row_label_right">To ll free
phone:</div>
<div class="account_account_section_row_data_right"><in put
type="text" name="txtTollphone" id="txtTollphone" size="25"
maxlength="50" value="1-800-555-5555" /></div>
</div>
<div class="account_account_section_row">
<div class="account_account_section_row_label_left">Pro vince/State:</
div>
<div class="account_account_section_row_data_left"><inp ut
type="text" name="txtState" id="txtState" size="35" maxlength="50"
value="Somewhere" /></div>
<div class="account_account_section_row_label_right">To ll free fax:</
div>
<div class="account_account_section_row_data_right"><in put
type="text" name="txtTollfax" id="txtTollfax" size="25" maxlength="50"
value="1-800-666-7777" /></div>
</div>
<div class="account_account_section_row">
<div class="account_account_section_row_label_left">Pos tal Code/
Zip:</div>
<div class="account_account_section_row_data_left"><inp ut
type="text" name="txtPostalcode" id="txtPostalcode" size="10"
maxlength="10" value="123456" /></div>
<div class="account_account_section_row_label_right">&n bsp;</div>
<div class="account_account_section_row_data_right">&nb sp;</div>
</div>
<div class="account_account_section_row">
<div class="account_account_section_row_label_left">Cou ntry:</div>
<div class="account_account_section_row_data_left">Eart h in Sol</
div>
<div class="account_account_section_row_label_right">&n bsp;</div>
<div class="account_account_section_row_data_right">&nb sp;</div>
</div>
</div>

donpro wrote:

I've pasted the code below.

You should have posted a URL. You should have read the group or checked the
archives for a couple of weeks, so that you have learned why you should post
a URL.

I think it may be the side effect of the
floats but I don't understand why gaps are appearing between the
rows.

What rows? Which gaps?

Your markup looks messy and so does the appearance, if I bother creating a
document that contains it and view it on a browser. I have no idea what the
structure is supposed to be and what you are dissatisfied with in the visual
appearance, which is a mess as a whole.

Let me guess... someone told you not to use tables, and now you are in a
hole, digging deeper, trying to emulate tables?

--
Yucca, http://www.cs.tut.fi/~jkorpela/

donpro wrote:

Hi,

Hello

I've pasted the code below.

Why would you do that? Why not post a URL to a simplified example which
we can all easily test? In any case, you haven't pasted all the code,
either. And what you did post isn't completely valid.

I think it may be the side effect of the
floats but I don't understand why gaps are appearing between the
rows. Any advice would be appreciated. Thanks/Don

I see that you are not publishing for visitors with IE6, despite the
comments in the code.

Why are you using multiple nested divs when you seem to clearly have
tabular data? Does your problem go away when you use <table>?

If you're posting an example URL to the Interwebs, use example.com,
example.org, or example.net, as in ' value="www.example.com" '.

I did not see the gaps problem when viewing your code in my newsreader,
and you didn't say what browser you're seeing the problems in, nor what
doctype you're using, so we don't know if whatever browser you're
testing with is in quirks mode or not.

My advice: Fix the code so it validates, and if the problem still seems
to persist in one or more UAs, post here again with a URL and mention
the UAs exhibiting the problem.

HTH

--
John
Pondering the value of the UIP: http://improve-usenet.org/

On 2008-12-06, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:

Hi,

I've pasted the code below. I think it may be the side effect of the
floats but I don't understand why gaps are appearing between the
rows. Any advice would be appreciated. Thanks/Don

There aren't any gaps. Add

..account_account_section_row { border: thin solid red }

and you can see all the rows are right next to each other.

The reason "City" etc. clear the floats are because of your :after rule
which inserts a clearing div.