Nico2011
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:
And the page can be viewed HERE
Help much appreciated - thanks in advance!
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 & 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> <BR><B><div id="pageholdingtext" style="font-family:arial; font-size:20;">Loading - Please Wait...</div></B><BR> <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"-->
And the page can be viewed HERE
Help much appreciated - thanks in advance!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks - worked great. Need to get rid of the white space between the header and the pic now - will post a second question...!
hmm.. I also said margin auto :)
glad it's resolved for you.
glad it's resolved for you.
lammontoya,
You said margin auto but to what element? Don't give the author a hard time for accepting the first comment.
You said margin auto but to what element? Don't give the author a hard time for accepting the first comment.
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...!
ASKER
Thank you both :-)
Rob, I didnt give anyone a hard time. I even said I was glad it was resolved.
Nico, my apologies if it came across that way :)
I don't even need points, just trying to help.
I don't even need points, just trying to help.
ASKER
I am sure everyone has good intentions here - I really appreciated the help!
left:0
right: 0
have you tried margin: auto; ?