Help with div borders in FF, please?

Donny Bahama · #1 Apr 10th, 2007, 06:07

I'm beginning to convert tables to multiple DIVs within a container div. It's going OK, except that when I put a border on the container div, IE renders it as expected, while Firefox does not. Can anyone tell me why? And how to fix it?

Here's a link to a page that demonstrates what I'm talking about: http://stickpuppy.com/tbl2div.php

In IE, I get a gray background and a 2px blue border. In FF, not only does the container div (and its gray background and blue border) not wrap around the divs it contains, but the following paragraph isn't even displayed in block mode!

Also, if I'm going about this all wrong in general, please let me know. I've read and read and read about CSS-P but I just can't seem to wrap my brain around it.

With all the CSS code I'm writing for cell divs, row divs and container divs, I'm really starting to wonder why I'm bothering. Table code is not only easier, it seems to me it's more efficient, too.

karinne · #2 Apr 10th, 2007, 12:42

If this

Code: Select all

<div id="t2d_table">
            <div class="row">
                <div class="cell1">R1C1</div>
                <div class="cell1">R1C2</div>
                <div class="cell1">R1C3</div>
                <div class="cell1">R1C4</div>
            </div>
            <div class="row">
                <div class="cell2">R2C1</div>
                <div class="cell2">R2C2</div>
                <div class="cell2">R2C3</div>
            </div>
            <div class="row">
                <div class="cell1">R3C1</div>
                <div class="cell1">R3C2</div>
                <div class="cell1">R3C3</div>
                <div class="cell1">R3C4</div>
            </div>
        </div>

is going to be filled with data ... then use the TABLE element!

masonbarge · #3 Apr 10th, 2007, 12:58

Code: Select all

<div id="t2d_table"> <div class="row">
    <div class="cell1">R1C1</div>
    <div class="cell1">R1C2</div>
    <div class="cell1">R1C3</div>
    <div class="cell1">R1C4</div>
</div>
<div class="row">
<div class="cell2">R2C1</div>
<div class="cell2">R2C2</div>
<div class="cell2">R2C3</div>
</div>
</div>

Try this.
in your css:

Code: Select all

.clear { clear: both; }

Then:

Code: Select all

<div id="t2d_table"> <div class="row">
    <div class="cell1">R1C1</div>
    <div class="cell1">R1C2</div>
    <div class="cell1">R1C3</div>
    <div class="cell1">R1C4</div>
</div>
<div class="row">
<div class="cell2">R2C1</div>
<div class="cell2">R2C2</div>
<div class="cell2">R2C3</div>
</div>
<div class="clear"></div>
</div>

If this isn't right, move the clearing div around a bit.

Ryan Fait · #4 Apr 10th, 2007, 13:44

I agree with Karinne. Tables are for tabular data, not layouts. Your mess of <div>'s should indeed be a table.

Donny Bahama · #5 Apr 10th, 2007, 16:07

Quote:

Originally Posted by karinne

If this
is going to be filled with data ... then use the TABLE element!

It's not. I just did that as a sample. It's going to be filled with elements of a form - and using table markup, it's a piece of cake, but trying to switch to divs (again, I'm asking myself, "WHY?!?!") is making me crazy. :crazy:

I have no problem using absolutely positioned DIVs (as seen here: http://dhs57.com ) nor in using 2 or 3 column layouts, but I wish I could find a good tutorial on stacking divs into rows and stacking rows of divs into tables. (Either that or a really good argument on why not to bother doing so, but rather to just stick with tables! :annoyed: )

karinne · #6 Apr 10th, 2007, 16:12

Use tables if you want for forms ... or <dt> and <dd> I've seen that used a few times too.

http://www.themaninblue.com/experiment/InForm/index.htm

pa007 · #7 Apr 10th, 2007, 16:24

I personally think that is a ridiculous use of defintion lists. I know the html spec is pretty vague on the use of definition lists but that's pushing it a bit for me. It makes no sense. People seem to use defintion lists for whatever they want which simply strips them of meaning. I've seen dl's used in e-stores to list the products - it's a list sure but why not use ul's.

I'd just use the form tag on it's own and then style it in the css, I don't see why you want to put it in seperate divs at all. Could you elaborate a bit please on exactly what you want to do with the form elements.

Pete.

Donny Bahama · #8 Apr 10th, 2007, 17:41

Quote:

Originally Posted by masonbarge

Try this.
in your css:

Code: Select all

.clear { clear: both; }

Then:

Code: Select all

<div id="t2d_table"> <div class="row">
    <div class="cell1">R1C1</div>
    <div class="cell1">R1C2</div>
    <div class="cell1">R1C3</div>
    <div class="cell1">R1C4</div>
</div>
<div class="row">
<div class="cell2">R2C1</div>
<div class="cell2">R2C2</div>
<div class="cell2">R2C3</div>
</div>
<div class="clear"></div>
</div>

Worked beautifully. Thanks, Mason!

Donny Bahama · #9 Apr 10th, 2007, 18:04

Quote:

Originally Posted by pa007

I'd just use the form tag on it's own and then style it in the css, I don't see why you want to put it in seperate divs at all.

Maybe I'm looking at this all wrong, but how would you position the individual elements (assuming you didn't want a basic columnar layout)?

