homepage Welcome to WebmasterWorld Guest from 54.196.62.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

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

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 search open messages active posts  
 

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved