The Arcive of Official vBulletin Modifications Site.

mattselley · #1 10-16-2007, 03:04 PM

In my forum, i have created a header graphic that 'stretches' the page width, no matter how wide the viewers screen is. This is using three seperate images, a left img, right img and a center img 1px wide that is set to 100% to fill the 'gap between the two. This all works very well...

untill now...

I have changed the left img, to include two links that i have created using slices with fireworks 2004. I have exported the html as 'single table - no spaces' and put this in with my other two images. Now when it is viewed in a browser there is a strange whitespace between the center img and right img about 4px wide.

I have played around with the code and just cant remove it, It only appears when the new img with the slices are added to the header, so im assumming its something to do with the slices.

Any help or ideas would be great

Xipher · #2 10-16-2007, 11:23 PM

Its the way that you sliced your image. Those gaps are called "spacers" and they are a designer's worst enemy. The only way to actually get rid of them is to manually recode your images, or go back and reslice the image. To avoid spacers in the future, make sure that your slices are horizontally even. Also preview your sliced image in your browser, and it will show the image, along with the html code. If the code has "spacer.gif" anywhere, then odds are, it will produce gaps.

I hope this helps you.

mattselley · #3 10-17-2007, 02:23 PM

Thanks for the reply, i have checked everything and there are no spacers.gifs. The file has been exported from fireworks as a single table - no spacers and the two slices are horizontally even.

Here is the code, everything is uploaded, so should be visible in a browser.

Code:

[<html>
<head>
<title>tab.jpg</title>
<meta http-equiv="Content-Type" content="text/html;">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target.  Created Mon Oct 15 13:50:02 GMT+0100 (GMT Daylight Time) 2007-->
</head>
<body bgcolor="#f5f5ff">
<table border="0" cellpadding="0" cellspacing="0" width="600" align="left" >
<tr>
<td rowspan="2"><img name="tab_r1_c1" src="http://www.itsalifestyle.co.uk/header/
tab_r1_c1.jpg" width="200" height="89" border="0" alt=""></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="400">
<tr>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="200">
<!-- SLICE 1 -->
<tr>
<td><a href="http://www.itsalifestyle-toybox.co.uk" target="_self"><img name="tab_r1_c2" src="http://www.itsalifestyle.co.uk/header/
tab_r1_c2.jpg" width="200" height="40" border="0" alt=""></a></td></tr>
<tr>
<td><img name="tab_r3_c2" src="http://www.itsalifestyle.co.uk/header/
tab_r3_c2.jpg" width="200" height="1" border="0" alt=""></td></tr></table></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td><img name="tab_r1_c3" src="http://www.itsalifestyle.co.uk/header/
tab_r1_c3.jpg" width="200" height="1" border="0" alt=""></td></tr>
<!-- SLICE 2 -->
<tr>
<td><a href="http://www.itsalifestyle-movies.co.uk" target="_blank"><img name="tab_r2_c3" src="http://www.itsalifestyle.co.uk/header/
tab_r2_c3.jpg" width="200" height="40" border="0" alt=""></a></td></tr></table></td></tr></table></td></tr>
<tr>
<td><img name="tab_r4_c2" src="http://www.itsalifestyle.co.uk/header/
tab_r4_c2.jpg" width="400" height="48" border="0" alt=""></td></tr></table>
<!--  CODE FOR CENTER IMAGE AND RIGHT IMAGE -->
<tr>
<table border="0" cellpadding="0" cellspacing="0"  align="left">
<td height="89" width="100%" style="background-image: url(http://www.itsalifestyle.co.uk/header/tabcenter.jpg);" align="left" border="0"/></td>
<td width="350" height="89" align="left" border="0" valign="top" ><img src="http://www.itsalifestyle.co.uk/header/tabright.jpg" width="350" height="89" border="0" align="left" ></td></table></tr>

</body>
</html>

Analogpoint · #4 10-17-2007, 02:49 PM

PM me with your URL and I'll take a look.

mattselley · #5 10-17-2007, 10:37 PM

it seems that the 'problem' only exsists in IE7 but its ok in firefox.

has anyone come across this before?

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04197 seconds Memory Usage 2,222KB Queries Executed 12 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (1)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (5)post_thanks_box (5)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (5)post_thanks_postbit_info (5)postbit (1)postbit_attachment (5)postbit_onlinestatus (5)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!