Div around contact form

Before continuing with my next post, I would be grateful if you would teach me something.

I noticed that in January you added {display: compact;} to #down. I’ve never seen {display:compact} used before. What does it do and why did you choose to add it? How does it improve your page? Is it widely supported in most or all browsers?

Thank you

It does nothing, has always done nothing and has never been implemented by a browser (afaik). It was part of CSS2 but was removed in CSS2.1. Currently no browser has support for it. :smile:

i do not remember why exactly i did it ( can you show me when i change it) but if i removed it the down div disappear and i do not have that on my others pages if someone told me to do that in the form can you refresh my memory?

thanks galia

Thanks very much, Paul. (I was hoping you would read between the lines of my question and pitch in. )

Yes, Galia.

On Jan 12, in post #418, your code does NOT contain #down {display:compact}.

Your next code came on Jan 19 in post #441 and has #down {display:compact}.

ron i am still do not know exactly why but i have some options maybe the down div and apdiv 8 were in a problem at the time from the frame around the form pushing down

and by the way about post #508 i over it later and tell you what i am thinking
about it if i understand

thanks galia

more or less can you give me an examples of the two explanations (an image)?

thank you galia

1 Like

What part of one explanation do you not understand or follow? I would prefer to explain in small steps if you don’t mind.

Galia, Do you understand:
(1) When one might use a normal “soft space” that permit normal line breaks and allow sentences to wrap between words at ends of lines.
(2) When one might use a <br> break tag to force a line break.
(3) When one might use &nbsp;, a non-breaking space, to force word pairing.

The non-breaking space was a problem for you. Has that been cleared up or are you still unsure about the value of the non-breaking space?

are you using the div or the surroundedqZTGu
;||>
pl \bt,mdqqqqqt

What’s a “surroundedqZTGu
;||>
pl \bt,mdqqqqqt” ?

1 Like

Hi ron!

about

(1) When one might use a normal “soft space” that permit normal line breaks and allow sentences to wrap between words at ends of lines.

i am not sure i understand that is it what i did without that code &nbsp; can you give me an example how it is look?

about

(2) When one might use a
break tag to force a line break

that i understand that code if you want to put the sentence on the next line.

(3) When one might use  , a non-breaking space, to force word pairing.

i understand that code make space between the words and why there is a space between the words even i did not put that code?

thanks galia

(1) A normal “soft space” is the common term for a space created by pressing the space bar. A line can wrap between any words that reach the end of the line (the edge of the container).

(2) A break tag is sometimes used to force a word or continuing line of text to begin on a new line.

(3) A non-breaking space looks like a normal space between two words but it glues the words together so they will stay together. The words will not separate. If they need to wrap to a new line, they will wrap together.

The reason that the text in the first row did not wrap when you removed the non-breaking space is because the width of that column had been increased just enough to keep it from wrapping when you added the padding to the button cells to move the buttons away from the ends of the textarea. But notice that if you zoom the text-only larger, the words will wrap anyway.

The error is mine because I set the width of column 1 to 55px instead of 1px. I did not anticipate that you might add padding around the buttons. 55px (column 1 width) plus 20px (padding) = 75px (new column 1 width) which is wider than I had intended; thus, the two words in the top row do not wrap at the default text size. But, if you zoom the text-only larger, the words will wrap. You need a mechanism to prevent them from wrapping and the non-breaking space is that mechanism. Unless, of course, you don’t mind if they wrap…!

sorry, my chinchilla went wild on my keyboard!!!

That’s not something you hear every day :smile:

2 Likes

Hi ron!

i am more understand but is it when you do space with the space bar the code of non-breaking code created ?

The error is mine because I set the width of column 1 to 55px instead of 1px. I did not anticipate that you might add padding around the buttons. 55px (column 1 width) plus 20px (padding) = 75px (new column 1 width) which is wider than I had intended; thus, the two words in the top row do not wrap at the default text size. But, if you zoom the text-only larger, the words will wrap. You need a mechanism to prevent them from wrapping and the non-breaking space is that mechanism. Unless, of course, you don’t mind if they wrap…!

sorry were is the 55px on the code that you did and i try to get the text larger in the code that is now but the text is already warp it is the same

thanks galia

The code that I sent to you actually set the width of column 1 to 60px and applied 4px of left and right padding to the .button cells. 60px + 8px = 68px. The text required the non-breaking space to keep it from wrapping at the expected default font size.

          <tr class="buttons">
            <td height="50" width="60"></td>
            <td align="right" valign="bottom"><input name="button2" type="submit" class="heb" id="button2" value="שלח" /></td>
            <td align="left" valign="bottom"><input name="Reset" type="reset" class="heb" id="button" value="נקה" /></td>
          </tr>
form .buttons td {padding:4px 4px 0;}

You changed 60 to 55 and added the 10px of left and right padding to the cells in the .buttons row. 55px + 20px = 75px. The text did not wrap with the non-breaking space deleted (replaced by a soft space).

          <tr class="buttons">
             <td height="45" width="55"></td>
             <td align="right" valign="middle"><input name="button2" type="submit" class="heb" id="button2" value="שלח" /></td>
            <td align="left"  valign="middle"><input name="Reset" type="reset" class="heb" id="button" value="נקה" /></td>
          </tr>
form .buttons td {padding:10px 10px 0;}

I realize that my previous explanation does not really answer your question very well. I’ll try to write an example that better explains why I used the non-breaking space other than to satisfy Dreamweaver design view.

thank you ron for your explanation i will set on it deeper tomorrow but i have a question why to do more wide width to cells 1 it is from the buttons cells?

galia

I’m sorry but I do not understand the question. Which cells are you talking about, please? Which are cells 1?

I omitted an important line of code from the previous explanation which should answer this question.

When I returned my latest code to you, it included this line:

form .buttons td:first-child {padding:0;}

That line removes the 10px of padding from the first cell, the label cell, in the .button row. It is till in your code so the words are wrapping. It would have been much better had I set the width of the right column to 1px. That extra line of CSS would not have been needed.

Your questions are good because they are helping me see and fix an error that I made.