[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

Space between page header and image

Hello,

I have a page with a page header and an image below - there is an annoying white space which I'd like to get rid of...

HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/ico" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VillasDirect.com | Holiday Rentals in Finland in Finland</title>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="Keywords" content="holiday rentals, villa rental, apartment rental, cottage rental, chalet rental, holiday lettings, accommodation, home away, holidays, cheap holidays, family holiday accommodation, holiday homes, book direct" />
<meta name="Description" content="Best Prices &amp; No Booking Fee. 79,906 verified holiday properties for Rent Worldwide. Rent your home away with the owner direct." />
<meta name="revisit-after" content="2 days" />
<meta name="Distribution" content="Global" />
<meta name="Rating" content="General" />
<meta name="copyright" content="(c)Copyright 2014 VillasDirect Limited. All rights reserved." />
<meta name="rights" content="Copyright by VillasDirect Limited. Some content and links are trademarks and/or copyrights by others and property of respective owners" />
<meta name="category" content="Top: Recreation: Travel: Rental: Real Estate: Rental" /> 
<meta http-equiv="expires" content="never" />
<meta name="content-language" content="EN" />
<meta name="ROBOTS" content="NOYDIR" />
<meta name="ROBOTS" content="NOODP" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="en" />
<meta name="msvalidate.01" content="93A2BBBC7A9A9B5F3849AE706E870F6C" />
<meta name="google-translate-customization" content="1bb199f66d09b701-f8d02e4a8a893b7b-g2c974e446001e019-14"></meta>

<meta itemprop="rating" content="4" />
<meta itemprop="ratingValue" content="4">
<script type="text/javascript" src="//use.typekit.net/svp8evc.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<link href="villasdirect.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-decoration:none;
}
#containerhead
{
    height:30px;
    width:650px;
    position:relative;
}
#transhead
{
    height:30px;
    width:650px;
    position:relative;
    left:53px;
    top:40px;
	width:650px;
	background-color:#FFFFFF;
	filter:alpha(opacity=60); 
	opacity:.6;
}
#texthead
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:27px;
	font-weight:bold;
    font-family:futura-pt;
	text-align:right;
    left:53px;
    top:-20px;
	width:650px;
	font-shadow: #FFF, 0px, 0.3px, 0.3px;
	-webkit-text-stroke: 0.3px;
}
</style>

<script>
	function ChangePic(a, b)
    {
        document.getElementById(b).src = a;
    }
</script>
<script src="js/googleanalytics.js"></script>
<!--SEARCH BAR REQS-->
<link href="http://www.villasdirect.com/dash/Content/themes/base/jquery-ui.css" rel="stylesheet">
<script src="http://www.villasdirect.com/dash/Scripts/jquery-2.0.3.js"></script>
<script src="http://www.villasdirect.com/dash/Scripts/jquery-ui-1.10.3.js"></script>
<link href="http://www.villasdirect.com/dash/Content/VillasDirectWidgets.css" rel="stylesheet">
<script src="http://www.villasdirect.com/dash/Scripts/VillasDirectWidgets.js"></script>
<script src="js/villas-cookies.js"></script>
<!--END SEARCH BAR REQS-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="JSCal2/src/js/jscal2.js"></script>
<script src="JSCal2/src/js/lang/en.js"></script>
<link rel="stylesheet" type="text/css" href="JSCal2/src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="JSCal2/src/css/border-radius.css" />
    
<!-- Start Alexa Certify Javascript -->
<script type="text/javascript">
_atrk_opts = { atrk_acct:"5+v5i1acVE008Z", domain:"villasdirect.com",dynamic: true};
(function() { var as = document.createElement('script'); as.type = 'text/javascript'; as.async = true; as.src = "https://d31qbv1cthcecs.cloudfront.net/atrk.js"; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as, s); })();
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("input[name='hideshow']").click(function() {        
         jQuery('#content').toggle('show');
    });
});
</script>

<noscript><img src="https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=5+v5i1acVE008Z" style="display:none" height="1" width="1" alt="" /></noscript>
<!-- End Alexa Certify Javascript -->
   
<!--include file="deps/pageloading.asp"-->
<!--<table style="width:100%; margin-left:auto; margin-right:auto; padding:0px" class="tableshadow-sides" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%; height:80px; text-align:left; vertical-align:top" colspan="3">-->
<table style="width:100%; padding:0px" cellpadding="0" cellspacing="0"><tr><td style="text-align:center">

<table border="0" align="center" cellpadding="0" cellspacing="0" class="tableshadow-sides" style="background-repeat:no-repeat; background-position:right; width:980px; margin-left:auto; margin-right:auto; padding:0px; background-image:url(images/headbg-small.jpg)">
  <tr>
  <td width="27%" align="left" valign="top">
<a href="http://www.villasdirect.com"><img src="images/villasdirect-logo.gif" style="padding-top:15px; padding-left:25px; border:0px"/></a>
  </td>      
  <td width="73%" height="80" valign="top" align="right">
	<!--include virtual="topmenu-new.asp"-->
  </td>
  </tr>
</table>
</td></tr>
</table>


<script src="sticky/jquery.sticky.js"></script>

<script src="js/villas-cookies.js"></script>

<script>
jQuery(function($) {
      $("#searchbar").sticky({topSpacing:0});
});
</script>

