Photoshop 'save for web' leaves gaps.

[musico]

Ive designed and sliced a layout in photoshop and as i cant code full html i decided to just leave it and 'save for web'. When i do some finishing touches such as links in the 'live mode' of dreamweaver it looks fine, but when i look at it in a browser all of the images have gaps. I had an attempt with using div's and float:left; or float:right; and the same thing happens. To see the image go to www.musicouk.net/problem.jpg or www.musicouk.net/newsite/home/ to see the site (if you click on a link make sure you manually add /newsite/ because they are coded to /page/).

There shouldnt be a problem in the actual coding because i validated the html.
This is the css file:

#feat-title {
	background-image: url(images/feat-title.png);
	padding: 5px;
	clear: both;
	height: 41px;
	width: 276px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	font-variant: small-caps;
	text-transform: none;
	color: #000;
	text-align: center;
	vertical-align: middle;
	float: right;
}
#feat-cont-title {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: small-caps;
	text-transform: none;
	color: #acd100;
	background-image: url(images/feat-cont-title.png);
	padding: 5px;
	clear: both;
	height: 21px;
	width: 310px;
	float: right;
}

Thanks

[mocean]

Try to make much better, adjust you design according to different web browser

[Eye for Video]

I'd suggest that you skip this part:

sliced a layout in photoshop

slicing an image is really old school... used to make it look like something was happening when Internet connection speeds were really slow.
Now days, that's really not needed... and it will save you a lot of work if you use just one image as the background image for your main container <div>.
You DON"T need to slice the image!
Then, you can use CSS to position text and/or other images as needed over the top of the background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Best wishes,
Eye for Video

[rtrethewey]

The page you posted doesn't have a <!DOCTYPE> statement. Without a complete <!DOCTYPE> statement, browsers will render pages using their default settings, which will vary significantly from one browser to the next and cause the kinds of problems you're seeing. You need to use a complete <!DOCTYPE> statement to set browsers to "Standards Compliance Mode" so that they will do their best to follow the W3C Standards for rendering. Search on "doctype switch" for some good advice.

[musico]

I'd suggest that you skip this part:

slicing an image is really old school... used to make it look like something was happening when Internet connection speeds were really slow.
Now days, that's really not needed... and it will save you a lot of work if you use just one image as the background image for your main container <div>.
You DON"T need to slice the image!
Then, you can use CSS to position text and/or other images as needed over the top of the background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Best wishes,
Eye for Video

Will I still be able to make it expandable, and do you have a good tutorial/source of information about positioning text on css?

[auntnini]

<TABLE>layouts are BAD. Slicing an image creates a filled <TABLE><tr><td>content</td></tr>></TABLE> so if you try to add anything, the <TABLE> structure gets knocked out of whack.

Unless you are very skilled with the slice tool, you end up with extraneous slices to fill in the gaps.

The gaps are NOT created by File>Save for Web and Devices , nor by Dreamweaver.

[musico]

<TABLE>layouts are BAD. Slicing an image creates a filled <TABLE><tr><td>content</td></tr>></TABLE> so if you try to add anything, the <TABLE> structure gets knocked out of whack.

Unless you are very skilled with the slice tool, you end up with extraneous slices to fill in the gaps.

The gaps are NOT created by File>Save for Web and Devices , nor by Dreamweaver.

How else would i go about coding it then?

[Eye for Video]

Using a background image can be expandable... which is more than can be said for a single sliced up image.
Review the background image property here:
http://www.w3schools.com/cssref/pr_b...und-repeat.asp
and notice that the image can be repeated for only the x axis, only the y axis, or repeated for both.
So if you do plan to make your page content longer (meaning that you now need a taller image of undetermined height).... here is where you would cut the page in half and then take a very small section of the middle of the image as wide as the page but only a few pixels high.
Now, you'll need 3 <div>s for the background, the top... which doesn't change, the bottom which also doesn't change, and a middle which expands.
Another option is to use 100% for the background image... just keep in mind that the image is being stretched and some distortion can occur.
http://stackoverflow.com/questions/1...-with-css-only
Basic CSS layout:
http://www.w3schools.com/css/css_intro.asp
works with basic HTML:
http://www.w3schools.com/html/html_basic.asp
The default action of a <div> is to expand to contain all the content.. so additions to the page are easily handled.
Instead of Tables, use container elements like the <div>.
http://www.w3schools.com/html/html_layout.asp
Many elements can be used without wrapping them in a <div>, but using <div>s can be a good way to organize the page... each section neatly in it's own little box.
You may also need to "float" items from time to time:
http://www.w3schools.com/css/css_float.asp
This allows you to place containers side by side or move (float) them to a special place on the page.
Best of luck,
Eye for Video