ScoobyNet.com - Subaru Enthusiast Forum

Notices
Computer & Technology Related Post here for help and discussion of computing and related technology. Internet, TVs, phones, consoles, computers, tablets and any other gadgets.

Web designers - help me

Thread Tools
 
Search this Thread
 
Old 15 July 2005, 05:02 PM
  #1  
Avi
Scooby Regular
Thread Starter
 
Avi's Avatar
 
Join Date: Apr 2001
Location: Manchester
Posts: 5,084
Likes: 0
Received 0 Likes on 0 Posts
Default Web designers - help me
I am working on a site for a friend, i'm no web designer, i'm customising a template and using slices in photoshop. Can anyone work out why i get the white line down the page on the right hand side?

http://www.emmiccleaningservices.com/newsite

Anyone any ideas.. i haven't

Cheers

Andy
Avi is offline  
Reply Like
Old 15 July 2005, 06:32 PM
  #2  
GaryK
Scooby Regular
 
GaryK's Avatar
 
Join Date: Sep 1999
Location: Bedfordshire
Posts: 4,037
Likes: 0
Received 0 Likes on 0 Posts
Default
Alot of those templates use images to create white space, personally I think it looks clean but this could be the culprit:

"<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=89></TD>"
GaryK is offline  
Reply Like
Old 15 July 2005, 07:35 PM
  #3  
NeilT
Former Sponsor
 
NeilT's Avatar
 
Join Date: Sep 2000
Location: www.scoobyworld.co.uk
Posts: 1,987
Likes: 0
Received 0 Likes on 0 Posts
Default
yes, I agree.

Looks like a good clean page to me, apart fom that and the 'Clening' typo
Neil
NeilT is offline  
Reply Like
Old 15 July 2005, 07:39 PM
  #4  
RichB
Scooby Regular
 
RichB's Avatar
 
Join Date: Apr 1999
Location: Bore Knee Muff
Posts: 3,666
Likes: 0
Received 0 Likes on 0 Posts
Default
one other problem, if you grow the window is that the image 'images/left_filler_300.jpg' has a one pixel white/grey line down the right which screws the background...

Those two left/right_filler images only need to be 1 pixel wide by the way. (if you have control over those)

If you put border=1 in your table you can see there are td tags all the way down the page to add that 1 pixel space... caused by <TD><IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=....... </TD>

Now if you create, in photoshop a 1x1 transparent background image and simply save it as a gif and call it shim.gif and then use that instead of space.gif you will see the background through it and all be be fine.
Last edited by RichB; 15 July 2005 at 07:42 PM.
RichB is offline  
Reply Like
Old 15 July 2005, 08:41 PM
  #5  
angrynorth
Scooby Regular
 
angrynorth's Avatar
 
Join Date: Oct 2004
Location: Was Manc now Camden
Posts: 2,689
Likes: 0
Received 0 Likes on 0 Posts
Default
This is going to sound bitter and twisted, so my apologies beforehand it's not personal. But there is a reason why people do this for a living, everytime I see one of those templates (you can spot them a mile off) I cringe. At the end of the day it's your mates business so I can see why you are doing it. But the world and his wife these days are webdesigners and it totally devalues what we do. On top of that general standards are slipping all over the web, download times are going up and usability is going down. All while people in business think that the average price for a website is £100 = not good for the genuine traders (since 1997 ).

Rant over, sorry.

So, where does your solution lie?

Firstly it looks to me like that is part of the design, if you look on the left hand side there is also one of these white lines, the template has it set it to a fixed position so it only shows up when the window is on a widescreen that will allow about 400px either side of the main body. So that is where I would concentrate to get over this problem.

2nd thing, although the code that Potatoshop puts out these days is OK, the source you have their is full of unnecessary repeats of spacers and cells.

So, I've quickly cleared out all of the vertical spacers and pasted the code below.

Give it a try, if it works then all you will have to do is cut off the 1px white space (to the right) on /newsite/images/left_filler_300.jpg but to be honest, without the images in place I've no idea whether it will explode once in a browser. It should rid you of the right hand white border anyway.

