this code overlaps two div, (using html only)how do i display these vertically like this: https://i.stack.imgur.com/Mq5om.jpg
<html>
<body>
<title> Flag Ship Devices </title>
<div>
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="D:\Project1\FinalResource\iphonex.jpg">
</object>
<object align="left">
<ul>
<h2> iPhone X (Matte Black, 64GB) </h2> <br>
<li> <p>Price ₹83499</p> </li>
</object>
</div>
[enter image description here][1]
Mi A1 (White, 64GB)
Price ₹13999
Please, take a look and see if this helps you.
Also, I suggest you to use bootstrap, it's a very good framework to this kind of need.
.product_container{
width: 100%;
margin-bottom: 10px;
display: flex;
}
<html>
<body>
<title> Flag Ship Devices </title>
<div class="product_container">
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="https://placehold.it/400x250"/>
</object>
<object align="right">
<ul>
<li><h2> iPhone X (Matte Black, 64GB) </h2> <br></li>
<li> <p>Price ₹83499</p> </li>
</ul>
</object>
</div>
<div class="product_container">
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="https://placehold.it/400x250"/>
</object>
<object align="right">
<ul>
<li><h2> iPhone X (Matte Black, 64GB) </h2> <br></li>
<li> <p>Price ₹83499</p> </li>
</ul>
</object>
</div>
Related
I am currently trying to create some kind of movie info page like what you see in cinemas where I grab images and titles from another source.
What my code should do is when the pictures from image slide change, it should highlight the corresponding title to show what movie it is but I am not sure how to properly connect between the images and the texts.
Any help would be appreciated thanks.
html:
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<c:forEach var="img" items="${moviedata }" varStatus="no">
<a href="../movielist/MDetail?mid=${img.mid }"><li class="home_li"><img src="../m_img/movie/${img.imgurl}"
alt="" width="500px" height="600px" name="color${no.index }" /></li></a>
</c:forEach>
</ul>
</div>
</td>
<td>
<!-- movielist-->
<div>
<ul class = "mlist">
<c:forEach var="rank" items="${moviedata }" varStatus="no">
<li>
${no.index + 1 }. ${rank.name }
</li>
</c:forEach>
</ul>
</div>
</td>
</tr>
</table>
html Result :
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<a href="../movielist/MDetail?mid=11"><li class="home_li"><img src="../m_img/movie/82019_1000.jpg"
alt="" width="500px" height="600px" name="color1" /></li></a>
<a href="../movielist/MDetail?mid=25"><li class="home_li"><img src="../m_img/movie/82060_1000.jpg"
alt="" width="500px" height="600px" name="color2" /></li></a>
<a href="../movielist/MDetail?mid=1"><li class="home_li"><img src="../m_img/movie/82078_1000.jpg"
alt="" width="500px" height="600px" name="color3" /></li></a>
<a href="../movielist/MDetail?mid=5"><li class="home_li"><img src="../m_img/movie/82133_1000.jpg"
alt="" width="500px" height="600px" name="color4" /></li></a>
<a href="../movielist/MDetail?mid=23"><li class="home_li"><img src="../m_img/movie/82093_1000.jpg"
alt="" width="500px" height="600px" name="color5" /></li></a>
<a href="../movielist/MDetail?mid=4"><li class="home_li"><img src="../m_img/movie/81905_1000.jpg"
alt="" width="500px" height="600px" name="color6" /></li></a>
<a href="../movielist/MDetail?mid=6"><li class="home_li"><img src="../m_img/movie/82190_1000.jpg"
alt="" width="500px" height="600px" name="color7" /></li></a>
<a href="../movielist/MDetail?mid=3"><li class="home_li"><img src="../m_img/movie/82224_1000.jpg"
alt="" width="500px" height="600px" name="color8" /></li></a>
<a href="../movielist/MDetail?mid=7"><li class="home_li"><img src="../m_img/movie/82129_1000.jpg"
alt="" width="500px" height="600px" name="color9" /></li></a>
</ul>
</div>
</td>
<td>
<!-- movielist -->
<div>
<ul class = "mlist">
<li>
1. Movie Name 1
</li>
<li>
2. Movie Name 2
</li>
<li>
3. Movie Name 3
</li>
<li>
4. Movie Name 4
</li>
<li>
5. Movie Name 5
</li>
<li>
6. Movie Name 6
</li>
<li>
7. Movie Name 7
</li>
<li>
8. Movie Name 8
</li>
<li>
9. Movie Name 9
</li>
<li>
10. Movie Name 10
</li>
</ul>
</div>
</td>
</tr>
</table>
CSS:
<style>
.mlist{
list-style:none;
display:flex;
align-content:flex-start;
flex-direction: column;
flex-wrap: wrap;
width: 250px;
text-align: left;
}
.mlist li {
display:inline-block;
border:1px solid black;
border-top: 1px solid black;
width:260px;
height:50px;
margin:3px 0 0;
}
.mlist li:hover {
border:1px solid red; height:50px;
}
</style>
JavaScript:
const all = ele => document.querySelectorAll(ele)
const one = ele => document.querySelector(ele)
const slide = _ => {
const wrap = one('.slide')
const target = wrap.children[0]
const len = target.children.length
target.style.cssText = width:calc(100% * ${len});display:flex;transition:1s
Array.from(target.children)
.forEach(ele => ele.style.cssText = width:calc(100% / ${len});)
let pos = 0
setInterval(() => {
pos = (pos + 1) % len
target.style.marginLeft = ${-pos * 100}% }, 3000)
}
window.onload = function () {
slide()
}
I suggest you keep track of your slide with variables.
When you navigate you could use these 2 variables to hold the ID of the element you want to highlight now and the element on which you want to remove the highlight. And run this script every time you change the slide.
In your case i believe your using positions. so apply the style to that new position and remove it from the old position.
Now for what is linking the text to the image depends on what your doing. The could share a same position value or they could share a container element. And if you plan on using you position with the ID attribute, remember that an id attribute can not start with a number. So I usualy concatenate a string with a numeric value.
"myElementId_"+ pos
Result in myElementId_1 which is valid html
Now just add style to this element and remove it from last.
I'm a beginner with responsive sites and having a problem with this one. Everything shows up fine for me on my Mac, iPad and iPhone, but apparently the nav bar is going blank on a Windows machine in Explorer 11 (11.0.25 to be exact). What am I missing? I've tried researching but haven't been able to figure out the problem and can't replicate it since it all looks fine on my end. The site is at http://muconf.missouri.edu/boats2016/
(http://muconf.missouri.edu/boats2016/boatsproblem.png) My contact says the only reason the Home button is showing up in this screenshot is she is hovering over it, otherwise everything is blank.
CSS
<!doctype html>
<html><!-- InstanceBegin template="/Templates/index.dwt"
codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway|Lato|Oxygen">
<link rel="stylesheet" type="text/css" href="boats2.css" />
<style>
* {
box-sizing: border-box;}
.row:after {
content: "";
clear: both;
display: block;}
</style>
<!-- InstanceBeginEditable name="Based on a True Story" -->
<title>Based on a True Story</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
HTML
<body>
<!-- begin header -->
<div class="header">
<img src="images/header_2016.jpg" width="3300" height="446" alt=""/>
</div>
<!-- end header -->
<!-- begin nav menu -->
<nav class="clearfix" id="nav">
<ul class="clearfix">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>Presenters</li>
<li>Location/Travel</li>
<li>Contact Us</li>
<li>Previous Years</li>
</ul>
</nav>
<!-- end nav menu -->
/*** showing the menu ***/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
</script>
<!-- begin content area -->
<div class="TextOnlyContainer" style="margin: 0 auto"><!-- InstanceBeginEditable name="EditRegion3" -->
<!-- start left column -->
<div style="float:left; width:75%"><h2>Reporting Real Life, Telling True Stories</h2>
<p align="left" class="text">Join us once again in Columbia, Missouri, from March 2-4, 2016, as a dynamic group of filmmakers, journalists, and film critics engage in a series of thoughtful and energetic discussions about telling true stories in film and journalism. The fifth year of <em>Based on a True Story: The Intersection of Documentary Film and Journalism</em> will again set about analyzing the intersection of nonfiction storytelling forms, advocacy in that storytelling, and the cultural and ethical implications of the convergence between journalism and documentary film.</p>
<p class="text">An interdisciplinary group of scholars at the University of Missouri — sponsored by the Mizzou Advantage Program — will be partnering again with the True/False Film Fest to continue our tradition of light-hearted yet serious-minded discussions about documentary film. Conference attendees will spend time engaging with some of the top thinkers, purveyors, and practitioners of documentary film. It will be the perfect run-up to the 12th annual True/False Film Festival, March 3–6, 2016!</p></div>
<!-- end left column -->
<!-- start right column -->
<div style="float:right; background-color:#ccc; padding:1em;">
<a href="http://truefalse.org/"><h5 style="text-align:center">True/False Film Fest</h5>
<img src="images/tf2016.jpg" alt="True/False Film Fest" width="175" height="212" border="0" /></a>
</div>
<!-- end right column -->
<div style="clear:both"></div>
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</p>
<p></p>
<p></p>
<div class="dwuserEasyRotator" style="width: 100%; height: 400px; position:relative; text-align: center; margin:0 auto" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-87-111-111-100-121-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-ername="slideshow" data-erResponsiveRatio="{600:400}" data-erTID="{jz42jpztf5098200863541}">
<div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
<li>
<span class="text"><img class="main" src="images/slideshow/slide05.jpg" />
<img class="thumb" src="images/slideshow/slide05.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide04.jpg" />
<img class="thumb" src="images/slideshow/slide04.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide03.jpg" /> <img class="thumb" src="images/slideshow/slide03.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide02.jpg" /> <img class="thumb" src="images/slideshow/slide02.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide01.jpg" /> <img class="thumb" src="images/slideshow/slide01.jpg" /></span>
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplatename="NONE" style=""> <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
<br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>
<noscript>
Rotator powered by EasyRotator, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<!-- InstanceEndEditable -->
<!-- footer -->
<div class="Footer" style="padding:0">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="273" align="center" valign="middle"><p><img src="images/MU_Advantage_sm.jpg" width="130" height="75" alt="Mizzou Advantage" /></p>
<p>Mizzou Advantage</p></td>
<td colspan="2" align="center" valign="middle" ><p><img src="images/Murraylogo3.jpg" alt="T/F logo" width="86" height="86" border="0" /> </p>
<p>Jonathan B. Murray <br />
Center for Documentary Journalism</p></td>
<td width="273" align="center" valign="middle"><p><img src="images/tf_logo_sm.jpg" alt="T/F logo" width="75" height="75" border="0" /> </p>
<p>True/False Film Fest</p></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri Humanities Council</td>
<td height="40" colspan="2" align="center"><a href="http://grs.missouri.edu">Univ. of Missouri <br />
Department of German & Russian Studies</a></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri School of Journalism</td>
<td height="40" colspan="2" align="center">Chancellor's Distinguished Visitors Program</td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Donald W. Reynolds Journalism Institute</td>
<td height="40" colspan="2" align="center"><p>Department of Women's and Gender Studies</p></td>
</tr>
<tr>
<td height="40" colspan="4" align="center">Univ. of Missouri Film Studies Program</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td style="text-align:center">MU Conference Office © 2016, University of Missouri</td>
</tr>
</table>
</div>
<!-- end Footer -->
</div> <!-- end TextOnlyContainer -->
</body>
<!-- InstanceEnd --></html>
Seems to be a problem with the background going white when the link is visited
Try to get rid of the a:visited selector altogether, it is not needed
#nav a:link, a:visited {
...
}
To
#nav a {
...
}
I have been searching all around for solutions as this is a common problem.
All the 'solutions' that has worked for others has not worked for me :(
This is the body of my index.html file:
<body>
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</div>
<div id="footer">
Test
</div>
</body>
This is the CSS for my footer:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
If anyone knows how i can fix this then please say,
Thanks in advanced
Unique
I have solved your problems. I spent some more hours for you and i get solution for set footer at bottom of page.
Live Working Demo
HTML Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="content">
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</div>
</div>
<div id="footer">
This is footer Section
</div>
</div>
</body>
</html>
CSS Code:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:white;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
color:white;
}
Result:
I am not sure what you are looking to do. Are you looking for the footer to be permentaly immovable at the bottom of the page, so that when the rest of the page scrolls it doesn't? Or are you looking to keep the footer under the table, and it scrolls with the rest of the site?
If you are looking for the former, you need to change "relative" to "absolute" and make sure your left, right and bottom margins are set to 0.
If you just want the footer to stay under the table, the rest of the code is needed to see how it's interacting with the other elements and their css styles.
To know about positioning visit http://www.w3schools.com/css/css_positioning.asp
I ran your code and the relative positioning is working fine on my chrome browser. Please set the position of the elements of your body of the page so that its relative.
1.Change your css code as
#footer {
clear: both;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
position:relative; //or any of the other positions as per your page
}
2.One more thing you can do as i did is to set your footer styles as an inline styling like so
<div style="clear:both;z-index:10; height:3em; margin-top:-3em; background-color:red; position:relative;">
Test
</div>
3.If inline styling doesnt work go for internal style set the styles for the footer in a style tag embedded in the head tag
4.You need to keep your div tag outside the main div tag. keep it as a separate element rather than being a child of another element. I have faced similar problems while working with my projects and changing the tag position and the structure of the body helps. You just need to have patience and keep on trying different methods.
you not close your tag
see Demo after add
<html>
<head>
<style>
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: red;
}
</style>
</head>
<body>
<div id="header">
<table width="100%" height="auto" border="0">
<tr>
<td><h1 id="logo">WEBSITE</h1></td>
<td><div id="navigation">
<ul>
<li>HOME</li>
<li>FORUM</li>
<li>NEWS</li>
<li>INFORMATION</li>
<li>GALLERY</li>
<li>STAFF APPLICATIONS</li>
<li>CONTACT US</li>
</ul>
</div></td></tr></table>
</div>
<div id="announcement">
<center>
<p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
</center>
</div>
<div id="slider">
<center>
<h1>IMAGE SLIDER COMING SOON</h1>
</center>
</div>
<div id="featured">
<table width="100%" height="100%" border="0">
<center>
<tr>
<!-- Column 1 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
<h3>Our Community, Your Community</h3>
<p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
Register
</div></td>
<!-- Column 2 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-2.png" alt="" title="2" width="100px" height="100px" />
<h3>Virus & Spyware Free</h3>
<p>All the projects we create are checked by other members of the organisation to ensure your computer & security is not
at risk because of our products. We also release the source code of the projects that we have created so you can check yourself.</p>
</div></td>
<!-- Column 3 -->
<td align="center" valign="top"><div id="thumbnail">
<img src="images/thumbnail-1.png" alt="" title="3" width="100px" height="100px" />
<h3>Free Open-Source Projects</h3>
<p>We create projects for the public to use without paying a penny or entering any pesky surveys. The projects we create
are open-sourced which means the source code is available to the public to use however they want as long as they leave
credits in the project that they created! The projects we create can range between Websites, programs and on special
occasions, games.</p>
Read More
</div></td>
</center>
</table>
</div>
<div id="footer">
Test
</div>
</body>
</html>
<!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.`
I am having trouble to explain my issue, but here goes...
I have create a z-index layer effect and want to some words to show up underneath. This sounds simple right, however my text goes and sits underneath the "Z-Index layers".
How do I correctly markup my text to "Inherit" or to sit under the Z-Index.
Thanks for the help in advance.
Please Code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2013 Christmas Ecard</title>
</head>
<body onload="init();" style="background-color:#D4D4D4"><p>
<font face="Arial">From all of us at Canadian Western Trust.<br><br>
<canvas id="canvas" width="711" height="661" style="z-index: 3; position: absolute; background-color:#ffffff"></canvas>
<!--[if IE]><param name="movie" value="______.SWF"><![endif]-->
<!-- fallback to Flash: -->
<object id="top" style="z-index: 2; position: absolute" width="711" height="661" type="application/x-shockwave-flash" value="_____">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="________.SWF" />
</object>
<img id="under" style="z-index: 1; position: absolute" src="______">
<font face="Arial">
Please view in HTML.<br><br>
We wishes everyone a wonderful holiday season and a happy new year!<br><br>
Please click here to open the e-card in your web browser.
<br><img src="{Campaign_Opened Email_Tracking_URL?}">
</font>
<br>
</body>
</html>
There seemed to be some open tags that was floating around. WoW!! THat gave me a head ache. All good now and works!
<body onload="init();" style="background-color:#D4D4D4"><p>
<font face="Arial">From all of us .</font><br><br>
<canvas id="canvas" width="711" height="661" style="z-index: 3; position: absolute; background-color:#ffffff"></canvas>
<!--[if IE]><param name="movie" value="...."><![endif]-->
<!-- fallback to Flash: -->
<object id="top" style="z-index: 2; position: absolute" width="711" height="661" type="application/x-shockwave-flash" value="https://...">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="https://...." />
</object>
<img style="z-index: 1; position: absolute" src="https://....">
<font style="position: absolute; top: 725px;" face="Arial">
Please view in HTML.<br><br>
We wishes everyone a wonderful holiday season and a happy new year!<br><br>
The greatest gift is our children.....<br><br>
Please click here to open the e-card in your web browser.
<br><br><img src="{Campaign_Opened Email_Tracking_URL?}">
</font>
<br>
</body>