Styling Fieldsets CSS

Hey all,

I have been working on a new rails project and am really struggling to identify what my CSS should be to style my fieldset. At the moment because the ‘*’ element of my website is styled to a dark grey background, the fieldsets and labels are showing as dark grey even though the <page> element is set to white.

I have the following code:

<div id="login-area">
<div id="title">
	<h1>Log In</h1>
</div>
<%= form_tag login_path do %>
<div class="login-fields">
	<div class="field">
		<div class = "label">
			<%= label_tag :email %>
		</div>
		<div class = "label">
			<%= text_field_tag :email, params[:email] %>
		</div>
	</div>
	
	<div class ="field">
		<%= label_tag :password %>
		<%= password_field_tag :password %>
	</div>
	
	<div class="actions"><%= submit_tag "Log in" %></div>
</div>
<%end%>
</div>

And my current CSS file is:

* {margin:0; background-color:#1b1b1b;}
html, body {height: 100%; font-family:georgia,"Times new Roman",serif; color:#fff;}
.wrapper {background-color:#1b1b1b; width:100%;}
.topbar-wrapper{width:100%; padding-top:50px;}
.topbar{width:1000px; margin:auto; height:50px;}
.logo {}

.page {background-color: #fff; width:500px; margin: 0 auto; margin-top:30px; border-radius:1em;}

/* Session specifics */
.field {background-color: #fff; margin:10px;}
.label {color:#000; background-color: #fff;}
#login-area {background-color: #fff; width:300px; height:300px; margin:0 auto;}
#login-area h1 {background-color: #fff; color:#000; padding-top:30px; font-family:arial;}
#title {background-color:#fff;}
.login-fields {background-color:#fff;}

#login-area .form .field .label input.email {background-color:#fff;}

/* Footer Elements */
.footer {width:100%;}
.footer ul li{display:inline; margin-left:50px; position:relative; right:60px; top:25px;}
.footer ul {margin: auto; width:1000px; text-align:center;}


/*Links*/
li a {color:#999; text-decoration:none;}
li a:hover {color:#CC3333; text-decoration:underline;}

It really would be much appreciated if someone could let me know how to change the background color of the fieldset boxes as I have been working on it for about an hour and can’t seem to find the right combination.

Many thanks in advance for your help!

Tom :slight_smile:

For a CSS question, it’d be infinitely easier if you gave us the rendered HTML, not the Ruby HTML. It’s hard to tell what the end result looks like.

Yes, we need the real HTML. :slight_smile:

That’s not an element, it’s all elements. It’s best not to use the * selector, as it is too much of a sledgehammer approach, and it is notorious for messing with form elements. To remeove default margin and padding, do something like this instead:


html, body, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

Hey,

Thanks both for your suggestions so far. my bad for not including the actual HTML output as below: :slight_smile:


<!DOCTYPE html>
<html>
<head>
  <title>Made By | </title>
  <link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <meta content="authenticity_token" name="csrf-param" />
<meta content="z9RZJgdvm7hNJJ5WAwWNI58g3IbN428pwBJQ6vP1gXs=" name="csrf-token" />
</head>
<body>
	<div class="wrapper">
	
		<div class="topbar-wrapper">

			<div class="topbar">
				<div class="logo">
					<a href="/"><img id="logo" src="/assets/logo-big.png" alt="Made_By_Logo" /> </a>
				</div>
		
		<div class="page">		
			<div id="login-area">
<div id="title">
	<h1>Log In</h1>
</div>

<form accept-charset="UTF-8" action="/login" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="z9RZJgdvm7hNJJ5WAwWNI58g3IbN428pwBJQ6vP1gXs=" /></div>
<div class="login-fields">
	<div class="field">
		<div class = "label">
			<label for="email">Email</label>
		</div>
		<div class = "label">
			<input id="email" name="email" type="text" />
		</div>

	</div>
	
	<div class ="field">
		<label for="password">Password</label>
		<input id="password" name="password" type="password" />
	</div>
	
	<div class="actions"><input name="commit" type="submit" value="Log in" /></div>
</div>
</form></div>
		</div>

		
		<div class="footer">
			<div class="footer-links">
				<ul>
					<li><a href="/about">About</a></li>
					<li><a href="/contact">Contact Us</a></li>
				</ul>
			</div>
		</div>

		
	</div>
	
</body>
</html>

Hopefully this will help a little.

Thanks again for all your help!
Tom

As I mentioned, don’t put a bg color on *. In fact, don’t use it at all.

Hey Ralph,

I have taken your advice and removed the * replacing it with your alternative and it has helped a lot so thanks for that.

The only thing still in grey which should be white with black writing are the labels ‘email’ and ‘password’ which are stubbornly dark grey with white writing?

html, body, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, label, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0; background-color:#1b1b1b;}
html, body {height: 100%; font-family:georgia,"Times new Roman",serif; color:#fff;}
.wrapper {background-color:#1b1b1b; width:100%;}
.topbar-wrapper{width:100%; padding-top:50px;}
.topbar{width:1000px; margin:auto; height:50px;}
.logo {}

.page {background-color: #fff; width:500px; margin: 0 auto; margin-top:30px; border-radius:1em;}

/* Session specifics */
.field { margin:10px;}
.label {}
#login-area {background-color: #fff; width:300px; height:300px; margin:0 auto;}
#login-area h1 {background-color: #fff; color:#000; padding-top:30px; font-family:arial;}
#title {background-color:#fff;}
.login-fields {background-color:#fff;}

#login-area .form .field .label input.email {background-color:#fff;}

/* Footer Elements */
.footer {width:100%;}
.footer ul li{display:inline; margin-left:50px; position:relative; right:60px; top:25px;}
.footer ul {margin: auto; width:1000px; text-align:center;}


/*Links*/
li a {color:#999; text-decoration:none;}
li a:hover {color:#CC3333; text-decoration:underline;}
<!DOCTYPE html>
<html>
<head>
  <title>Made By | </title>
  <link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" type="text/css" />
  <meta content="authenticity_token" name="csrf-param" />
<meta content="dW2VpBx7jdQPIzMObi/Lxf7vnkBjR7Bwvv9jEi+L9+0=" name="csrf-token" />
</head>
<body>
	<div class="wrapper">
	
		<div class="topbar-wrapper">

			<div class="topbar">
				<div class="logo">
					<a href="/"><img id="logo" src="/assets/logo-big.png" alt="Made_By_Logo" /> </a>
				</div>
		
		<div class="page">		
			<div id="login-area">
<div id="title">
	<h1>Log In</h1>
</div>

<form accept-charset="UTF-8" action="/login" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="dW2VpBx7jdQPIzMObi/Lxf7vnkBjR7Bwvv9jEi+L9+0=" /></div>
<div class="login-fields">
	<div class="field">
		<div class = "label">
			<label for="email">Email</label>
		</div>
		<div class = "label">
			<input id="email" name="email" type="text" />
		</div>

	</div>
	
	<div class ="field">
		<label for="password">Password</label>
		<input id="password" name="password" type="password" />
	</div>
	
	<div class="actions"><input name="commit" type="submit" value="Log in" /></div>
</div>
</form></div>
		</div>

		
		<div class="footer">
			<div class="footer-links">
				<ul>
					<li><a href="/about">About</a></li>
					<li><a href="/contact">Contact Us</a></li>
				</ul>
			</div>
		</div>

		
	</div>
	
</body>
</html>

Any idea how to fix this last bit?

Thanks,
Tom

That’s because the reset I gave you includes the label element:

html, body, h1, h2, h3, h4, h5, h6, p, a, blockquote, 
pre, label, code, hr, img, form, fieldset, legend, [COLOR="#FF0000"]label[/COLOR], 
textarea, span, em, strong, sub, sup, cite, table, tbody, td, 
tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li 
{margin: 0; padding: 0;[COLOR="#ff0000"] background-color:#1b1b1b;[/COLOR]}

You really can’t use background color here. Make a new rule for just the few elements that really should have this background color. E.g.

body, h1, p{background:#1b1b1b;}

Otherwise, it’s like you want to paint the walls in your bedroom red, so you flush the room with red paint—all over your walls, bed, pillow, carpet, pyjamas, clock and so on … and then go around repainting everything except the walls a different color. It’s not practical. Some of the paint won’t wash off—like on your form elements. :slight_smile: