Welcome to WebmasterWorld Guest from 54.197.116.116

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)

5+ Year Member



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 Sep 9, 2008 (gmt 0)

5+ Year Member



Hi,

What format is the background image saved in?

Andrew

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

5+ Year Member



Thanks Andrew for responding.

so far png and gif - both giving same result

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

5+ Year Member



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 Sep 9, 2008 (gmt 0)

5+ Year Member



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 Sep 10, 2008 (gmt 0)

5+ Year Member



Hi,

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

Andrew

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

5+ Year Member



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 Sep 10, 2008 (gmt 0)

5+ Year Member



Hi,

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

Andrew

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

5+ Year Member



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 Sep 11, 2008 (gmt 0)

5+ Year Member



Hi,

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

Andrew

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

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month