- Borders on an empty Div works in IE, not FF?

[Reese]

I'm trying to create a divider using only a div and a class. The visual
effect should be two horizontal lines. One would be 2px thick of one color,
the other only 1px of another.

Seems simple enough :

.stoneDiv, {
margin: 0px;
padding: 0px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #22170D;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #807368;
}

<div class="stoneDiv"></div>

This works on IE, but not on FF. Anyone have a clue why? FF acts like the
DIV isn't there.

[Reese]

Post by Reese
.stoneDiv, {

Nevermind, found the error. I guess commas don't function like semi-colons
in CSS, do they? (IE, they *will* screw up the code in FF if they're
included but not actually separating anything from anything.)

[Osgood]

Insert a non-breaking space into the <div>, as below.



<div class="stoneDiv">&nbsp;</div>

Post by Reese
I'm trying to create a divider using only a div and a class. The visual
effect should be two horizontal lines. One would be 2px thick of one color,
the other only 1px of another.
.stoneDiv, {
margin: 0px;
padding: 0px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #22170D;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #807368;
}
<div class="stoneDiv"></div>
This works on IE, but not on FF. Anyone have a clue why? FF acts like the
DIV isn't there.

[Reese]

That would separate the two lines. The whole thing should be 3 px high.

Post by Osgood
Insert a non-breaking space into the <div>, as below.
<div class="stoneDiv">&nbsp;</div>

[Osgood]

Post by Reese
That would separate the two lines. The whole thing should be 3 px high.

That wasn't actually the problem. Using font-size: 0; with a
non-breaking space inserted would get around that.

.stoneDiv {
border-top: 4px solid #CC6600;
border-bottom: 4px solid #FFCC66;
font-size: 0;
}

[Reese]

Except that neither FF or IE have any problem displaying a DIV with borders
but no contents. So why go through the trouble?

The extra comma was the problem preventing it from displaying in FF.

Post by Reese
That would separate the two lines. The whole thing should be 3 px high.

That wasn't actually the problem. Using font-size: 0; with a non-breaking
space inserted would get around that.
.stoneDiv {
border-top: 4px solid #CC6600;
border-bottom: 4px solid #FFCC66;
font-size: 0;
}

[Osgood]

Post by Reese
Except that neither FF or IE have any problem displaying a DIV with borders
but no contents. So why go through the trouble?

I was just answering your question on how to 'crush' the gap. You may
find that sometimes you need to use a nbsp; in some instances in an
empty <div> before it will take on the characteristics or instructions
that you require, obviously not in this instance as it WAS the comma
which was stopping the flow of the css.

Also margin: 0; padding: 0; on a div is not required as this is the
default setting.

[Reese]

Post by Reese
Except that neither FF or IE have any problem displaying a DIV with
borders but no contents. So why go through the trouble?

I was just answering your question on how to 'crush' the gap. You may find
that sometimes you need to use a nbsp; in some instances in an empty <div>
before it will take on the characteristics or instructions that you
require, obviously not in this instance as it WAS the comma which was
stopping the flow of the css.
Also margin: 0; padding: 0; on a div is not required as this is the
default setting.

Understood, but I added it here in case I ever (misguidedly) introduce
different settings to the global DIV tag itself. In this very specific
instance, the DIV must absolutely and without exception have padding and
margin 0. Also, Al Sparber put them in, which answers the question WWASD?
;-)

[Al Sparber- PVII]

Remove the "comma" from the selctor name (ommas are only used between
multiple selectors when you group them) and add a 3px height to account
for the border widths.

.stoneDiv {
margin: 0px;
padding: 0px;
border-top: 2px solid #22170D;
border-bottom: 1px solid #807368;
height: 3px;
}

[Reese]

Two questions :

1) More of an observation than a question really : the comma was the
problem. Removing it fixed things.

