PDA

Click to See Complete Forum and Search --> : CSS acts strangely!

TriKri
08-01-2007, 06:54 AM
Hi! I am currently working on a form which doesn't act quite as I want it to.

Here's the html-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="interface.css" >
<script type="text/javascript" src="interface.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
</head>
<body onload="startup();">

<form class='ichildren' id=Form1>
<div class='keys bchildren' id='propdiv' style="width: 900px">
<input type='text' name='f1' value='Field 1' ID=Text1 />
<input type='text' name='f2' value='Field 2' ID=Text2 />
<input type='text' name='f3' value='Field 3' ID=Text3 />
<input type='text' name='f4' value='Field 4' ID=Text4 />
<input type='submit' value='test text' name='b1' ID=Submit1 />
<div />
<div class='elements bchildren' id='boxdiv'>
Hi there
</div>
</form>

</body>
</html>

Here's interface.css:
body {
background-color: rgb(200,200,200);
}

.keys {
background-color: rgb(200,200,255);
}
.elements {
background-color: rgb(255,200,200);
}

/* CLASSES */
.ichildren * {
display: inline;
}
.bchildren * {
display: block;
}

And interface.js is just a file with a so far empty function called startup.

But it's not acting as I would like it to. First, the form is set to class "ichildren", which should make the two div's in it end up at the same row and not over and under each other. I have heard of other who has had problems making div's act as inline objects, can it be so that "display: inline;" is not working well with divs?

Another thing, since the first div is set to class 'keys', and contains all the text boxes and the button, I would like the text boxes and the button to have a red background, which class keys specifies. And the text "Hi there" I would like to have a blue background. Instead the text gets a red background, and the rest of the row (to the right of the text) gets a blue background. How comes? I have no clue of what is wrong.
Centauri
08-01-2007, 07:52 AM
Not sure what you want this to look like..

You have a number of syntax errors in that little bit of code - an incorrectly closed div and a number of incorrectly formed ids.

When those are fixed, it will still be found that the two internal divs are not side by side, due to the block level elements within the inline divs - these effectively push the "page ponter" down below the container div, meaning the next inline element slides below it.

If you want the whole lot on a line, then the inputs need to be inline as well. Note that the width of 900px is not going to work as inline elements cannot be given width. If you want the set width, float the element left, which will default it to block and be able to accept width.
blis102
08-01-2007, 10:11 PM
Add on to centauris comment:

You need to enclose your attribute values (id="myId") in double quotes, not single quotes.

If you want the divs to be inline, then give them the inline property directly (apply an ID or Class that makes it inline). Try this:
.ichildren div {display: inline;}