cant get css right

[Kalisto]

I have some css

.Section {border-bottom:thin solid;font-size:smaller;font-weight:bold;font-family:verdana;}

.SectionNumber {width:3%;float:left;text-align:right;border-right:2px solid;border-bottom:1px solid;}
.SectionPadding {border-right:2px solid;width:1%;float:left}
.SectionTitle {padding-left:40px;border-bottom:1px solid;}
.sectionInformation {padding-left:10px;border-bottom:thin solid;font-family:verdana;font-weight:normal;}
.sectionRow {border-bottom:thin solid;font-family:verdana;font-weight:normal;}

and am applying it to the following html fragment

<div class="section">
		<div class="sectionNumber">2.</div>
		<div class="SectionTitle">Whose products do we offer?</div>

	
	<div class="SectionRow">
		<div class="SectionNumber"><input type="checkbox"/></div>

		<div class="SectionText">We offer products from a range of insurers.</div>
	</div>


	<div class="SectionRow">
		<div class="SectionNumber"><input type="checkbox"/><br/>&nbsp;</div>

		<div class="SectionText">We only offer from a limited number of insurers for Payment Protection and Extended Warranty.
 Ask us for a list of insurers we offer insurance from.</div>
	</div>

	<div class="SectionRow">
		<div class="SectionNumber"><input type="checkbox"/></div>
		<span class="SectionText">We only offer products from a single insurer for Guaranteed Asset Protection.</span>
	</div>

But when it renders, rather than all the rows appearing as though they are in a tabular layout, i.e. all under each other, with the margins set right, they are all staggered.

It looks as though due to the border on the right hand side of the section number cell extending further than I expect (or can understand), that this is distorting the next row, which further distorts the next and so on.

Can anyone shed any light on this as its driving me nuts, and Im spending my own time trying to refactor this site so it no longer uses tabular layouts.

Cheers

K

 

[Ascalonian]

What browser are you viewing this on?

 

[Kalisto]

Firefox

 

[vacunita]

You are extremely inconsistent with your class names and usage.

Some of your classes start with a capital S, but their usage in your layout has a lowercase S.
CSS is case sensitive, so some of your classes aren't getting applied. Try fixing that first.

Additionally, you never clear the float applied to your SectionNumber. So it continues to affect the rest of the divs. Try adding a clear:both; to your Section Row.

furthermore, perhaps an unordered list may be more semantically correct for what you are doing.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Kalisto]

Thanks I'll try to sort those bits out, and see what happens next..
K

 

[ChrisHunt]

That all seems very complicated. What are you actually trying to achieve?

It looks like you're trying to get your text to appear as if it's in a table, complete with grid lines, without using any table markup. If that's really what you want, just use a <table>! I see no benefit in swapping <table>, <tr> and <td> elements one-for-one with <div class="whatever"> elements and writing a shed-load of CSS to make it probably work in most browsers.

However, it also seems to me that all those gridlines will just make the whole thing look ugly and more difficult to read. Get rid of them and you can markup the whole thing more sensibly:

<div class="section">
<h2>2. Whose products do we offer?</h2>
<ul>
  <li>We offer products from a range of insurers.</li>
  <li>We only offer from a limited number of insurers for Payment Protection and Extended Warranty.
  Ask us for a list of insurers we offer insurance from.</li>
  <li>We only offer products from a single insurer for Guaranteed Asset Protection.</li>
</ul>
</div>

Unstyled, that seems more appropriate to your content that a {pseudo} table does. You can add styling to change the <ul>'s default bullet point to one that looks like a checkbox. Actually, with clever use of background images you could put the grid lines in, but are you sure you need them?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Kalisto]

Unfortunately, thats how it has to look (The grid lines and all...)

As for the removing the table layout, thats just an intellectual exercise for me to get a handle on css, and maybe tidy up the site (theres an awful lot of table useage on the site for layout)

K