How to style my HTML form using CSS

Question

I am trying to style a basic HTML form that uses an image background:

<form style="
    background:url(http://moneythink.org/wp-content/uploads/2012/06/Moneythink-Newsletter-Signup-Background.jpg) no-repeat; 
    padding:90px 0px 60px 122px;">
    <input type="email" value="Email" name="EMAIL" 
        class="required email" id="mce-EMAIL" 
        style="width: 100px;" style="padding-bottom: 5px;"> 
    <input type="image" src="http://moneythink.org/wp-content/uploads/2012/06/Submit-Button.jpg" 
        alt="Submit button" style=" padding-left: 57px; padding-bottom: -40px;" 
        name="subscribe" id="mc-embedded-subscribe">
</form>

All is looking as expected, except, for some reason, I can't get the Submit button to appear directly underneath the text field; it keeps appearing next to it, on the right.

Any tips on how to fix this?

Eliran Malka · Accepted Answer · 2012-07-20 21:44:30Z

4

In the CSS, apply display: block to the submit button, or - if using floats for layout - clear: both.

This will render the button as a block level element in the flow, resulting in the desired layout.

Reference

Block-level elements on Mozilla Developer Network

edited Jul 20, 2012 at 21:44

answered Jun 10, 2012 at 8:55

Eliran Malka

16.4k7 gold badges80 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lukas Pleva Over a year ago

Awesome, using display: block fixed it. Thanks much!

Blender · Accepted Answer · 2012-06-10 08:56:37Z

1

Use a stylesheet. Inline CSS will make your eyes bleed.

After you do this, making the buttons block-level elements might do the trick (depending on your desired layout):

form input[type="image"] {
  display: block;
}

answered Jun 10, 2012 at 8:56

Blender

300k55 gold badges462 silver badges511 bronze badges

Comments

Sathyajith Bhat · Accepted Answer · 2012-06-10 16:30:15Z

0

<html>

<style>
--your style--  
</style>

<body>
<form>
 --your class-- 
</form>
</body>

</html>

like this(for shadow text php):

<?php

echo "<html>";
echo "<head>";

echo "<style>";

echo '.inner_text_shadow{text-shadow: 1px 1px white, -1px -1px #444;}';
echo '.default{font-size:30px;color: darkred;font-weight:bold;}';
echo '</style>';
echo '<body>   <p class="inner_text_shadow default">FreeClup Best Code</p></body>';
echo "</html>";
?>

edited Jun 10, 2012 at 16:30

Sathyajith Bhat

22k22 gold badges102 silver badges141 bronze badges

answered Jun 10, 2012 at 13:31

MAG TOR

1291 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to style my HTML form using CSS

3 Answers 3

Reference

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Reference

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related