CSS Forum

**Joshy D** · 01:53 PM

hey guys.

ive got a problem with my css, this website im re-coding for someone is quite graphically based so when id finished that i was thinking great not much left to do. So i aded a little text to check where it sat and it wasnt in the right place, so i added padding to my css but in FF and NN the padding moves the background image aswell as the text, but it doesnt in IE (something they got right - probably the only thing). Can anyone give me the solution to this? Thanks.

I will provide the full css and website if I must but would rather not.

To see what I mean you can go to: http://www.w3schools.com/html/tryit....=tryhtml_basic and type this:

Code:

<html>
<head>

<style type="text/css">
.about {
background: #345345 url(http://dev.dansgalaxy.co.uk/josh/OG/about.png) no-repeat center;
width: 350px;
height: 410px;
margin: 0 auto;
padding: 0px;
color: #ffffff
}
</style>

</head>
<body>

 <div class="about">
Blahbalhblah
 </div>

</body>
</html>

and then try to move the text to be inside the box.

Try changing the padding but it just moves the background image as well as the text.

P.S. Yes i know there is text in the image, i will fix that at a later date.

**chrishirst** · 12-08-2007, 05:15 PM

Quote:

but it doesnt in IE (something they got right - probably the only thing)

Naaah! just something else they got wrong.
Without a full doctype IE is in "quirksmode" so everything that is wrong with it will be wrong with it.
A full doctype (apart from XHTML 1.1) will at least make some of the things that are wrong, nearly right.

Where are you trying to put the text anyway?

**Joshy D** · 12-08-2007, 06:30 PM

Quote:

Naaah! just something else they got wrong.
Without a full doctype IE is in "quirksmode" so everything that is wrong with it will be wrong with it.

lol, ok i guess that makes sense.

ok, if you put the code i provided into w3schools try-it editor: http://www.w3schools.com/html/tryit....=tryhtml_basic
I am trying to get the text to be somewhere below the squiggly line that underlines the words 'about me' as if that were the text box and the text had to go in it and that was the title and the text had to go under it...is that helpful or am i just babbling.

**chrishirst** · 12-08-2007, 06:52 PM

these are the times when positioning comes into play,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<style type="text/css">
#about {
background: #345345 url(http://dev.dansgalaxy.co.uk/josh/OG/about.png) no-repeat center center;
width: 350px;
height: 410px;
margin: 0 auto;
color: #ffffff
}
#about .text {
	position:relative;
	top:120px;
	text-align:center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

 <div id="about"><div class="text">Blah blah blah</div>
 </div>

</body>
</html>

http://www.candsdesign.co.uk/demo/wt/dg/

**Joshy D** · 06:12 PM

aha, how dumb am i, i cant believe i didnt even try position:'anything'.
cheers dude, chrishirst to the rescue.

so is it possible to set an area for it so that the text starts a new line automatically before it gets too wide for the box.

EDIT: dont worry, ill make a new thread for it.