Code:
<HTML>
<HEAD>
<TITLE>Emmic</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0" height="802">
	<tr>
		<td width="33%" background="images/left_filler_300.jpg">&nbsp;</td>
		<td width="33%">
		<p align="center">
		<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="802">
	<TR>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=67 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=148 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=15 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=22 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=58 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=45 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=32 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=30 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=68 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=77 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=59 HEIGHT=1></TD>
		</TR>
	<TR>
		<TD COLSPAN=15>			<img src="images/index_01.jpg" width=780 height=322></TD>
		</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="images/cap01.jpg" WIDTH=253 HEIGHT=32></TD>
		<TD COLSPAN=7>
			<IMG SRC="images/cap02.jpg" WIDTH=272 HEIGHT=32></TD>
		<TD COLSPAN=5>
			<IMG SRC="images/cap03.jpg" WIDTH=255 HEIGHT=32></TD>
		</TR>
	<TR>
		<TD COLSPAN=3 ROWSPAN=10>
			<IMG SRC="images/index_05.jpg" WIDTH=253 HEIGHT=127></TD>
		<TD COLSPAN=7>
			<IMG SRC="images/bg02.jpg" WIDTH=272 HEIGHT=15></TD>
		<TD COLSPAN=5 ROWSPAN=2>
			<IMG SRC="images/bg03.jpg" WIDTH=255 HEIGHT=36></TD>
		</TR>
	<TR>
		<TD COLSPAN=4 ROWSPAN=2>
			<IMG SRC="images/bg02-09.jpg" WIDTH=187 HEIGHT=28></TD>
		<TD COLSPAN=2>
			<IMG SRC="images/index_09.jpg" WIDTH=53 HEIGHT=21></TD>
		<TD ROWSPAN=8>
			<IMG SRC="images/bg02-11.jpg" WIDTH=32 HEIGHT=105></TD>
		</TR>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC="images/bg02-12.jpg" WIDTH=53 HEIGHT=7></TD>
		<TD ROWSPAN=7>
			<IMG SRC="images/bg03-13.jpg" WIDTH=30 HEIGHT=84></TD>
		<TD ROWSPAN=3>
			<IMG SRC="images/login.jpg" WIDTH=68 HEIGHT=20></TD>
		<TD COLSPAN=3 ROWSPAN=4>
			<IMG SRC="images/bg03-15.jpg" WIDTH=157 HEIGHT=25></TD>
		</TR>
	<TR>
		<TD COLSPAN=2 ROWSPAN=6>
			<IMG SRC="images/bg02-16.jpg" WIDTH=37 HEIGHT=77></TD>
		<TD COLSPAN=3>
			<IMG SRC="images/index_16.jpg" WIDTH=195 HEIGHT=12></TD>
		<TD ROWSPAN=6>
			<IMG SRC="images/bg02-18.jpg" WIDTH=8 HEIGHT=77></TD>
		</TR>
	<TR>
		<TD COLSPAN=3 ROWSPAN=5>
			<IMG SRC="images/bg02-19.jpg" WIDTH=195 HEIGHT=65></TD>
		</TR>
	<TR>
		<TD>
			<IMG SRC="images/bg03-20.jpg" WIDTH=68 HEIGHT=5></TD>
		</TR>
	<TR>
		<TD>
			<IMG SRC="images/password.jpg" WIDTH=68 HEIGHT=20></TD>
		<TD ROWSPAN=3>
			<IMG SRC="images/bg03-22.jpg" WIDTH=77 HEIGHT=59></TD>
		<TD ROWSPAN=2>
			<IMG SRC="images/enter.jpg" WIDTH=21 HEIGHT=21></TD>
		<TD ROWSPAN=3>
			<IMG SRC="images/bg03-24.jpg" WIDTH=59 HEIGHT=59></TD>
		</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="images/bg03-25.jpg" WIDTH=68 HEIGHT=39></TD>
		</TR>
	<TR>
		<TD>
			<IMG SRC="images/bg03-26.jpg" WIDTH=21 HEIGHT=38></TD>
		</TR>
	<TR>
		<TD COLSPAN=12 ROWSPAN=2>
			<IMG SRC="images/c04.jpg" WIDTH=527 HEIGHT=16></TD>
		</TR>
	<TR>
		<TD ROWSPAN=5>
			<IMG SRC="images/index_27.jpg" WIDTH=38 HEIGHT=20></TD>
		<TD ROWSPAN=4>
			<IMG SRC="images/view.jpg" WIDTH=67 HEIGHT=15></TD>
		<TD ROWSPAN=5>
			<IMG SRC="images/index_29.jpg" WIDTH=148 HEIGHT=20></TD>
		</TR>
	<TR>
		<TD COLSPAN=12>
			<IMG SRC="images/index_30.jpg" WIDTH=527 HEIGHT=1></TD>
		</TR>
	<TR>
		<TD COLSPAN=12>
			<IMG SRC="images/bg04.jpg" WIDTH=527 HEIGHT=1></TD>
		</TR>
	<TR>
		<TD COLSPAN=12>
			<IMG SRC="images/index_32.jpg" WIDTH=527 HEIGHT=4></TD>
		</TR>
	<TR>
		<TD>
			<IMG SRC="images/index_33.jpg" WIDTH=67 HEIGHT=5></TD>
		<TD COLSPAN=12 ROWSPAN=4>
			<IMG SRC="images/cap04.jpg" WIDTH=527 HEIGHT=27></TD>
		</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="images/bg01.jpg" WIDTH=253 HEIGHT=1></TD>
		</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="images/index_36.jpg" WIDTH=253 HEIGHT=9></TD>
		</TR>
	<TR>
		<TD COLSPAN=3 ROWSPAN=2>
			<IMG SRC="images/pic01.jpg" WIDTH=253 HEIGHT=48></TD>
		</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="images/index_38.jpg" WIDTH=15 HEIGHT=190></TD>
		<TD COLSPAN=2 ROWSPAN=2>
			<IMG SRC="images/pic02.jpg" WIDTH=114 HEIGHT=190></TD>
		<TD COLSPAN=9 ROWSPAN=2>
			<IMG SRC="images/index_40.jpg" WIDTH=398 HEIGHT=190></TD>
		</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="images/index_41.jpg" WIDTH=253 HEIGHT=154></TD>
		</TR>
	<TR>
		<TD COLSPAN=15>
			<IMG SRC="images/footer.jpg" WIDTH=780 HEIGHT=89></TD>
		</TR>
