Photoshop and Frontpage background image colour problem Site Graphics and Multimedia Design forum at WebmasterWorld

Welcome to WebmasterWorld Guest from 50.16.166.175
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,

Subscribe and Support WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design

Forum Library : Charter : Moderators: limbo
Site Graphics and Multimedia Design Forum

Photoshop and Frontpage background image colour problem
colour grey 999999 shows different in PShop image and Frontpage

mandy

msg:3741125

10:13 am on Sep 9, 2008 (gmt 0)

Hello,

I use Frontpage to make my webpages. I made a background image for the page using the colour of dark grey 999999. In Design View of Frontpage this background image merges beautifully with the background colour of 999999, but when I look in Preview mode, or publish to the web it is showing a very distinct line where the image ends and the page background colour begins.

(There is a second little problem which I will state here in case it helps to shed light on this: the size of the font is also slightly different in the 2 views, being slightly smaller when Preview-ed or published on web, making finished webpage become off-centred and everything a bit to the left.)

Can anyone tell me why this is happening and how to solve it?

Little_G

msg:3741187

12:22 pm on Sep 9, 2008 (gmt 0)

Hi,

What format is the background image saved in?

Andrew

mandy

msg:3741193

12:37 pm on Sep 9, 2008 (gmt 0)

Thanks Andrew for responding.

so far png and gif - both giving same result

Little_G

msg:3741534

10:06 pm on Sep 9, 2008 (gmt 0)

Hi,

I've had some problems with PNG in Internet Explorer before because IE doesn't implement PNG's gamma correction feature, so the resulting colour can be off slightly (don't know if this is the case with IE7), but I'm not aware of problem with GIF. Have you tried looking at the page in another browser?

Andrew

mandy

msg:3741560

10:58 pm on Sep 9, 2008 (gmt 0)

Slugged at this all day, was just about to go to bed a short while ago and suddenly thought that maybe a transparent background was it - and it has done the trick - no line any more :) !

I checked it in another browser, firefox, and it is fine, the colour that is, but I noticed that a table in the centre that I put a bit of writing in, and which is centred in IE, is far left in firefox
:( - do any of you lovely people know why that would be, by any chance?

ps. I am making my entree into the world of css and I am sure I am putting some extra things in - could it be that? Could I post the code in here?

Little_G

msg:3741860

10:07 am on Sep 10, 2008 (gmt 0)

Hi,

Well done on finding a solution, you can post code.

Andrew

mandy

msg:3741881

11:15 am on Sep 10, 2008 (gmt 0)

Thank you very much - it's an awful lot of code though

Before I give the code just want to say what final solution for background image problem was for anyone else with the problem:

I was making the new psd using option of 'white background' - I changed this to making it: 'colour background'

and, most importantly I believe, I was cropping the thin slice for tiling the background from the .PSD instead of cropping it from a .GIF (saved from the psd). Once I cropped from the saved gif, it REALLY works well now!

My code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Great Test Page!</title>
<style>

#navbar ul{
background: #000000;
width: 920px;
height: 29px;
font-size: 11px;
font-family: Verdana, Arial, Tahoma;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #000000;
overflow: hidden;
}

#navbar a, #navbar a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#navbar a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navbarleft {
width: 920px;
float: left;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000;
text-decoration: none;
}

#nav a:hover {
background: #333333;
color: #FFFFFF;
margin: 0px;
padding: 10px 15px 9px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

/************************************************
*Subnavbar *
************************************************/

#subnavbar {
background: #BBB9B9;
width: 920px;
height: 27px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 1px solid #BBB9B9;
border-bottom: 1px solid #BBB9B9;

}

#subnav {
margin: 0px;
padding: 0px;
list-style: none;
}

#subnav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#subnav a, #subnav a:visited {
background: #BBB9B9;
color: #990000;
display: block;
font-weight: bold;
margin: 0px;
padding: 6px 15px 6px 15px;
border-bottom: 1px solid #BBB9B9;
border-left: 1px solid #BBB9B9;
border-right: 1px solid #BBB9B9;
text-decoration: none;
}

