Welcome to WebmasterWorld Guest from 107.21.149.142

Forum Moderators: not2easy

Message Too Old, No Replies

Photoshop and Frontpage background image colour problem

colour grey 999999 shows different in PShop image and Frontpage

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

New User

5+ Year Member

joined:Sept 5, 2008
posts: 11
votes: 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?

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

Preferred Member

10+ Year Member

joined:Feb 11, 2006
posts:481
votes: 0


Hi,

What format is the background image saved in?

Andrew

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

New User

5+ Year Member

joined:Sept 5, 2008
posts: 11
votes: 0


Thanks Andrew for responding.

so far png and gif - both giving same result

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

Preferred Member

10+ Year Member

joined:Feb 11, 2006
posts:481
votes: 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

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

New User

5+ Year Member

joined:Sept 5, 2008
posts: 11
votes: 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?

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

Preferred Member

10+ Year Member

joined:Feb 11, 2006
posts:481
votes: 0


Hi,

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

Andrew

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

New User

5+ Year Member

joined:Sept 5, 2008
posts: 11
votes: 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>
<!--
a { font-family: Verdana; font-size: 13px }
a:link { font-family: Verdana; font-size: 13px }
body { font-family: Verdana; font-size: 13px }
textarea { font-family: Verdana; font-size: 13px }
-->

#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>

<body bgcolor="#999999">
<div align="center">

<table cellpadding="0" cellspacing="0" width="980" height="19" background="images/top.gif">
<!-- MSTableType="layout" -->
<tr>
<td width="980" height="19"></td>
</tr>
</table>
</div>
<div align="center">
<table cellpadding="0" cellspacing="0" background="images/bg.gif" width="979" height="619">
<!-- MSTableType="layout" -->
<tr>
<td>&nbsp;</td>
<td valign="top" colspan="4">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="2" -->
<tr>
<td valign="top" height="100%" bgcolor="#000000">
<!-- MSCellFormattingType="content" -->
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>
<img border="0" src="images/920x120_new%20main%20site%20header_shorter%20copy.jpg" width="920" height="120"></td>
</tr>
<tr>
<td bgcolor="#333333" height="1" width="100%">
<img alt="" width="1" height="1" src="images/MsSpacer.gif"></td>
</tr>
</table>
</td>
<td height="121">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top" colspan="4" bgcolor="#000000">
<div id="navbarleft">
<ul id="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div></td>
<td height="25">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top" colspan="4">
<div id="subnavbar">

<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">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td height="22">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top" rowspan="3">
<p>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td height="19">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="6" -->
<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%">
<!-- MSCellFormattingType="content" -->
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>&nbsp;</td>
<td height="258">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td height="132">&nbsp;</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">
<!-- MSTableType="layout" -->
<tr>
<td width="981" height="23"></td>
</tr>
</table>

</div>

</body>

</html>

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

Preferred Member

10+ Year Member

joined:Feb 11, 2006
posts:481
votes: 0


Hi,

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

Andrew

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

New User

5+ Year Member

joined:Sept 5, 2008
posts: 11
votes: 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 :)

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

Preferred Member

10+ Year Member

joined:Feb 11, 2006
posts:481
votes: 0


Hi,

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

Andrew

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

New User

5+ Year Member

joined:Sept 5, 2008
posts: 11
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members