</TABLE>
		</td>
		<td width="33%" background="images/right_filler_300.jpg">&nbsp;</td>
	</tr>
	</table>
<!-- ImageReady Slices (7-017a.psd) -->
<!-- End ImageReady Slices -->
</BODY>
</HTML>
angrynorth is offline  
Reply Like
Old 15 July 2005, 09:09 PM
  #6  
angrynorth
Scooby Regular
 
angrynorth's Avatar
 
Join Date: Oct 2004
Location: Was Manc now Camden
Posts: 2,689
Likes: 0
Received 0 Likes on 0 Posts
Default
Hmm I see that Rich pointed out the same couple of things. Didn't see that before I posted.

One thing I would suggest though is not to use a 1px background image to repeat across the page as the render time of 1024 (average screen width) vertical 1px spacers is about the same as the load time + render of 4 300px wide background images and won't put as much load on the users machine.
angrynorth is offline  
Reply Like
Old 16 July 2005, 02:44 AM
  #7  
RichB
Scooby Regular
 
RichB's Avatar
 
Join Date: Apr 1999
Location: Bore Knee Muff
Posts: 3,666
Likes: 0
Received 0 Likes on 0 Posts
Default
Hmmm, interesting point re the bg image....
Surely a xx byte gif is quicker to load than xxx byte gif....
Can you point me in the direction of any evidence to support that theory?
Not trying to argue - just genuninely interested...
RichB is offline  
Reply Like

Trending Topics

Old 16 July 2005, 05:31 PM
  #8  
angrynorth
Scooby Regular
 
angrynorth's Avatar
 
Join Date: Oct 2004
Location: Was Manc now Camden
Posts: 2,689
Likes: 0
Received 0 Likes on 0 Posts
Default
Hi Rich

Obviously a 1px wide image will download faster than a larger one, the problem lies with the actual screen render time and graphics card load. Most modern day PC's will handle the possible 1000's of background repeats with relative ease but older machines tend to suffer badly. Devices such as phones and PDA's also struggle to control pages setup in this way because of the demands on the video processors.

There is quite a lot on the web (Google background image repeat performance and so on) about it and while it is a contentious issue, most of the top developers will go with a minimum of about 40px wide. Personally I use a minimum of 200px for repeated images and optimise like hell
angrynorth is offline  
Reply Like
Related Topics
Thread
Thread Starter
Forum
Replies
Last Post
hatches..there growing on me
Rbon91
ScoobyNet General
49
21 November 2018 03:23 PM
H&S or Cobra
powerwrx
ScoobyNet General
17
04 November 2015 07:18 PM
Funny way to fit a strut brace
south_scoob
ScoobyNet General
22
03 October 2015 01:05 PM
5 ltrs Millers CFS £37.49 | 20% off Pro Boost
oilman
Trader Announcements
15
01 October 2015 11:55 AM
To buy or not to buy
Benrowe727
ScoobyNet General
7
28 September 2015 07:05 AM
Back to Subforum
Computer & Technology Related
View Next Unread
BF2!!




Advanced Search
Quick Reply: Web designers - help me


Reply Closed Thread Share
Forum Jump

All times are GMT +1. The time now is 09:23 PM.