Topic: BR or HR or Div with class or Other? (Page 1 of 1)

I have a series of divs that stack up nicely, and they all share the same vertical repeating background which creates a left embozed look. Very cool. Now I want to throw in a break between these divs to give seperation, creating little islands. What do you suggest as a break element? I've come up with the following options:

BR element (but box model doesn't seem to work like i'd expect)
HR element,
DIV element

I run into problems with the DIV element because the parent DIV element has already been defined accordingly, infact the parent DIV element is the one defined with the backround repeating image, so there is a conflict here.

Any ideas? Need to see an example?
Karl..

Another problem with DIV, I can't get make the height of the DIV much smaller than 20PX.

use a top or bottom margin

I'm sure I've tried this, using a top and a bottom margin.
Here is what I have so far:
http://arizonasunrays.com/_default.asp

In this example, I am using a DIV tag, class="break" to create the effect of a break. Here is the class for this:

#COL_LEFT div.break {margin:0; border:0; padding:0; height:5px; background-image: url(../images2/left-spacer.gif);}

Here is a photoshop rendered example of the problem and the fix
www.arizonasunrays.com/problem_03.jpg

(Edited by Karl on 01-08-2006 23:15)

Looks like the top margin of the ul element could be causing the gap.

As far as the div not being smaller than 20px, have you tried setting either the font-size or line height to 1px?

Ram

Of course, using the <div> to add space is again using your mark-up to make stylistic changes. Margins should be all you need to make this work the way you want.

Will need to see an example - the link you posted above doesn't work.

Sorry, here it is (corrected)
http://www.arizonasunrays.com/_default.aspx

the style is borken in OP9tp1, FF1.5 and in IE6 it looks kinda like http://www.arizonasunrays.com/problem_03.jpg
Please, please, please, don't tell me you are trying to design an (x)HTML+CSS website using IE. Even if the target audience use massively IE ( gargl ), you should always design using a standard compliant browser then introduce a few workaround to fix some of the rendering bugs of the other browser. What will happen when all of the sudden, around 2023, IE 9 will respect the standards ? you'll have to rewrite completly your CSS instead of simply removing a few workarounds.

~sneaks from around the corner to say~ I am. I didn't figure things would be so broke though. For the most part, I have kept the layout simple.

Karl..

Use Firefox, if only for the web developer toolbar:
http://chrispederick.com/work/webdeveloper/

Using the outline features, disable javascript/css, edit css, etc, makes figuring out what your CSS is doing so much easier.

Not to mention that it (usuallly) renders properly.

Cheers,
Derek

Internet Explorer now has it's own Web Developer toolbar, it's basically the same as the FF one, but has few more features, it's still better to work in FF or Opera as they render sites correctly more often than IE does, but the toolbar will make development much easier with IE.

Cheers,