CSS text making background see through.

master maste

master maste

New Member
Reaction score
32
OK I have some troublesome css...

the element is supposed to have a 1px solid white line around a green box, with some text on the inside. The text is inside paragraph tags.

Code: 
CSS:
#header }
background: #009933;
border: 1px solid white;
}

HTML:
<div id="header">
<p>header</p>
</div>

The problem is that it shows the white border and has the green background, but when the text is added the background on the whole line where the text is goes see through (what ever is on the background color). Any reasons?
 
enouwee

enouwee

Non ex transverso sed deorsum
Reaction score
240
While you were at it, you changed the obvious typo too?
Code: 
#header }
 
enouwee

enouwee

Non ex transverso sed deorsum
Reaction score
240
Run your HTML / CSS through a validator and fix any errors / warnings it reports or check whether another style overrrides that one.
 
master maste

master maste

New Member
Reaction score
32
Thats the thing its the only thing there. I put it into a new document and its still not working.

another interesting thing I tried out, when I added more text to my div (this time all the same message <h3>header</h3) it does the same as before. The whole background of the element is green except for where all the lines of text are, so the colors change in and out.
 
T

TFlan

I could change this in my User CP.
Reaction score
64
I've never seen this problem before unless you set the background-color of the elements your using inside that DIV to something else.
 
enouwee

enouwee

Non ex transverso sed deorsum
Reaction score
240
Post your WHOLE code rather than letting people guess.

Why do I even bother replying to your threads...
 
master maste

master maste

New Member
Reaction score
32
ok

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css"/>
<title>Test Site</title>
</head>

<body>

<div id="header">
<h3>header</h3>
</div>

</body>
</html>

CSS:
Code: 
@charset "utf-8";
/* CSS Document */

* {
	background-color: #222222;
}

#header {
	background-color: #009933;
	border: 1px solid white;
	width: 250px;
}

Edit: for some weird reason if I set the line-height to 0px the disappearing background seems to disappear, but that kinda restricts me from using the line-height...
 
enouwee

enouwee

Non ex transverso sed deorsum
Reaction score
240
Change your * style to body or whatever you want it applied on. You tell the browser to use the background-color #222222 on every element...
 
You must log in or register to reply here.
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      Online now:
      440 (members: 2, guests: 438)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top