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

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

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!
0
Nico2011
Asked:
Nico2011
  • 4
  • 4
  • 3
1 Solution
 
RobOwner (Aidellio)Commented:
On your tables with width 980px, just set the margin to be

margin: 0px auto;
0
 
MontoyaProcess Improvement MgrCommented:
you have

left:0
right: 0

have you tried margin: auto;  ?
0
 
RobOwner (Aidellio)Commented:
screenshot of it centred
0
Technology Partners: 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!

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

glad it's resolved for you.
0
 
RobOwner (Aidellio)Commented:
lammontoya,

You said margin auto but to what element?  Don't give the author a hard time for accepting the first comment.
0
 
Nico2011Author Commented:
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...!
0
 
Nico2011Author Commented:
Thank you both :-)
0
 
MontoyaProcess Improvement MgrCommented:
Rob, I didnt give anyone a hard time.  I even said I was glad it was resolved.
0
 
MontoyaProcess Improvement MgrCommented:
Nico, my apologies if it came across that way  :)
I don't even need points, just trying to help.
0
 
Nico2011Author Commented:
I am sure everyone has good intentions here - I really appreciated the help!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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