CSS and HR Tag Spacing, what am I missing?

HCL Domino Domino Forum
1

I am trying to create a simple line to separate items. I do not want the extra spacing that the HR tag adds above and below the line. I have searched and am not able to find a solution. I do not want to use an image for various reasons.

I would like my lines to close as seen in this link:

http://www.w3.org/TR/REC-html40/present/graphics.html#edef-HR

I am not sure if they cut and paste the images to be closer or what, but if I cut and page the html in to notepad and then open the file in IE I get something 2-3 time larger then their image. What am I missing???

2

Subject: CSS and HR Tag Spacing, what am I missing?

Explicitly set the display to block, then margin, padding and text-align should handle everything else:

HR {

display: block;

margin: 2px 0 2px 0;

padding: 0;

text-align: center;

}

3

Subject: RE: CSS and HR Tag Spacing, what am I missing?

Thanks for the response, but I did not see any change in the spacing using a couple of different variables. Here is my code

hr class=“ns” color=“#660099” size=“1” width=98% is marked as pass thru HTML

HR.ns {

display: block;

margin: 0;

padding: 0;

text-align: center;

}

is my CSS class

Am I confusing two different things?

4

Subject: RE: CSS and HR Tag Spacing, what am I missing?

No – I get a zero-space

(no margin above or below other than what attaches to the surrounding elements) when I use your code, and adjusting the margin value increases the space above and below as expected.

5

Subject: RE: CSS and HR Tag Spacing, what am I missing?

I am totally confused now. I put the following into notepad and see no difference between either the HR tag with the ns class and those without. Where should I start looking or what is the thought process?

In my doc, I have removed the HR tags and the images show close to each other, so I know that I am not getting any spaceing or padding from other objects. It seems that the class is not being applied in notes or notepad. Do I have my syntax wrong?

test HR.ns { display: block; margin: 0; padding: 0; text-align: center;}

Also, just to verify, I just want the HR to be almost touching the images, say a few pixels for “white space”, so basically I want the row height to be the size of the HR plus a pixel or so. This is possible Right?

6

Subject: RE: CSS and HR Tag Spacing, what am I missing?

If you need to squeeze them tighter, you can set the top and/or bottom margins to negative values (try -0.8em).

7

Subject: RE: CSS and HR Tag Spacing, what am I missing?

Thanks for the help, Stan, I ended up using images against my better judgement with the display: block css attributes and am able to live with the results.

Thanks again.