#subnav a:hover {
background: #FFFFFF;
color: #990000;
display: block;
text-decoration: none;
margin: 0px;
padding: 8px 15px 10px 15px;
border-bottom: 1px solid #BBB9B9;
border-left: 1px solid #BBB9B9;
border-right: 1px solid #BBB9B9;
}

#subnav li {
float: left;
margin: 0px;
padding: 0px;
}

#subnav li li {
float: left;
margin: 0px;
padding: 0px;
width: 160px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #FFFFFF;
color: #990000;
width: 160px;
float: none;
margin: 0px;
padding: 6px 15px 6px 15px;
border-bottom: 1px solid #BBB9B9;
border-left: 1px solid #BBB9B9;
border-right: 1px solid #BBB9B9;
}

#subnav li li a:hover, #subnav li li a:active {
background: #DDDDDD;
color: #C51014;
margin: 0px;
padding: 6px 10px 6px 10px;
}

#subnav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#subnav li:hover ul {
left: auto;
display: block;
}

#subnav li:hover ul, #subnav li.sfhover1 ul {
left: auto;
}

</style>
<style fprolloverstyle>A:hover {color: #FF0000; font-size: 8pt; font-weight: bold}
</style>
<meta name="Microsoft Border" content="l, default">
</head>

<ul id="subnav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three three</a></li>
</ul>

</div>
</td>
<td height="27"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td height="22"> </td>
</tr>
<tr>
<td> </td>
<td valign="top" rowspan="3">
<p> </td>
<td> </td>
<td> </td>
<td> </td>
<td height="19"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">

<tr>
<td bgcolor="#999999" colspan="3" height="1">
<img alt="" width="1" height="1" src="images/MsSpacer.gif"></td>
</tr>
<tr>
<td bgcolor="#999999" width="1">
<img alt="" width="1" height="1" src="images/MsSpacer.gif"></td>
<td valign="top" bgcolor="#FFFFFF" width="100%">

This is<p>the way</p>
<p>that I</p>
<p>like to</p>
<p>do it</p>
<p>now</td>
<td bgcolor="#999999" height="100%" width="1">
<img alt="" width="1" height="1" src="images/MsSpacer.gif"></td>
</tr>
<tr>
<td bgcolor="#999999" colspan="3" height="1">
<img alt="" width="1" height="1" src="images/MsSpacer.gif"></td>
</tr>
</table>
</td>
<td> </td>
<td height="258"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td height="132"> </td>
</tr>
<tr>
<td width="15"></td>
<td width="219"></td>
<td width="84"></td>
<td width="408"></td>
<td width="209"></td>
<td height="15" width="44"></td>
</tr>
</table>
</div>
<div align="center">
<table cellpadding="0" cellspacing="0" background="images/bottom.gif" width="981" height="23">

<tr>
<td width="981" height="23"></td>
</tr>
</table>

</div>

</body>

</html>

Little_G

msg:3741953

1:11 pm on Sep 10, 2008 (gmt 0)

Hi,

When I look at your page in Firefox it's centred fine!

Andrew

mandy

msg:3742206

6:49 pm on Sep 10, 2008 (gmt 0)

Andrew, I made a mistake and I should have said that I had made the text to the left but it was centreing it - but doesn't matter anyway as I have sorted it.

One last question: I have one more problem to do with the software, Frontpage; would this forum be a good place to ask the question?

Thank you very much for all your assistance :)

Little_G

msg:3742607

10:39 am on Sep 11, 2008 (gmt 0)

Hi,

For Frontpage help WYSIWYG and Text Code Editors [webmasterworld.com] would be the best forum.

Andrew

mandy

msg:3742751

2:15 pm on Sep 11, 2008 (gmt 0)

Andrew, thank you very much for all your help - all problems sorted (for the time being!)

Global Options:

top

home

open messages

active posts

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved

Site Graphics and Multimedia Design Forum