That said, once I applied the height attribute you recommended, it stopped
working -- because borders are ADDED to a container's size -- not included
within (which is a real bummer in 99% of situations I've come across). So
adding "height:3px" actually made the whole thing 6px tall (2px border + 3px
div height + 1px border).

Here's what worked :

.stoneDiv {
border-top: 2px solid #22170D;
border-bottom: 1px solid #807368;
}

or :

.stoneDiv {
border-top: 2px solid #22170D;
border-bottom: 1px solid #807368;
height:0px;
}

or even :

.stoneDiv {
border-top: 2px solid #22170D;
border-bottom: 1px solid #807368;
height:0px;
margin: 0px;
padding: 0px;
}

They all seem to behave the same way on all browsers. But the Div must be
0px tall for the top border and bottom border to touch, and create that
ridged effect.

2) Can I tell Dreamweaver to reformat my existing CSS file as shorthand, as
you did?

Post by Al Sparber- PVII
Remove the "comma" from the selctor name (ommas are only used between
multiple selectors when you group them) and add a 3px height to account
for the border widths.
.stoneDiv {
margin: 0px;
padding: 0px;
border-top: 2px solid #22170D;
border-bottom: 1px solid #807368;
height: 3px;
}
--
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

[Al Sparber- PVII]

Post by Reese
1) More of an observation than a question really : the comma was the
problem. Removing it fixed things.
That said, once I applied the height attribute you recommended, it
stopped working -- because borders are ADDED to a container's size --
not included within (which is a real bummer in 99% of situations I've
come across). So adding "height:3px" actually made the whole thing 6px
tall (2px border + 3px div height + 1px border).

Whatever works for you. When I saw a 2px border at top and a 1px at the
bottom, I assumed you wanted it to render that way. By collapsing the
DIV, the result would be a 3px contiguous border unless you had content
in the DIV :-) In other words, the solution I gave you would work if you
were using the construct to create a decorative double border.

This:
<div class="stoneDiv"></div>

As opposed to this:
<div class="stoneDiv">hello</div>

Perfect clarity helps in this newsgroup :-)

[Reese]

Post by Al Sparber- PVII
Perfect clarity helps in this newsgroup :-)

You would THINK so... and yet you missed the perfectly clear question I
posed at the end. :)

"Can I tell Dreamweaver to reformat my existing CSS file as shorthand?"

[Murray *ACE*]

No.
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

Post by Reese

Post by Al Sparber- PVII
Perfect clarity helps in this newsgroup :-)

You would THINK so... and yet you missed the perfectly clear question I
posed at the end. :)
"Can I tell Dreamweaver to reformat my existing CSS file as shorthand?"

[Al Sparber- PVII]

no ;-}

Post by Reese

Post by Al Sparber- PVII
Perfect clarity helps in this newsgroup :-)

You would THINK so... and yet you missed the perfectly clear question
I posed at the end. :)
"Can I tell Dreamweaver to reformat my existing CSS file as
shorthand?"

[Al Sparber- PVII]

And touche :-)

Post by Al Sparber- PVII
no ;-}

Post by Reese

Post by Al Sparber- PVII
Perfect clarity helps in this newsgroup :-)

You would THINK so... and yet you missed the perfectly clear question
I posed at the end. :)
"Can I tell Dreamweaver to reformat my existing CSS file as
shorthand?"

If you set your preferences to use shorthand "According to Settings
Above", then all you need to do is edit the properties that are in
longhand. Alternatively, you can grab a dedicated CSS editor like
TopStyle or StyleMaster, which have utilities to convert.

[: Nadia : ** Adobe Community Expert **]

Alternatively, you can grab a dedicated CSS editor like TopStyle or
StyleMaster, which have utilities to convert.

Going with TopStyle was going to be my suggestion :-)

--
Nadia

[Reese]

Thanks, guys. I'll look into that program later today..

": Nadia : ** Adobe Community Expert **"

Post by : Nadia : ** Adobe Community Expert **

Alternatively, you can grab a dedicated CSS editor like TopStyle or
StyleMaster, which have utilities to convert.

Going with TopStyle was going to be my suggestion :-)