Link to home
Start Free TrialLog in
Avatar of Nico2011
Nico2011Flag for United Kingdom of Great Britain and Northern Ireland

asked on

Div tag position wrong

Hello,

I have this page which, when I look at the HTML in DW looks fine, however in my browser it has the image to the left - and I don;t seem to be able to fix it - it is driving me nuts now...

Here is the HTML: 
<!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:100%; text-align:center; padding:0px" cellpadding="0" cellspacing="0">
<tr><td style="text-align:center" align="center">
<table style="width:980px; text-align:center; padding:0px" cellpadding="0" cellspacing="0" class="tableshadow-sides">
<tr>
<td colspan="2">
<div id="picture">
<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>
</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" 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

Help much appreciated - thanks in advance!
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Montoya
Montoya
you have

left:0
right: 0

have you tried margin: auto;  ?
Avatar of Nico2011
Nico2011
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Thanks - worked great.  Need to get rid of the white space between the header and the pic now - will post a second question...!
Avatar of Montoya
Montoya
hmm.. I also said margin auto  :)

glad it's resolved for you.
Avatar of Rob
Rob
Flag of Australia image
lammontoya,

You said margin auto but to what element?  Don't give the author a hard time for accepting the first comment.
Avatar of Nico2011
Nico2011
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Thanks - sorry - saw the first answer and after yours...!  Perhaps you can fix the next question for me?  Space between page header and image - just writing it...!
Avatar of Nico2011
Nico2011
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Thank you both :-)
Avatar of Montoya
Montoya
Rob, I didnt give anyone a hard time.  I even said I was glad it was resolved.
Avatar of Montoya
Montoya
Nico, my apologies if it came across that way  :)
I don't even need points, just trying to help.
Avatar of Nico2011
Nico2011
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

I am sure everyone has good intentions here - I really appreciated the help!