Designed layout html problem

[Merla]

Hello all,

I'm having problems with my Photoshop designed layout.

This is what it looks like at first(correct):
http://dialogue.awardspace.com/test/default.html

This is what happens when I try to add some text and content:
http://dialogue.awardspace.com/test/oki.html

What is that white stuff doing there? Is it something wrong with the spacer.gif(the slice thing and html was done by photoshop/imageready)? Error with the slicing or html?
And how to correct it?

Thanks in advance.

[grumpyoldtechs]

<img src="images/default_02.gif" width="404" height="265" alt=""></td>

theirs your problem it needs to be:

<td style="background-image:url(../images/default_02.gif); background-repeat:none;">

that for a quick fix. your trying to write on top of images they need to be background images

you ideally need to cut the images up different i also suggest you look into CSS layouts rather than trying to use tables.

its easier to learn CSS layouts from the start before you get into the bad ways of table layouts.

[Merla]

Oh..
Actually read about it quite a bit since my first post(about what you replied) and I will definitely give it another try, rewriting the full code and using css instead of tables.

Thanks for your quick reply!!! And also for your tips.

[grumpyoldtechs]

just post if you get stuck im always more than happy to help someone along the path to enlightenment

[Merla]

Thanks.
By the way.. My image is correctly sliced now and set as background image. But background-position:center; won't work? Now it's just left aligned which looks a bit silly.
What's gone wrong?

/* CSS Document */
body {margin:0px;
padding:0px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:black;
background-position:center;
}
#banner {
background-image:url(default_01.gif);
background-position:center;
height:209px;
width:760px;
}

etc..

[grumpyoldtechs]

the whole site or just the banner image?

try that and see if it works
#banner {
background-image:url(default_01.gif);
background-position:center;
height:209px;
width:760px;
margin:0 auto;
}

[Merla]

Ah yes, that's working:) Thanks!

How would I be best off adding text to that left content box?
The box will be filled with news, so a scrollbar function would be nice.

Any solution?

[grumpyoldtechs]

in your style sheet have
#newscont{
width:200px;
height:300px;
overflow:auto;
}

<div id="newscont">
your news in here
<div>