Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Problems

Status
Not open for further replies.
Guest_imported

Guest_imported

New member
Jan 1, 1970
0
If u execute following CSS code:

<html>
<head>
<title> Invulformulier </title>
<LINK rel="stylesheet" href="practicum2.css" type="text/css">
</head>

<body>
<DIV STYLE="background-color: red; margin-left: 30%; margin-right: 30%;">
<p class="titel"> INVULFORMULIER </p>
</DIV>
<DIV class="formulier">
<form method="POST" action="opgave-2-11.asp">

<SPAN class="label" STYLE="height: 50;"> E-mail adres afzender: </SPAN> <SPAN class="invul" STYLE="height: 50;"> <input type="text" name="afzender" size="25"> </SPAN>
<SPAN class="label" STYLE="height: 50;"> Bestemmeling: </SPAN> <SPAN class="invul" STYLE="height: 50;"> <input type="text" name="bestemmeling" size="25"> </SPAN>
<SPAN class="label" STYLE="height: 80;"> Bericht: </SPAN> <SPAN class="invul" STYLE="height: 80;"> <textarea rows="2" name="bericht" cols="18"> </textarea> </SPAN>
<SPAN class="label" STYLE="height: 50;"> Bestandsnaam: </SPAN> <SPAN class="invul" STYLE="height: 50;"> <input type="text" name="bestand" size="25"> </SPAN>
<SPAN class="label" STYLE="width: 100%;"> <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"> </SPAN>
</form>
</DIV>
</body>
</html>

with practicum2.css the following file:

BODY { background-image: url(../figuren/background.gif);
color: white; }

.titel {font-size: 20; margin-top: 10 px; margin-bottom; 10 px; font-family: cursive; color: white; text-align: center;}
.formulier {background-color: red; margin-left: 15%; margin-right: 15%; border-style: double; border-color: white; border-top-width: thin;
border-bottom-width: thin; border-right-width: thin; border-left-width: thin;}
.label {font-size: 12; color: white; border-style: double; border-color: white; border-top-width: thin; border-bottom-width: thin;
border-right-width: thin; border-left-width: thin; width: 50%; font-family: cursive; font-style: bold;
height: 40; margin-bottom: 0px; margin-top: 0px; padding: 3%;}
.invul {font-size: 12; color: white; border-style: double; border-color: white; border-top-width: thin; border-bottom-width: thin;
border-right-width: thin; border-left-width: thin; width: 49.99%; font-family: cursive; font-style: bold;
margin-bottom: 0px; margin-top: 0px; padding: 3%; height: 40;}
.binnenblok {font-size: 12; color: white; border-style: double; border-color: white; border-top-width: thin; border-bottom-width: thin;
border-right-width: thin; border-left-width: thin; width: 99,99%; font-family: cursive; font-style: bold;
height: 40; margin-bottom: 0px; margin-top: 0px; padding: 3%;}
.buitenblok {background-color: red; margin-left: 30%; margin-right: 30%; border-style: double; border-color: white; border-top-width: thin;
border-bottom-width: thin; border-right-width: thin; border-left-width: thin;}

with INTERNET EXPLORER 5.x, u see that in the HTML-code above, the right span is not exactly at the same line as the left span-block....
Does somebody know what I have done wrong? What's the reason for this?

THX in advance.

davyduck@zeus.rug.ac.be
 
Sort by date Sort by votes
I would suggest using a table, like:
Code: 
<html>
    <head>
        <title> Invulformulier </title>
        <LINK rel=&quot;stylesheet&quot; href=&quot;fred.css&quot; type=&quot;text/css&quot;>
    </head>

    <body>
        <DIV STYLE=&quot;background-color: red; margin-left: 30%; margin-right: 30%;&quot;>
            <p class=&quot;titel&quot;> INVULFORMULIER </p>
        </DIV>
        <DIV class=&quot;formulier&quot;> 
        <form method=&quot;POST&quot; action=&quot;opgave-2-11.asp&quot;>
	<table>
	<tr>
            <td class=&quot;label&quot; STYLE=&quot;height: 50;&quot;> E-mail adres afzender: </td>
	    <td class=&quot;invul&quot; STYLE=&quot;height: 50;&quot;> <input type=&quot;text&quot; name=&quot;afzender&quot; size=&quot;25&quot;> </td>
	</tr><tr>
            <td class=&quot;label&quot; STYLE=&quot;height: 50;&quot;> Bestemmeling: </td>
	    <td class=&quot;invul&quot; STYLE=&quot;height: 50;&quot;> <input type=&quot;text&quot; name=&quot;bestemmeling&quot; size=&quot;25&quot;> </td>
	</tr><tr>
            <td class=&quot;label&quot; STYLE=&quot;height: 80;&quot;> Bericht: </td>
	    <td class=&quot;invul&quot; STYLE=&quot;height: 80;&quot;> <textarea rows=&quot;2&quot; name=&quot;bericht&quot; cols=&quot;18&quot;> </textarea> </td> 
	</tr><tr>
            <td class=&quot;label&quot; STYLE=&quot;height: 50;&quot;> Bestandsnaam: </td>
	    <td class=&quot;invul&quot; STYLE=&quot;height: 50;&quot;> <input type=&quot;text&quot; name=&quot;bestand&quot; size=&quot;25&quot;> </td>
	</tr><tr>
            <td class=&quot;label&quot; STYLE=&quot;width: 100%;&quot;> <input type=&quot;submit&quot; value=&quot;Submit&quot; name=&quot;B1&quot;><input type=&quot;reset&quot; value=&quot;Reset&quot; name=&quot;B2&quot;> </td>
        </form>
        </DIV>
    </body>
</html>

Hope this helps, cheers Neil :cool:
 
Upvote 0 Downvote
I agree with Neil about the tabel !

further:
If for each cell the borders are the same, you can reduce your code : border: thin double white;

Erik
 
Upvote 0 Downvote
Thanx a lot!
I thought it was possible to fix everything with CSS only (no use of tables any more). But it isn't possible (yet).

Greetz,
davyduck@zeus.rug.ac.be
 
Upvote 0 Downvote
Actually you can do some pretty neat stuff with only CSS that works in Opera 5+, Internet Explorer 5+, and Netscape 6+.

For an exmaple of something REALLY complicated, check out


that only uses tables for the top part and for the actual message board part in the center, which is tabular data.

The three liquid colums on the page are all done using CSS. ===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
679
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
555
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
591
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
190
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top