Quote:

Could you elaborate a bit please on exactly what you want to do with the form elements.

Happy to. Thanks for asking.

The form is part of a basic message board. (See attachments for clarification) It's for a group of seniors, the majority of whom are very non-tech-savvy. If they are logged in, the "post message" form is shown at the top of the page. By default, the form only has 3 elements and a submit button. (5 elements if you count the 2 labels.) But if they want to use smilies or (bold or italic) text formatting, there's a "hints" box that shows them how to do that. A link at the top toggles whether the hints are visible (they are hidden by default), so right off the bat, that needed a container div so I could toggle the display property.

For what it's worth, thanks to Mason's suggestion, the whole thing now works. The screenshots you see are post-revision and use divs rather than table markup (but it was painful!)

pa007 · #10 Apr 10th, 2007, 18:20

There are a few ways you could go about styling forms. I will give an example. If I were doing a simple contact form which when submitted would send an email with the contents in. By the way this form wouldn't actually work (just for the record).

Here is the html:

Code: Select all

<form id="contact-form">
<p> 
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">E-mail</label><br />
<input type="text" name="email" id="email" /><br />
<label for="message">Message:</label><br />
<textarea name="message"></textarea><br />
<input type="submit" value="Send Message" name="submite" id="submit" />
</p>
</form>

Using the id's you can pinpoint which elements you want to format.

Here is the CSS:

Code: Select all

form#contact-form input#name, form#contact-form input#email, form#contact-form textarea {
    width: 400px;
    padding: 0.2em;
    border: 1px solid #a2b8ce;
    margin: 0 0 10px 0;
}

form#contact-form textarea {
    height: 150px;
}

form#contact-form input#submit {
    width: 10em;
    
}

No need for extra divs or anything, strictly speaking you don'e even need all of the ids. But that is a simple way to style forms and only results in a little extra markup.

You can make use of lots of css trickery to style forms and you only need a little bit of extra markup.

Pete.

karinne · #11 Apr 10th, 2007, 18:22

You can also have a look in the Beginners Resources section, there's a thread - [CSS] Customize your form with CSS - that could help you out on this as well.

Donny Bahama · #12 Apr 10th, 2007, 20:05

Wow! I replaced all those divs with <label> tags and used <button> to use an image for my submit button (instead of a borderless, transparent button over a background speech bubble image) and I'm shocked at how well it came out (and how much less code!)

I've always avoided those tags, though, due to uncertainty over support in older and non-mainstream browsers... can anyone comment on that?

Thanks, Pete and Karinne!

pa007 · #13 Apr 10th, 2007, 20:09

The label tags are great for accessibility too, so I'd say use them all the time. Rather than the button element, I'd use the input type="submit" and set a background image for it. But you should try to avoid styling forms too heavily as they need to be recognisable to the user.

Pete.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Div borders & different browsers	djeyewater	Web Page Design	0	Jan 6th, 2008 23:17
Translucent Borders?	jjpeacha	Web Page Design	10	Apr 29th, 2007 20:27
Tables and 1px borders?	Perad	Web Page Design	3	Dec 9th, 2006 19:34
borders	benbacardi	Web Page Design	2	Jun 4th, 2004 15:39

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Help with div borders in FF, please?