<style>
#picture
{
    height:356px;
    width:980px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;    
    color:#FFFFFF;
    font-size:50px;
	font-weight:bold;
    font-family:futura-pt;
	text-align:right;
    left:-590px;
    top:235px;
	width:800px;
}
</style>
<table style="width:980px; text-align:center; padding:0px; margin: 0px auto; margin-top:0px" cellpadding="0" cellspacing="0" class="tableshadow-sides">
<tr>
<td colspan="2">
<div id="picture" style="vertical-align:top">
<img src="images/Helsinki,-Finland.jpg" alt="Photo of Photo of Finland" id="image" title="Photo of Finland"/>
<p id="text">
FINLAND
</p>
</div>    
</td>
</tr>
</table>
<!--<tr>
<td style="width:980px; height:78px; text-align:left; vertical-align:top; background:url(images/index_search_bkg_ns.jpg" colspan="2">    
<div id="searchbar" style="z-index:1100; height:43px; background:url(images/index_search_bkg_ns.jpg); vertical-align:top">
<!--include file="deps/search-bar-new.asp"-->
<!--</div></td>
</tr>-->

<tr>
<td colspan="10"><table style="width:980px; padding-left:15px; margin:0px auto" border="0"><tr><td align="left" colspan="3" class="indexspecialtitles"><span class="indexspecialtitleslightblue">REGIONS IN </span><span class="indexspecialtitles">FINLAND</span></td></tr><tr><td align="left" style="width:16%;" class="parablue">Area around Oulu, Kajaani, Kuu (1)</td><td align="left" style="width:16%;" class="parablue">Etela-Savo (189)</td><td align="left" style="width:16%;" class="parablue">Hame Pirkanmaa (196)</td><td align="left" style="width:16%;" class="parablue">Keski-Suomi (154)</td><td align="left" style="width:16%;" class="parablue">Kymenlaakso Etela-Karjala (36)</td><td align="left" style="width:16%;" class="parablue">Lappi (292)</td></tr><tr><td align="left" style="width:16%;" class="parablue">Pohjanmaa (431)</td><td align="left" style="width:16%;" class="parablue">Pohjois-Karjala (49)</td><td align="left" style="width:16%;" class="parablue">Pohjois-Pohjanmaa Kainuu (276)</td><td align="left" style="width:16%;" class="parablue">Pohjois-Savo (196)</td><td align="left" style="width:16%;" class="parablue">Uusimaa (44)</td><td align="left" style="width:16%;" class="parablue">Varsinais-Suomi Satakunta (98)</td></tr><tr><td colspan="3"></td></tr></table></td>
</tr>
</table><br />
<!--Include File="deps/locate_images.asp"-->
<!--include file="top-destinations-info-panel.asp"-->

<DIV id="holdpage" style="position:fixed; font-family:arial; font-size:29; left:0px; top:0px; background-color:white; layer-background-color:white; height:1000px; width:100%; z-index:12000; display:none">
<TABLE style="width:100%; height:600px;" align="center"><TR><TD align="center" valign="middle"><BR>&nbsp;<BR><B><div id="pageholdingtext" style="font-family:arial; font-size:20;">Loading - Please Wait...</div></B><BR>&nbsp;<BR><img src="../images/loading.gif"></TD></TR><tr><td style="vertical-align:middle; text-align:center; height:500"><img src="../images/holding/2.jpg"></td></tr></TABLE>
</DIV>
<!--include file="footer.asp"-->

Open in new window


And the page can be viewed HERE

THANKS AGAIN :-)
0
Nico2011
Asked:
Nico2011
  • 7
  • 4
1 Solution
 
RobOwner (Aidellio)Commented:
Nico2011,

i would strongly recommend having a look at bootstrap: www.getbootstrap.com.  It takes care of all the layout for you and you wouldn't have this trouble.

In this case it's got to do with the height of your #picture element.  Removing that seemed to do the trick.
0
 
Nico2011Author Commented:
Thanks Rob - I am learning Bootstrap, but I need to get this done quickly so re-used some of my code from other pages.  we are going to re-code the whole site with Bootstrap as soon as we can!
0
 
Nico2011Author Commented:
that worked, but for some really bizarre reason the region names disappeared and the table class that gives the shadows to the sides also disappeared!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
RobOwner (Aidellio)Commented:
div#picture needs to have its height set to 356px as the absolute positioning of the image means that the element doesn't have a height.
0
 
Nico2011Author Commented:
Just tried that - submitted a new question - still won't show the table shadow or the list at the bottom...! Driving me nuts :-)
0
 
Nico2011Author Commented:
got it - will close the other question - was because I added position absolute to the div... duh!

Thanks again for your help!
0
 
Nico2011Author Commented:
Nope... REALLY sorry - as soon as I add the height back in, I get the white line. Take it out and I lose the table shadow and bottom list...
0
 
RobOwner (Aidellio)Commented:
bootstrap version for you: http://jsbin.com/raciwi/1
0
 
Nico2011Author Commented:
thanks but I will live with the white line for now...!  That looks like it will need a lot more work - no offense!
0
 
Nico2011Author Commented:
did a "cereal box & sticky tape" fix - top:-10px
0
 
RobOwner (Aidellio)Commented:
hadn't finished it yet ;)

http://jsbin.com/raciwi/1
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now