Problems with some simple CSS...

Forever Zero

04-15-2005, 01:16 AM

I'm pretty new to CSS and am trying to learn it so I can start using it as the base to any future websites I make.

I was trying to re-create a simple HTML element I had used a table for with CSS, and ran into two big problems that I can't figure out. Doing something like this with CSS should be pretty easy (or I thought :\).

What I am doing is re-creating a table that holds the title for each page. The old table had 3 colums, two held the images for the side tabs of the table, and the middle held the actual text.

I am using what it comes out to look like (you'll see in the attached images) as the background image for the text. Here is the code I am using...

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div class="title"><div>Testing....</div></div>
</body>
</html>

"topbg.jpg" is the entire thing as a background instead of using seperate images in a table to get the tabs. I need to use padding for the text which is held in "title.div" to make it go down and to the left so it is where it is supposed to be.

Here is the problem. When I run it in IE, it looks perfect except the entire thing gets pished down (see attached image). When I run it in Firefox, it doesn't get pushed down, but the top margin doesn't appear at all.

Any help in a way to code this with CSS is appreciated. Thanks.

http://www.roschmuck.com/personal/problem.jpg

mcdougals4all

04-15-2005, 03:34 AM

Try setting margin and padding to zero on your body element. Browsers often have different default styles for elements unless you explicitly set a value in your CSS. Also, unless a numeric value is zero, you must include the unit of measure, as with .title.

You'll probably want to read up on DOCTYPE's too, there's a sticky thread at the top of the HTML/CSS forum. Using the correct DOCTYPE is one step towards getting browsers to render your pages more predictably.

Unless it serves some other purpose later-on, you probably don't need the inner div and can combine the style rules.

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div class="title">Testing....</div>
</body>
</html>

Forever Zero

04-15-2005, 04:36 AM

Thanks alot for the help.

Much appreciated :).