Kyle Undefined
2011-12-12 18:22:28
Ok, so, I am working on a landing page and I've noticed that the Windows task bar is messing with the page elements.
Here is a screen shot of the issue:
http://img33.imageshack.us/img33/2232/90986578.png (Linked due to image size)
Here is the HTML code I'm using. The up to standard-ness of the code doesn't really matter since it's just a landing page.
I've never come across this before and I'm truly stumped. Any suggestions?
Also, the reason for all the "position:absolute;"s is because these use to be huge images with image map links. I converted them to HTML to make it easier to update.
Here is a screen shot of the issue:
http://img33.imageshack.us/img33/2232/90986578.png (Linked due to image size)
Here is the HTML code I'm using. The up to standard-ness of the code doesn't really matter since it's just a landing page.
<!DOCTYPE html>
<html>
<head>
<title>Introducing All-New VIPRE Internet Security 2012</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul#nav li a").click(function(){
$("#nav li a").each(function(idx, item){
$("#div" + $(this).attr("href")).hide();
$('#nav li a').removeClass("active");
});
$("#div" + $(this).attr("href")).fadeIn(750);
$(this).addClass("active");
return false;
});
});
</script>
<style>
@font-face {
font-family: 'MyriadProBold';
src: url('fonts/myriadpro-bold-webfont.eot');
src: url('fonts/myriadpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadpro-bold-webfont.woff') format('woff'),
url('fonts/myriadpro-bold-webfont.ttf') format('truetype'),
url('fonts/myriadpro-bold-webfont.svg#MyriadProBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MyriadProRegular';
src: url('fonts/myriadpro-reg-webfont.eot');
src: url('fonts/myriadpro-reg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myriadpro-reg-webfont.woff') format('woff'),
url('fonts/myriadpro-reg-webfont.ttf') format('truetype'),
url('fonts/myriadpro-reg-webfont.svg#MyriadProRegular') format('svg');
font-weight: normal;
font-style: normal;
}
html{
overflow-y: scroll;
}
body{
margin: 0px auto;
padding: 0;
width: 1024px;
font: 75%/120% Arial, Helvetica, sans-serif;
color:#505050;
font-family: 'MyriadProRegular';
}
a:link, a:visited{
color: #0079c2;
text-decoration: none;
}
a:hover, a:active{
color: #0079c2;
text-decoration: underline;
}
/* Nav CSS */
#nav{
height:100px;
margin:-2px auto;
padding:0;
position:relative;
}
#nav li{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:39px;
}
#nav li, #nav a{
display:block;
color:#6d6e6e;
font-size:18px;
padding-left:1px;
padding-top:2px;
}
#nav li a:hover, #nav li a.active{
text-decoration: none;
color:#3399cc;
font-size:18px;
}
#nav #TryIt{
color:#fff;
text-shadow:1px 1px 1px #333;
width:190px;
float:right;
margin-right:70px;
height:55px;
margin-top:41px;
text-align:center;
font-family: 'MyriadProBold';
font-size:16px;
}
#nav #TryIt:hover{
text-decoration:none;
}
#AllNew{
left:79px;
}
#Compare{
left:333px;
}
#Why{
left:520px;
}
#TryIt{
left:750px;
}
#divImages a:hover{
text-decoration:none;
}
/* Footer CSS */
#footerWrapper{
background:url(http://www.vipreantivirus.com/img2012/background.jpg) repeat-y;
margin:0 auto;
}
#footerLeftLinksWrapper{
float:left;
font-size:0.8em;
padding-top:5px;
}
#footerRightLinksWrapper{
float:right;
font-size:0.8em;
padding-top:5px;
}
.footerGFILogo{
width:90px;
vertical-align:top;
float:left;
}
.footerCopyText{
clear:right;
color:#a0a0a0;
}
</style>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-575114-13']);
_gaq.push(['_setDomainName', '.vipreantivirus.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div style="width:100%;height:100%;">
<div style="position:relative;">
<a href="http://www.gfi.com/" title="GFI.com" style="position:absolute;right:37px;width:80px;height:75px;text-indent:-10000px;">GFI.com</a>
<img src="images/header.jpg" border="0">
<div style="background:url(images/banner.jpg);height:450px;margin-top:-3px;">
<div style="position:absolute;right:106px;bottom:362px;">
<a href="http://www.vipreantivirus.com/vipre-internet-security/download-now/" style="text-decoration:none;" alt="Try VIPRE Free" title="Try VIPRE Free" onClick="_gaq.push(['_trackEvent', 'Download Now', 'VIS', '/promos/vipre-5/speed-matters/flames/index.cfm']);"><img src="images/button.png" border="0"><label style="position:absolute;color:#fff;font-family:'MyriadProBold';font-size:16px;right:10px;margin-top:9px;text-shadow:1px 1px 1px #333;cursor:pointer;">GRATIS TESTEN!</label></a>
</div>
<div style="position:absolute;right:50px;bottom:200px;color:#fff;font-family:'MyriadProBold';font-size:33px;text-align:right;">
GESCHWINDIGKEIT<br><br><br><br>
<label style="font-size:70px;">ZÄHLT</label>
</div>
<div style="position:absolute;right:35px;bottom:100px;color:#ffcc00;font-family:'MyriadProBold';font-size:23px;text-align:center;">
Das komplett neue<br><br>
VIPRE Internet Security 2012
</div>
<div style="position:absolute;right:50px;bottom:75px;color:#fff;font-family:'MyriadProRegular';font-size:10spx;text-align:center;">
Effizienter Virenschutz – schont die PC-Ressourcen
</div>
</div>
</div>
<div style="position:relative;margin-top:2px;">
<div style="background:url(images/nav.jpg);height:100px;">
<ul id="nav">
<li id="AllNew"><a href="AllNew" class="active" title="All New VIPRE For 2012!">Zukunftsweisende Technologie</a></li>
<li id="Compare"><a href="Compare" title="Compare VIPRE Solutions!">Wettbewerbsvergleich</a></li>
<li id="Why"><a href="Why" title="Why VIPRE's Speed Matters">Gründe für VIPRE</a></li>
<a id="TryIt" href="http://www.vipreantivirus.com/vipre-internet-security/download-now/" alt="Try VIPRE Internet Security 2012 Free!" title="Try VIPRE Internet Security 2012 Free!" onClick="_gaq.push(['_trackEvent', 'Download Now', 'VIS', '/promos/vipre-5/speed-matters/flames/index.cfm']);">GRATIS TESTEN!</a>
</ul>
</div>
</div>
<div style="height:350px;">
<div id="divImages">
<div id="divAllNew" style="display:inline;">
<div style="position:absolute;right:350px;bottom:200px;color:#3399cc;font-family:'MyriadProRegular';font-size:33px;">
Zukunftsweisende Technologie
</div>
<div style="position:absolute;right:340px;bottom:100px;color:#6d6e6e;font-family:'MyriadProRegular';font-size:16px;width:440px;">
VIPRE Antivirus bietet kompakten, effizienten Virenschutz – ohne die Leistung Ihres PC zu beeinträchtigen. Zukunftsweisende Technologie wehrt alle Arten von Malware ab, wie Viren, Adware, Spyware, Würmer, Rootkits u.*v.*m.
</div>
<div style="position:absolute;right:350px;bottom:50px;font-family:'MyriadProRegular';font-size:15px;">
<a href="http://www.vipreantivirus.com/vipre-internet-security/download-now/" style="color:#3399cc;"><font size="2">>></font> Laden Sie VIPRE gratis herunter, und überzeugen Sie sich selbst</a>
</div>
<img src="images/all-new.jpg" usemap="#links" />
</div>
<div id="divCompare" style="display:none;">
<div style="position:absolute;left:370px;bottom:225px;color:#dbe3e5;font-family:'MyriadProRegular';font-size:33px;">
Wettbewerbsvergleich
</div>
<div style="position:absolute;left:370px;bottom:125px;color:#dbe3e5;font-family:'MyriadProRegular';font-size:16px;width:440px;">
VIPRE vereint Viren- und Spyware-Schutz in einem einzigen, leistungsstarken und ressourcenschonenden Tool. Im Gegensatz zu anderen Antiviren-Programmen läuft VIPRE unbemerkt im Hintergrund!
</div>
<div style="position:absolute;left:370px;bottom:75px;font-family:'MyriadProRegular';font-size:15px;">
<a href="http://www.vipreantivirus.com/vipre-internet-security/download-now/" style="color:#99cbfc;"><font size="2">>></font> Informieren Sie sich über die neuen Funktionen von VIPRE</a>
</div>
<div style="position:absolute;right:350px;bottom:45px;">
<img src="images/vipre-comparison-matrix_DE.png" width="375" />
</div>
<a href="http://www.vipreantivirus.com/vipre-internet-security/download-now/" style="text-decoration:none;position:absolute;right:355px;bottom:27px;" alt="Download VIPRE Internet Security" title="Download VIPRE Internet Security" onClick="_gaq.push(['_trackEvent', 'Download Now', 'VIS', '/promos/vipre-5/speed-matters/flames/index.cfm']);"><img src="images/button.png" border="0" width="100px"><label style="position:absolute;color:#fff;font-family:'MyriadProBold';font-size:11px;right:3px;margin-top:5px;text-shadow:1px 1px 1px #333;cursor:pointer;">HERUNTERLADEN!</label></a>
<a href="http://www.vipreantivirus.com/vipre-antivirus/download-now/" style="text-decoration:none;position:absolute;right:465px;bottom:27px;" alt="Download VIPRE Antivirus" title="Download VIPRE Antivirus" onClick="_gaq.push(['_trackEvent', 'Download Now', 'VPC', '/promos/vipre-5/speed-matters/flames/index.cfm']);"><img src="images/button.png" border="0" width="100px"><label style="position:absolute;color:#fff;font-family:'MyriadProBold';font-size:11px;right:3px;margin-top:5px;text-shadow:1px 1px 1px #333;cursor:pointer;">HERUNTERLADEN!</label></a>
<img src="images/compare-flame.jpg" usemap="#links2" />
</div>
<div id="divWhy" style="display:none;">
<div style="position:absolute;right:350px;bottom:225px;color:#3399cc;font-family:'MyriadProRegular';font-size:33px;">
Gründe für VIPRE
</div>
<div style="position:absolute;right:340px;bottom:100px;color:#6d6e6e;font-family:'MyriadProRegular';font-size:16px;width:440px;">
VIPRE liefert eine weltweit mit Bestnoten ausgezeichnete Malware-Erkennung. Alle Arten von Gefahren für die PC-Sicherheit werden zuverlässig identifiziert und abgewehrt. VIPRE hat die ICSA Labs-, West Coast Labs- und AV-Test.org-Zertifizierung erhalten und wurde mit mehreren VB100-Auszeichnungen für die Erkennung von Viren prämiert.
</div>
<div style="position:absolute;right:350px;bottom:50px;font-family:'MyriadProRegular';font-size:15px;">
<a href="http://www.vipreantivirus.com/vipre-internet-security/download-now/" style="color:#3399cc;"><font size="2">>></font> Laden Sie VIPRE gratis herunter, und überzeugen Sie sich selbst</a>
</div>
<img src="images/why.jpg" usemap="#links3" />
<map name="links3">
<area shape="rect" coords="588,276 856,287" href="http://www.vipreantivirus.com/vipre-internet-security/download-now/" alt="Try VIPRE Internet Security 2012 Free!" title="Try VIPRE Internet Security 2012 FREE!" onClick="_gaq.push(['_trackEvent', 'Download Now', 'VIS', '/promos/vipre-5/speed-matters/flames/index.cfm']);" />
</map>
</div>
</div>
</div>
<div id="footerWrapper">
<div style="width:100%;">
<div class="footerGFILogo"><a href='http://www.gfi.com' target='_blank'><img src='http://www.vipreantivirus.com/img2012/gfi-footer-logo.png' style="width:63px;height:29px;" vspace='5' alt='GFI Software' title='GFI Software' /></a></div>
<div id="footerLeftLinksWrapper">
<a href='http://www.vipreantivirus.com/'>Home</a> |
<a href='http://www.vipreantivirus.com/Antivirus-Trial/'>Free Trial</a> |
<a href='http://www.vipreantivirus.com/Best-Antivirus/'>Why VIPRE</a> |
<a href='http://kb.gfi.com/supportviprehome' target='_blank'>Support</a> |
<a href='http://www.vipreantivirus.com/Affiliates/'>Affiliates</a> |
<a href='http://malwareprotectioncenter.com/' target='_blank'>Malware Protection Center</a> |
<a href='http://www.gfi.com/business-antivirus-software' target='_blank'>Business Edition</a>
<div class="footerCopyText">GFI Software, 33 North Garden Avenue, Suite 1200, Clearwater, Florida USA 33755 | Int'l: 1-919-379-3397 | Toll Free: 888-688-8457 (US/Canada) | Email: vipresales@gfi.com</div>
</div>
<div id="footerRightLinksWrapper">
<a href='http://www.vipreantivirus.com/'>English</a> |
<a href='http://www.vipreantivirus.com/IT/'>Italian</a> |
<a href='http://www.vipreantivirus.com/DE/'>German</a> |
<a href='http://www.facebook.com/groups/81966283670' target='_blank'>Facebook</a> |
<a href='http://twitter.com/vipresecurity' target='_blank'>Twitter</a> |
<a href='http://malwareprotectioncenter.com/feed/'>RSS</a>
</div>
</div>
</div>
</div>
</body>
</html>
I've never come across this before and I'm truly stumped. Any suggestions?
Also, the reason for all the "position:absolute;"s is because these use to be huge images with image map links. I converted them to HTML to make it easier to update.
