Member Avatar for obscured47

Hey, sorry if this is a really stupid question but i'm a bit in a hurry, got this coursework due tomorrow and i realised there are some problems with my code.

I have a text area where the user can type a message and change the font-family, font-style, font-size etc dynamically. The problem is that when the user changes one of those things, the textarea resizes. I tried calling a function every time I change those things to fix the size but it's not working in firefox. Any ideas?

And two more small things.
The validator from w3.org gives me error on the <hr /> thing. I have it in the <body> and inside a <p> </p>.
It also gives me error on a <div align="center"> tag and I found out that it's depreciated. How can I make a table have a centered alignment without that?

Sorry if this is too messy

Thanks

  • 3 Contributors
  • 5 Replies
  • 85 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for MattEvans

you cannot put a <hr/> inside a <p>... you shouldn't put anything that constitutes a block ( this includes hr, a div, or another p ) inside a p

For example:

<p>This is a paragraph!</p>
<hr/>
<p>And this is another</p>

It's usually quite easy to terminate <p>s correctly..

To horizontally center any block level element (like a table) you can use CSS like this:

table.center
{
margin-left:auto;
margin-right:auto;
}

With your textarea; in some browsers, they adjust their height to a multiple of the row height ( which is affected by the font-size/family ).
I would say, you might be better off using a different element to display content. If you don't want the textarea font to change but you're changing a page-wide (body) font; you might want to exclude the textarea, by means of giving it a certain font/size in CSS. Otherwise; you may have difficulty getting around this in a 'non-hacky' way. You can set the 'line-height' in CSS; but if it's small, it crops the top/bottom of big text..

Member Avatar for obscured47

Hey thanks for the reply,

I still get an error when i have the <hr /> out of a <p>. It says that it shouldn't be there...

I'm afraid I can't change the textarea now, everything depends on that...may I ask the "haky" way? thanks again ;)

Member Avatar for MattEvans

I still get an error when i have the <hr /> out of a <p>. It says that it shouldn't be there...

Hm.. maybe it needs to be in a container; but not the body, that is, you should enclose {everything} inside a big div in order to be able to use <hr/> at top level. It's a wierd rule that, only in XHTML strict I think.

I'm afraid I can't change the textarea now, everything depends on that...may I ask the "haky" way? thanks again

Well. One way is to set the textarea's borders to nothing ( I think, in CSS "border-style:none;" should do that ) and put it inside a container div with the same background color, which is a little bit higher than the textarea itself; then apply a border to that div. That way, it'll appear like the textarea never changes size, even though it does a little. It should only be a little bit bigger; because the size difference is just a compensation for the textarea not being at a multiple of the row height high; BUT that'll only work if you set a specific height for the textarea, and make sure that you DON'T specify the textarea's 'rows' in its attributes (because will probably override the prefered height).

If you're not using borders on the textarea anyway, and it's just pushing the content underneath down a bit, still put it inside a div with a slightly oversize height... It's a bit like, putting gaps between wooden planks so they can expand when it rains without splitting...

Member Avatar for obscured47

great, thanks MattEvans ;)

Member Avatar for MidiMagic

Textarea size is directly defined in terms of character rows and columns.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.