Okay, so I and some other people are build a site in webplus X5, and when we open the html in IE 10 (Chrome seems to not be opening lately, but thats another problem) we get this:
And, this is what that page is in webplus.
HTML code as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus X5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>Home</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
body {margin: 0px; padding: 0px;}
.Artistic-Body-C
{
font-family:"Arial Black", sans-serif; font-weight:700; text-decoration:underline; font-size:54.0px; line-height:1.41em;
}
.Artistic-Body-C-C0
{
font-family:"Arial Black", sans-serif; font-weight:700; font-size:54.0px; line-height:1.41em;
}
.Artistic-Body-C-C1
{
font-family:"Arial Black", sans-serif; font-weight:700; text-decoration:underline; font-size:32.0px; line-height:1.41em;
}
.Body-C
{
font-family:"Arial Black", sans-serif; font-size:27.0px; line-height:1.41em;
}
.Body-C-C0
{
font-family:"Arial Black", sans-serif; font-size:15.0px; line-height:1.47em;
}
.Artistic-Body-C-C2
{
font-family:"Arial Black", sans-serif; color:#ffffff; font-size:19.0px; line-height:1.42em;
}
.Body-C-C1
{
font-family:"Arial Black", sans-serif; color:#ffffff; font-size:16.0px; line-height:1.44em;
}
.Button1,.Button1:link,.Button1:visited{text-decoration:none;display:block;position:absolute;background-color:transparent;}
.Button1:focus{outline-style:none;}
.Button1 span,.Button1:link span,.Button1:visited span{color:#000000;font-family:"Arial Black",sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:0px;width:107px;height:20px;font-size:16px;display:block;position:absolute;cursor:pointer;}
.Button2,.Button2:link,.Button2:visited{text-decoration:none;display:block;position:absolute;background-color:transparent;}
.Button2:focus{outline-style:none;}
.Button2 span,.Button2:link span,.Button2:visited span{color:#5c7e13;font-family:"Arial Black",sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:0px;top:0px;width:107px;height:20px;font-size:16px;display:block;position:absolute;cursor:pointer;}
.Button2:hover span{color:#000000;}
.Button2:active span{color:#000000;}
</style>
<script type="text/javascript" src="wpscripts/jspngfix.js"></script>
<link rel="stylesheet" href="wpscripts/wpstyles.css" type="text/css">
<script type="text/javascript">var blankSrc = "wpscripts/blank.gif";
</script>
</head>
<body text="#000000" style="background-color:#ffffff; text-align:center; height:900px;">
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:1440px;height:900px;">
<img src="wpimages/wp817e53a4_06.png" width="1440" height="900" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:0px;">
<img src="wpimages/wpc73afde9_06.png" width="202" height="193" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:15px;top:13px;">
<div style="position:absolute;left:270px;top:17px;width:649px;height:76px;">
<div class="Wp-Artistic-Body-P">
<span class="Artistic-Body-C">S.N.A.K.E.S</span><span class="Artistic-Body-C-C0"> </span><span class="Artistic-Body-C-C1">Animal shelter</span></div>
</div>
<div id="txt_1" style="position:absolute;left:250px;top:202px;width:937px;height:590px;overflow:hidden;">
<p class="Wp-Body-P"><span class="Body-C">Here at S.N.A.K.E.S, (Serpent National Anti-Kruelty* Eviromental Shelter) we care
for those that are not typically considered as pets, in the form of snakes! Our slithery
friends are not what those that are faint-hearted consider pets, but those adventurous
souls out there may happily adopt on of our various serpents. Those people can look
here to donate and look at these snakes, as well as contact us, and apply to volunteer
as a snake carer.</span></p>
<p class="Wp-Body-P"><span class="Body-C">-To navigate, use the links on the left. Click the logo or the home button to return
here. There is various images along the<img src="wpimages/wp2f8a775f_06.png" width="920" height="900" border="0" onload="OnLoadPngFix()" title="" alt="" style="display:block;position:absolute;top:0px;left:0px;"> right: they are just images or funny snake-things
we have found.</span></p>
<p class="Wp-Body-P"><span class="Body-C-C0"><br></span></p>
<p class="Wp-Body-P"><span class="Body-C-C0">*Kruelty is spelt wrong on purpose, to allow the name to work.</span></p>
</div>
<img src="wpimages/wp82934362_05_06.jpg" width="265" height="166" border="0" alt="" style="position:absolute;left:1175px;top:0px;">
<form id="site_search_1" action="" onSubmit="return false;" style="position: absolute; top:212px; left:0px; width:250px; height:22px;margin: 0; padding: 0;">
<input id="site_search_1_input" name="site_search_1_input" onkeypress="if (event.keyCode==13) window.location.href='page4.html?site_search_results_1='+document.getElementById('site_search_1_input').value+'&depth=0';" style="width: 107px;" type="text"><div style="display: inline"><button onclick="window.location.href='page4.html?site_search_results_1='+document.getElementById('site_search_1_input').value+'&depth=0';" style="width: 133px;">Search this site!</button></div>
</form>
<img src="wpimages/wpa7694a4a.gif" width="267" height="151" border="0" alt="" style="position:absolute;left:1173px;top:166px;">
<img src="wpimages/wpccc61754_06.png" width="98" height="38" border="0" title="" alt="Home" onload="OnLoadPngFix()" style="position:absolute;left:251px;top:169px;">
<div style="position:absolute;left:267px;top:90px;width:601px;height:73px; background-image:url('wpimages/wpaff7835e_06.png');">
<span>Home</span>
<span>Volunteer</span>
<span>Donations</span>
<span>Contact us</span>
<span>Gallery</span>
</div>
<img src="wpimages/wp90a589a8_06.png" width="1440" height="101" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:799px;">
<div style="position:absolute;left:7px;top:799px;width:185px;height:27px;">
<div class="Wp-Artistic-Body-P">
<span class="Artistic-Body-C-C2">Explore the site</span></div>
</div>
<map id="map0" name="map0">
<area shape="rect" coords="212,6,335,26" href="page6.html" alt="">
<area shape="rect" coords="86,5,206,25" href="page3.html" alt="">
<area shape="rect" coords="1,4,67,28" href="home page.html" alt="">
</map>
<img src="wpimages/wp70aa4b65_06.png" width="339" height="27" border="0" title="" alt="Donations" onload="OnLoadPngFix()" usemap="#map0" style="position:absolute;left:8px;top:836px;">
<map id="map1" name="map1">
<area shape="rect" coords="210,7,300,26" href="page9.html" alt="">
<area shape="rect" coords="0,3,128,26" href="page10.html" alt="">
</map>
<img src="wpimages/wpd689eff4_06.png" width="302" height="27" border="0" title="" alt="Gallery" onload="OnLoadPngFix()" usemap="#map1" style="position:absolute;left:8px;top:863px;">
<img src="wpimages/wp5533b116.gif" width="64" height="24" border="0" title="" alt="Home" style="position:absolute;left:9px;top:840px;">
<img src="wpimages/wp8183884b_06.png" width="326" height="55" border="0" title="" alt="Share this site" onload="OnLoadPngFix()" style="position:absolute;left:479px;top:797px;">
<img src="wpimages/wp2ce0a75d_06.png" width="47" height="47" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:478px;top:853px;">
<img src="wpimages/wpb26f87b1_06.png" width="51" height="51" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:535px;top:849px;">
<img src="wpimages/wp2f8a775f_06.png" width="48" height="47" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:593px;top:853px;">
<img src="wpimages/wp007bb409_06.png" width="48" height="48" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:648px;top:852px;">
<div id="txt_37" style="position:absolute;left:950px;top:799px;width:490px;height:101px;overflow:hidden;">
<p class="Wp-Body-P"><span class="Body-C-C1">All images Copyrighted by their rightful owners. The SNAKES logo is copyrighted to
SNAKES Animal shelter © 2015 The Facebook, Twitter, Google+ and Instagram logos are
property of their relevant companies.</span></p>
</div>
</div>
</body>
</html>
(I Would add the 'webplus' tag, but there is not one :(
-EDITS-
Edit 1 - Since the ghost copy matches the dimensions of the original, i tried modifying th original. The result of this was a pixelated version of my problem.
-Edit 2- I have worked out it seems to be related to the text box. We don't know why, but that text seems to be causing it. Will tinker with it 16/10/15
Alright, so I know this is not a universal fix ( Or even a fix) but I found out that, for some bizarre reason, the text:
Here at S.N.A.K.E.S, (Serpent National Anti-Kruelty* Eviromental Shelter) we care
for those that are not typically considered as pets, in the form of snakes! Our slithery
friends are not what those that are faint-hearted consider pets, but those adventurous
souls out there may happily adopt on of our various serpents. Those people can look
here to donate and look at these snakes, as well as contact us, and apply to volunteer
as a snake carer.
Plus The font, ariel black, plus the text size, makes it happen. upon removing and re-adding the text with a larger font, it disappeared! Yay, no more scaring people at 8.30 in the morning.
Related
I just started learning webdesign and I'm having this ongoing problem and I've posted a question about it before. Everything I tried didn't work but I made a few changes so I wanted to rephrase the question and add some more details.
I'm making a simple website for a Romanian artist and it will have an English version and a Romanian version (switching languages with tiny flags in the nav bar).
It's all written in WordPad, using just html and css, and all pages are in the same root folder. I have several html files and one css file (so it's an external file), which is linked in the head of each page. I have English versions and Romanian versions and they're all linked accordingly from the navigation.
Now, my issue is that the CSS will only work on the main English page and refuses to on any of the others, no matter which language, despite all of them having the same head, header and footer structure.
I tried Firefox and Chrome and it's the same story.
I clicked on "Page Source" on all the pages when opened in a browser, corrected any errors showing up, and the link to the css and all pages works when I click it.
I initially had several CSS files, one for each html file, but I deleted them except for one (I misunderstood the process initially and didn't realize they can all have the same css file). So now there is only one CSS file in the root folder "Style.css".
All html files are saved in "Unicode" encoding.
Except for the modified words, this is the exact css, as well as html structure of the main English page (on which the CSS works):
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<article class="figures">
<figure>
<img src="images\painting.jpg" width="335" height="325" alt="painting">
<figcaption>Paintings from 2010 - 2015</figcaption>
</figure>
<figure>
<img src="images\2.jpg" width="335" height="325" alt="painting 2">
<figcaption>2009 - 2000</figcaption>
</figure>
<figure>
<img src="images\3.jpg" width="335" height="325" alt="painting 3">
<figcaption>1990 - 1999</figcaption>
</figure>
</article>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
This is a page on which the same CSS doesn't work:
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name News</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<h2>What's New</h2>
<h3>Upcoming exhibitions:</h3>
<ul>
<li>July 2016</li>
<li>October 2016</li>
</ul>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
Which might work on this website, but I swear, it won't work in my browsers.
It's driving me nuts.
I'd be extremely grateful for any help!
EDIT:
This is what shows up in the developers console for the 'News' page:
And this is the root folder:
Try this inside your <head>
Source: w3schools
<base href="http://www.yourwebsite/" target="_blank">
Well it is working for me... make sure that the html and css files actually are in the same folder
/folder
--thing.html
--other.html
--style.css
And as pointed out in comment don't use c:/ to referer to files
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>USLI Intranet</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Style_sheets/front_menu_new.css" rel="stylesheet" type="text/css">
<script src="slider_omg/js/swfobject_modified.js" type="text/javascript"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tabbed jQuery slideshow</title>
<link rel="stylesheet" href="slider_omg/css/slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="slider_omg/js/jquery.cycle.js"></script>
<script type="text/javascript" src="slider_omg/js/slideshow.js"></script>
<link href="benefitsnew/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {font-size: 12px}
.style5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
.style6 {color: #999999}
a {
font-family: Arial, Helvetica, sans-serif;
/*font-size: 12px;*/
color: #003698;
}
a:visited {
color: #003698;
}
a:hover {
color: #E06B00;
}
.active{
background-color: #004499;
}
#leftThird{
float:left;
width:570px;
}
#rightThird{
float:right;
width:131px;
position:relative;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="left" ><img src="Pics/LOGO-AND-TAGLINE.gif" border = "0"/></div>
<div class="right">
<p> 1190 Devon Park Drive • Wayne, PA 19087<br />
888-523-5545 </p>
<form class="zoom_searchform" action="http://intranet.usli.com/Search2/search.asp" method="get">
<input type="text" maxlength="255" class="zoom_searchbox" size="18" name="zoom_query" value="Search our Site" onBlur="if (this.value == '') {this.value = 'Search Our Site';}"onFocus="this.value='';" />
<input type="submit" class="button" name="search" value="Find" />
</form>
</div>
</div>
<div id="menu">
<ul id="oldtopmenu">
<li><a href="../5CommunityGoals/5CommunityGoals.htm">Five Community<br />
Goals</a></li>
<li><a href="../UnderwritingTools/UnderwritingTools.htm">Underwriting<br />
Tools</a></li>
<li><a href="../PersonalDevelopment/pdc2.htm">Personal<br />
Development Team</a></li>
<li><a href="../Company Story/CompanyStory.htm">Company<br />
Story</a></li>
<li><a href="../LeadershipwithHeart/LeadershipwithHeart.htm">Leadership<br />
with Heart</a></li>
<li><a href="../BusinessCodeEthics/BusinessCodeEthics.htm">Business Code<br />
& Ethics</a></li>
<li><a href="../BranchOffices/Branch-Offices.html">Branch<br />
Offices</a></li>
<li ><a href="../CommunityTeams/CommunityTeams_landing_page.html">Community<br />
Teams</a></li>
<li><a href="../Forms/ServiceRequestForms.htm" style="padding:5px 16px;">Service<br />
Request Forms</a></li>
</ul>
<ul id="oldbotmenu">
<li><a class=" active " href="../index.htm">Home</a></li>
<li>Public Website</li>
<li class="double-line "><a href="../EmergencyResponse/EmergencyResponse.htm">Emergency Response /<br />
Staffing Plan</a></li>
<li class="double-line"><a href="../CareerOpportunities/CareerOpportunities.htm">Career<br />
Opportunities</a></li>
<li class="double-line"><a href="../PhoneList.htm">Community Mtg.<br />
Presentation</a></li>
<li class="double-line"><a href="../StaffLocator/StaffLocator_Pictures.htm">Phone List /<br />
People Search</a></li>
<li>Remembrance</li>
<li>Resources</li>
</ul>
</div>
<div id="content">
<div id="leftThird" >
<!--ZOOMSEARCH-->
<!--<div class="webexlink">
<p style="background-image: url(./Pics/frontpage/uslipinkbanner.jpg); width:445px; height:99px; padding-left: 75px; padding-top:10px; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; color: #FFFFFF; margin-left:0px;">Support Breast Cancer Awareness. Learn More >></p></div>-->
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="505" height="290" id="FlashID" title="USLI slideshow">
<param name="movie" value="ImageRotator.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="ImageRotator.swf" width="505" height="290">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br>
</p>
<p><a href="http://www.usli.com/community"><img src="Pics/frontpage/communityportal.jpg" alt="" name="" width="520" height="115" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="266,2,519,112" href="http://www.usli.com/community" target="_blank">
<area shape="rect" coords="5,2,258,112" href="http://www.usli.com/community/docs/CourseCatalogforFamilies_2014.pdf" target="_blank">
</map>
</a> </p>
<div class="pdc">Community Updates</div>
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2 id="headline_new">Bring Your Benefits Home!<img src="slider_omg/images/slide_image_benefits.png" width="200" height="163" border="0" class="new_slider_image"><br>
</h2>
<p class="inside_text">Did you know you can access your benefit information and much more from home? Visit www.usli.com/community >><br>
<br>
You can also sign up for any of the classes in the "Benefit Workshop Series" to learn<br>
more about what is available to you through our benefits. <br>
<br>
<br>
</p>
</li>
<li id="slide-two">
<h2 id="headline_new">Security Awareness<img src="slider_omg/images/slide_image_facilities.png" width="200" height="162" border="0" class="new_slider_image"><br>
</h2>
<p class="inside_text"><span class="intranet_font">Remember that we can make a difference when it comes to keeping USLI safe. Follow these guidelines to ensure your safety.<br>
<br>
View the "Surviving a Shooting" video as well to learn about three things you can do to make a difference. </span><br>
</p>
</li>
<li id="slide-three">
<h2 id="headline_new">Snap to It!<img src="slider_omg/images/slide_image_graphics.png" width="193" height="162" border="0" class="new_slider_image"><br>
</h2>
<p class="body_font"> If you’ve been meaning to hit the refresh button on your intranet photo or even better, take a more professional photo to improve your LinkedIn account, you’re in luck! Join us monthly for a quick private session. Register >><br>
</p>
<p><br>
</p>
</li>
<li id="slide-four">
<h2 id="headline_new"><strong>People's College for your<img src="slider_omg/images/slide_image_pdc.png" width="200" height="164" border="0" class="new_slider_image"><br>
family! </strong></h2>
<p> <span class="body_font">Our classes are open to family members!<br>
Tell your family members to register here >><br>
<br>
May course schedule is here! >></span><br />
</p>
</li>
<li id="slide-five">
<h2 id="headline_new">It's May in Slainte!<img src="slider_omg/images/slide_image_slainte.png" width="210" height="162" border="0"class="new_slider_image"><br>
</h2>
<p><span class="body_font"><strong>Check out the May calendar!</strong><br>
Did you know you can get $150 back through the Healthy Lifestyles reimbursement? Learn more about this opportunity!</span><br>
<br>
<br>
<br>
<br />
</p>
</li>
<li id="slide-six">
<h2 class="inside_text" id="headline_new"><strong>Join the USLI Helping Hands<strong><strong><img src="slider_omg/images/slide_image_spirit.png" width="193" height="162" border="0" class="new_slider_image"></strong></strong><br>
Committee<br>
</strong></h2>
<p> <span class="body_font">Our community stands behind those in need and lends a helping hand in many ways. <br>
<strong>Find Out More >></strong></span><br>
<br>
<a href="PersonalDevelopment/CommunitySpirit/PaintingLaSalleAcademy/index.html" target="_blank"><br>
</a><br>
<br>
</p>
<br>
<br />
</li>
<!-- <li id="slide-seven">
<h2 id="headline_new">Customer Conferences: Help<br>
Needed for 2014<img src="slider_omg/images/slide_image_corporateevents.png" width="198" height="162" border="0"class="new_slider_image"><br>
</h2>
<p> <span class="body_font">If you would be interested in greeting customers the morning of the conference or being a driver (picking up/dropping off at Applebrook, the airport, train station, etc.) for 2014, please contact Caitlyn (x2432) or Laurel (x2188). Read our blog. >></span> <br />
</p>
</li>-->
</ul>
</div>
<ul class="slides-nav">
<li class="on"><a href="#slide-one">Benefits<br>
<br>
</a></li>
<li><a href="#slide-two">Facilities<br>
<br>
</a></li>
<li> <a href="#slide-three">Graphics &<br>
Social Media</a> </li>
<li><a href="#slide-four">People's<br>
College <br>
</a></li>
<li><a href="#slide-five">Slainte<br>
<br>
</a></li>
<li><a href="#slide-six">CommunitySpirit / <br>
Reception <br>
</a></li>
<!-- <li>
<a href="#slide-seven">Corporate<br>
Events</a></li>-->
</ul>
</div>
</div>
<div id = "rightThird">
<div class="japan"><a href="http://intranet.usli.com:2012/StaffLocator/"> People<br>
Locator </a> </div>
<div class="rollover"><a href="https://www.google.com/calendar/embed?src=uslievents#gmail.com&ctz=America/New_York" target="_blank">USLI Events<br>
Calendar</a> </div>
<div class="menu"> <a href="Dearcadh.htm">Today's Cafe<br>
Selection </a> </div>
<div class="id"> <a href="http://intranet.usli.com/HelpDesk">Service <br>
Request<br>
</a> </div>
<div class="meeting"> <a href="http://intranet.usli.com/Scheduler/SchedulerHome.aspx">Class<br>
Registration</a> </div>
<div class="healthwellness"></div>
<!--<div class="nothingbutnets">
</div>-->
<!-- <div class="corpevents"></div>-->
<div class="oped"> <a href="http://successfulstudents.usli.com/" target="_blank" class="oped">Successful<br>
Student Blog</a></div>
<div class="news"> <a href="http://newsletter.usli.com" target="_blank">Customer<br>
Newsletter</a> </div>
<div class="spanishword"> <a href="PDFs/Spanishwordoftheweek.pdf" target="_blank">Spanish Word <br>
of the Week</a> </div>
<div class="care2wear"> <a href="CARE2/Care2WearGearEntrance.html" target="_blank">CARE2WEAR<br>
GEAR </a> </div>
<div class="julia"> Slainte Fitness Schedule </div>
</div>
</div>
</div>
<table width="750" border="0">
<tr>
<td height="93"> </td>
</tr>
</table>
<div id="Layer7" ></div>
<div id="Layer8" ></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
<br>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8410742-9");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
This is the html for my webpage and it works fine in chrome. However in IE it does not show anything at all. Below is the html code that IE spits out in it's developer tools.
<!-- saved from url=(0044)file://\\intranetdev1\intranet\indexNew.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Generated by F12 developer tools. This might not be an accurate representation of the original source file -->
<HTML><HEAD><TITLE>USLI Intranet</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="Scripts/swfobject_modified.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="Style_sheets/front_menu_new.css">
<SCRIPT type=text/javascript src="slider_omg/js/swfobject_modified.js"></SCRIPT>
<SCRIPT id=__ie_ondomload defer src="//:"></SCRIPT>
<LINK rel=stylesheet type=text/css href="slider_omg/css/slideshow.css" media=screen>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="slider_omg/js/jquery.cycle.js"></SCRIPT>
<SCRIPT type=text/javascript src="slider_omg/js/slideshow.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="benefitsnew/main.css">
<STYLE type=text/css>.style1 {
FONT-FAMILY: Arial, Helvetica, sans-serif
}
.style2 {
FONT-SIZE: 12px
}
.style5 {
FONT-SIZE: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #999999
}
.style6 {
COLOR: #999999
}
A {
FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #003698
}
A:visited {
COLOR: #003698
}
A:hover {
COLOR: #e06b00
}
.active {
BACKGROUND-COLOR: #004499
}
#leftThird {
FLOAT: left; WIDTH: 570px
}
#rightThird {
POSITION: relative; FLOAT: right; TEXT-ALIGN: left; WIDTH: 131px
}
UNKNOWN {
}
UNKNOWN {
}
UNKNOWN {
}
</STYLE>
</HEAD>
<BODY class=js></BODY></HTML>
I am not sure why it automatically closes the body tag without the rest of the content. I also do not know where the class="js" is coming from. I have made sure that div tags are all lined up and shouldn't be causing the problem. I believe all tags having closing tags. I can provide links to all source files if needed. Just wondering if anybody has come across this themselves.
Thanks!
Upon further review of what IE is doing to your document, I'm confident that this is in fact the answer.
You have the massively outdated practice of "commenting out" your stylesheet so that older browsers ignore it. But really, no browser needs that any more.
But the point is, you're starting an HTML comment, but you forgot to end it. This is effectively commenting out your entire document. Chrome is being "clever" and fixing the issue for you, but Internet Explorer is being pedantic and correct by refusing the rest of the content.
I would suggest just removing the <!-- from your <style> element. As I said, it's not needed.
For future reference, this is a simple way, to find what's going on with your html, when something like this happens.
Go to http://validator.w3.org and select validate by URI, file upload or direct input. Click check!
Now, you should find the errors and a small description explaining what's going on!
In this particular case you've got at least 22 Errors and 25 warning(s).
But the main reason why you're not able to see BODY is because you left
<!-- on line 21 just after the style declaration
and never closed it.`
For some reason I have a tiny horizontal line to the bottom right of each of my social media images I've placed on a header on my website. I've tried to find an explanation on why they appear and more importantly, how to hide them. Does anyone know how to remove them? Thank you very much.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title> Chilun</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<style type="text/css">
#font-face /* support for browsers & IE v10 onwards*/
{font-family:homefont; src: url("font.ttf");}
{font-family:headerfont; src: url("playball.ttf");}
body {background:url('img/mybackground3.jpg') no-repeat center center fixed;}
<!-- Make Header Sticky -->
#header_container {background:#00E5EE; border:0px solid #666; height:70px; left:0; position:fixed; width:100%; top:0;}
#header{padding: 0.3em 0; border-bottom: 0px; overflow: hidden; zoom: 1; line-height:0px; margin:0 auto; width:940px; text-align:right;display:inline-block; float:right;vertical-align:bottom;}
#wrapper{width:900px;margin:0 auto;}
a{color:#444;}
.logo{margin-left:600px;margin-top:100px;background:#fff;padding:10px;}
.bigtitle{font-family: homefont; font-size:120px; text-align:center; margin-top:200px;}
.header{top:100%; left:50%; font-family: headerfont; font-size:20px; color:#FFFFFF; font-style:italic; padding-top:0px; padding-bottom:0px; padding-right:20px; padding-left:0px;}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header"><p class="header"> Follow me on:
<a href="https://www.facebook.com/chilunliuTheBOSSE"><img src="/img/facebook-lnk.gif" alt="View my Facebook Profile" width="40" height="40" border="0">
<a href="https://plus.google.com/u/0/+chilunliu/posts/p/pub"><img src="/img/googleplus-lnk.gif" alt="View my Google Plus Profile" width="40" height="40" border="0">
<a style="margin:0; href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"; View my Linkedin Profile </a><img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0; href=""; Email me </a><img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0; href="http://www.youtube.com/user/chilunliu"; View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
</div>
</p>
</div>
<!-- END: Sticky Header -->
<div id="wrapper">
<h2 class="bigtitle">
<p>
Chilun
Liu
</p>
</h2>
</div>
</body>
</html>
You are missing all of the </a> closing tags...
<a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"> View my Linkedin Profile</a> <img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0;" href=""> Email me </a><img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0;" href="http://www.youtube.com/user/chilunliu"> View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
this is how your a tags should be closed
Next what all the others says about closing the <a> tags with </a>. You need to set this in your css. I had the same problem and text-decoration: none; was the solution for me.
Css
a { text-decoration: none};
Check the changed tag.
<a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416"> View my Linkedin Profile </a>
<img src="/img/linkedin-lnk.gif" width="40" height="40">
<a style="margin:0;" href=""> Email me </a>
<img src="/img/email-lnk.gif" width="40" height="40">
<a style="margin:0;" href="http://www.youtube.com/user/chilunliu"> View my Youtube Channel</a><img src="/img/youtube-lnk.gif" width="40" height="40">
Below is the result of the tag and there is no underline :)
View my Linkedin Profile
Email me
View my Youtube Channel
Hope this helps.
For some reason my image map is working in every browser but Internet Explorer,
I cant seem to figure out why and also can't test it very accurately because I am on a Mac.
<div id="joinnow">
<div style="text-align:center; width:358px; margin-left:auto; margin-right:auto;">
<map id="imgmap20131021153742" name="imgmap20131021153742"><area shape="rect" alt="" title="" coords="23,26,162,109" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=3790" target="_blank" /><area shape="rect" alt="" title="" coords="22,114,158,188" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=4790" target="_blank" /><area shape="rect" alt="" title="" coords="201,103,340,185" href="http://therac.wufoo.com/forms/z7x4a3/" onclick="window.open(this.href, null, 'height=825, width=475, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false" title="TheRAC" /></map>
<img src="http://www.therac.net/images/joinnow.jpg" USEMAP="#imgmap20131021153742" />
</div>
</div>
The CSS for the div with ID "joinnow" is...
#joinnow
{
font-size:18px;
font-weight:500;
font-family:Tahoma, Geneva, sans-serif;
color:#fff;
text-align:center;
position:relative;
float:right;
background-image:url(images/joinnow.jpg);
height: 195px;
width:179px;
}
Thanks in advance for any help provided!
Worked fine here, Internet Explorer 11
usemap is lowercase
<div id="joinnow">
<div style="text-align:center; width:358px; margin-left:auto; margin-right:auto;">
<map id="imgmap20131021153742" name="imgmap20131021153742"><area shape="rect" alt="" title="" coords="23,26,162,109" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=3790" target="_blank" /><area shape="rect" alt="" title="" coords="22,114,158,188" href="https://signup.myiclubonline.com/iclub/signup/home.htm#plans?clubNumber=4790" target="_blank" /><area shape="rect" alt="" title="" coords="201,103,340,185" href="http://therac.wufoo.com/forms/z7x4a3/" onclick="window.open(this.href, null, 'height=825, width=475, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false" title="TheRAC" /></map>
<img src="http://www.therac.net/images/joinnow.jpg" usemap="#imgmap20131021153742" />
</div>
</div>
.
#joinnow
{
font-size:18px;
font-weight:500;
font-family:Tahoma, Geneva, sans-serif;
color:#fff;
text-align:center;
position:relative;
float:right;
background-image:url('images/joinnow.jpg');
height: 195px;
width:179px;
}
http://jsfiddle.net/6LN6C/2/
I made a navbar. Here's the code:
<style type="text/css">
.topbackground {
background-repeat:no-repeat;
background-position: top;
height: 150px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFFFFF;
}
.realnewsbg {
background-image: url(http://tinkatips.hol.es/nav.png);
width: 1000px;
height: 122px;
float:left;
margin-top:-130px;
margin-left:120px;
text-align:center;
}
.realnews {
background-image: url(http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif);
width: 1000px;
height: 122px;
float:left;
margin-top:-40px;
margin-left:220px;
text-align:left;
}
.tttime {
width: 156px;
height: 122px;
padding-top:-0px;
margin-top:-40px;
margin-left:850px;
text-align:center;
}
body {background-color:#b0c4de;}
</style>
<style type="text/css">
#ajaxticker1{
width: 1000px;
height: 100px;
}
#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>
<script src="ajaxticker.js" type="text/javascript">
/***********************************************
* Ajax Ticker script (txt file source)- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<body>
<center><div class="topbackground">
<img id="Image-Maps_3201307070909053" src="http://deltaflow.com/themes/deltaflow/images/pixel_transparent.gif" usemap="#Image-Maps_3201307070909053" border="0" width="1000" height="122" alt="" />
<map id="_Image-Maps_3201307070909053" name="Image-Maps_3201307070909053">
<area shape="rect" coords="19,6,196,66" href="http://www.google.com" alt="" title="" />
<area shape="rect" coords="232,7,409,67" href="http://www.google.com" alt="" title="" />
<area shape="rect" coords="438,5,615,65" href="http://www.twitter.com/" alt="" title="" />
<area shape="rect" coords="651,7,828,67" href="http://www.google.com" alt="Coming Soon !" title="Coming Soon !" />
<area shape="rect" coords="998,120,1000,122" href="http://www.image-maps.com/index.php?aff=mapped_users_3201307070909053" alt="Image Map" title="Image Map" />
</map><div class="realnewsbg"></div>
<div class="realnews"><script type="text/javascript">
var xmlfile="tickercontent.txt" //path to ticker txt file on your server.
//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script></div>
<div class="tttime">
<script type="text/javascript" src="http://www.24webclock.com/clock24.js"></script>
<table border="0" bgcolor="#a0a0a0" cellspacing=1 cellpadding=3 class="clock24st" style="line-height:14px; padding:0;">
<tr><td bgcolor="#FFFFFF" class="clock24std" style="font-family:arial; font-size:12px;"><img src="http://www.24webclock.com/ico.gif" width="14" height="14" border="0" alt="Kostenlose Uhr fur die Homepage" align="left" hspace="2"> <span class="clock24s" id="clock24_77176" style="color:#6393C3;">free clock for website</span></td></tr>
</table>
<script type="text/javascript">
var clock24_77176 = new clock24('77176',0,'%HH:%nn:%ss %P','en');
clock24_77176.daylight('GB'); clock24_77176.refresh();
</script></div>
</div>
</div>
<div class="header"></div></div></body>
You can find the additional files here: http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm. The thing is that because of the clock the ticker goes behind the navbar (nav.png). How could I stop this?
Use z-index to make the clock go in front, you could do this by setting the z-index of the navbar to -1:
z-index: -1;
Fixed it!
Just moved the clock div under the header one!