I have been working on creating a website for a family company. It is mostly created, however I cannot get it to work in Chrome or Safari. Specifically, the links to go from page to page do not work. When clicking on the tabs on the left side, or the logo at the top, you should be directed to a different page. This works perfectly on IE. However, they do not work at all in the other 2. I have looked and looked and can't find a reason why. If anybody could help, it would be greatly appreciated.
I realize that the tabs are not uniform in Chrome or Safari as they are in IE. That is just not as important an issue to fix at the moment.
Here is the HTML for one of the pages so you can see what I have done and where I have messed up.
<!DOCTYPE html>
<html>
<head>
<title>
BERK Consulting LLC
</title>
<style type="text/css">
a:link {color:white; }
a:visited{color:white; }
a:hover {color:white; }
body {background-color:#F2E8DE}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;">
<p style="font-size: 18pt; text-align: justify; padding-top: 200px; padding-left: 200px;">
BERK was founded on the desire to remove the bureaucracy, complexity, and hidden agendas from consultancy. When you deal with BERK, you’re dealing directly with the expertise, not a salesperson or a subcontracting agency. <br /> <br />
Our down-to-earth approach combined with extensive 'in the seat' supply chain expertise allows us to advise you on key supply chain evolution decisions, allowing you to maintain focus on managing your business. <br /> <br />
We have eliminated the green beans from our team so that we can establish sustainability in your team and at an affordable rate.
</p>
<p style="text-align: right; font-size: 20pt;"> <strong>
...Securing the Last Piece® <br />
<img src="http://berkllc.com/images/LinkedIn2.png" alt="Follow Us" style="float:right;" width="150px" />
</strong> </p>
</div>
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;">
<img src="http://berkllc.com/images/BERKPic1.jpg" alt="BERK" />
<p style="font-size:11pt; padding-top:50px; ">
<span style="font-family:'Copperplate Gothic Bold'; ">
Home <br /> <br />
Who We Are <br /> <br />
What We Do <br /> <br />
Who We've Helped <br /> <br />
Our Network <br /> <br />
What Are You Missing <br /> <br />
Contact Us <br />
</p>
</span>
</div>
<div id="blank" style="width:100%; padding-top:1px;">
</div>
<div id="Legal1" style="background-color:#1F497D; position: absolute; padding-top:125px; width:994px; text-align:center;">
<table id="Legal2" border="0" style="border-collapse:collapse; font-size:8pt; color:white; margin-left: auto; margin-right: auto;" cellpadding="10px">
<tr>
<th style="cursor: pointer;" onclick="location.href='index.html'">
Home
</th>
<th style="cursor: pointer;" onclick="location.href='BERKContactUs.html'">
Contact Us
</th>
<th style="cursor: pointer;" onclick="location.href='BERKDisclaimers.html'">
Legal Disclaimers
</th>
<th style="cursor: pointer;" onclick="location.href='BERKTrademark.html'">
Trademark/Privacy
</th>
<th style="cursor: pointer;" onclick="location.href='BERKSitemap.html'">
Site Map
</th>
</tr>
</table>
<p style="text-align:center; font-size:6pt; color:white;">
© 2009 BERK Consulting, LLC. All Rights Reserved.
</p>
</div>
</body>
</html>
This is sloppy but add
z-index: 900;position: relative;
to the style for:
<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;z-index: 900;position: relative;">
and add
z-index: 1;
to the styles for
<div id="Main" style="padding-left:150px; position: absolute; width: 800px;z-index: 1;">
On an unrelated note I would recommend giving this site or this site a visit if you want to learn good practices and style for html/css/javascript.
The problem is that your "Main" div is covering up the links. And just as I start typing this, I'm called away. In any case, do not trust IE to do this right. Trust Chrome first.
Related
I am currently building my first webpage using a custom font from the CSS. This looks like this:
#font-face {
font-family: "Baiti";
src: url("./fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
.navbar
{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.container{
width:900px;
margin:auto;
}
.box-2 /*targeting class from HTML*/
{
border:8px dotted #ccc;
}
I am now putting some text into my page. Some is inside a table while other is outside of a table:
<html>
<head>
<title>innomotion media</title>
<!--reference CSS file, will only affect CSS PART, HTML comes first-->
<link rel="stylesheet"
type"text/css"
href="styles.css">
</head>
<body>
<!--NavBar-->
<div class="navbar">
Contact
What we do
Who we are
Home
</div>
<!--Heading-->
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
</div>
</body>
</html>
But the result looks like this:
So, if my eyes aren't deceiving me, both texts don't look the same, or do they? To me, the one inside the table seems to be "bolder" or "bigger" in a way? or maybe even a bit darker. However, this cannot be from the HTML code I wrote, or am I just blind here?
The problem is that you are using a th tag, which applies the style font-weight:bold (in my browser at least, and presumably yours).
One simple solution is to add a css rule to override this browser default. A better solution is probably to change the ths (table header) to tds (table cell).
I was able to find this problem by copying your html into the stack editor, then right clicking on the bold text, choosing Inspect, then going to computed properties and looking at the applied properties. I suggest you get comfortable with the inspector; it's invaluable in debugging webpage problems.
th {
font-weight:normal;
}
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
If you use the dev tools in Chrome to inspect the element, you will see that the font-weight is being inherited from the th cell. You should not be using table headers this way.
I would strongly recommend against using table-based layouts in modern web development, but in this instance, you should be putting your header on one row and move your image and paragraph to a new row, using proper td table cells.
[Edit]
To elaborate further, tables are the old way to achieve a small part of what the modern grid properties achieve. To achieve the desired layout, you will need to use two rows, the first of which should span both columns:
.center{
text-align:center;
}
<table border="0">
<tr>
<th colspan=2>
<h1>Julius Tolksdorf</h1>
</th>
</tr>
<tr>
<td class="center">
<img
src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
width=60%
/>
</td>
<td class="center">
<font color="#534f4f" size="+2" >
<p>CEO of innomotion media and head of software developement.
<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</td>
</tr>
</table>
You are applying size = "+2" to all the text and not just the title
Change this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
</font>
To this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
</font>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
Also, check class="box-2" which is assigned only to the first text
Im trying to get the text from the left table cell and right table cell to allign at the same place. Also im using blogger if this helps. Here is a picture of what i want
What i want
Here is my table html
<div id="text1">
Motives are extremely important and not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">
<tbody>
<tr>
<td height="400px" width="425px">
<div id="title1">
Sims with Bad Motives:</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>
</div>
</td>
<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>
</tr>
</tbody></table>
</div>
and here is any css associated with it
#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}
#text1 {
font-size: 15px;
text-align: center;
}
#table1 {
text-align: center;
vertical-align: top center;
}
#table1 {
margin-top: -10px;
}
Gosh, horrible markup. I can barely look at it :)
Nevertheless, you have elements with the same ID on the page > #title1, #table1... IDs are unique. Classes are reusable on the same page. You can use the same ID on different pages, but you can't use two elements with the same ID on the same page.
There is a sort of uniformity you need to apply to your markup, and that's what classes are for. You need sort of a same layout for your left and you right columns.
This is the "fix": jsfiddle.net/swqza86p
What I did was to transform IDs into classes and set your tr elements with the vertical-align: top property.
I'm very new to this so I apologise if this is a simple thing. I seem to be unable to keep the bottom div inside the wrapper, even though it closes after. I've validated the code and this hasn't helped. Please can someone cast some light on where I'm going wrong? Many thanks in advance.
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:300|Raleway:300,700|Droid+Serif:700' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=0.95; maximum-scale=1.0; user-scalable=no;"/>
<link href="/css/simplegrid.css" rel="stylesheet" type="text/css" >
<link href="css/a_main_structure.css" rel="stylesheet" type="text/css" />
<link href="css/birthgently.css" rel="stylesheet" type="text/css" />
<link href="css/menu_styling.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Optima' rel='stylesheet' type='text/css'>
<style type="text/css">
a:link {
color: #8A8A8A;
text-decoration: none;
}
a:visited {
color: #8A8A8A;
text-decoration: none;
}
a:hover {
color: #5F5F5F;
text-decoration: none;
}
a:active {
color: #5F5F5F;
text-decoration: none;
}
body {
background-color: #F4F4F4;
background-repeat: repeat-x;
}
</style>
</head>
<body text="#000000" link="#0000ff" dir="ltr" lang="en-GB">
<div id="container">
<div id="content">
<div class="wrapper">
<div class="width_100_percent" align="center">
<div class="headerStretch">
<img src="images/birthgently-topstrip.jpg" width="960" height="232" alt="alt tag change me"/>
</div>
</div>
<div align="center">
<div class="menuback">
<div class="paddingtop8px">
<nav>
<ul align="centre">
<li>Home</li>
<li>Weekly Class</li>
<li>The Course</li>
<li>Hypnobirthing</li>
<li>Contact</li>
<li>Bookings</li>
</ul>
</nav>
</div>
</div>
</div>
<br />
<div class="width_100_percent">
<div class="width7_percent"> </div>
<div class="width86_percent"><div class="headerStretch"><img src="images/about-hypnobirthing.jpg" width="800" height="469" alt="alt tag change me" /></div></div>
<div class="width7_percent"> </div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left"><h1 class="contentheadings">The principles of Hypno-birthing</h1>
</div>
<p align="left" class="bodytext">Giving birth calmly, safely and gently is every woman's and every baby's birth right. A woman's body has been perfectly designed to give birth to her baby. Free of fear, stress and anxiety her body is able to work in synchrony with her baby to naturally produce a beautiful blend of birthing hormones. <br/>
<br/>
When a woman is calm and relaxed the muscles which assist in the birth her baby are able to work harmoniously and effectively which means she has an easier, more gentle birth that is often also accompanied by a significant reduction in pain. These wonderful birthing hormones and muscles help to ensure that a woman can have the amazing, beautiful and profound experience that nature intended birth to be.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<br />
<br />
<br />
<br />
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> If the birth is calm, gentle & drug free for you, it's also calm, gentle & drug free for your baby - K Graves <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Hypno-birthing is not about training mothers to give birth. It is about helping woman to release fear and anxiety and it teaches them how to use self-hypnosis and relaxation so their bodies and minds can relax and they can birth their babies gently. <br />
<br />
Hypno-birthing is now widely recognised by birth professionals and is regularly discussed in the media. Hypno-birthing is commonly accepted as an effective approach to childbirth with many midwives training in the technique having witnessed 'hypno-births' first-hand. </p>
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The History of Hypno-birthing</h2>
</div>
<p align="left" class="bodytext">More natural and gentle approaches to childbirth including hypno-birthing began in modern times with the work, amongst others, of Dr Grantly Dick-Read, an obstetrician working in England in the early 19th century. His careful observations of women giving birth led him to develop the theory of the 'fear-tension-pain syndrome'.
</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left">
<p class="bodytext">Having witnessed women giving birth easily, calmly and comfortably he concluded that what made the process of birth painful was fear. Fear caused tension in the woman's body and disrupted the natural processes of labour and birth. Dr Dick-Read documented the negative effect of fear on childbirth. In his books he argued that childbirth did not have to be the painful ordeal that women had been led to believe they must suffer. He suggested that when fear is not present a woman can give birth comfortably and pain-free.</p></div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-left"><img src="images/about-hypno.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width29_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My dream is that every woman, everywhere, will know the joy of a truly safe, comfortable, and satisfying birthing for herself and her baby. Marie Mongan <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="center" class="width50_percent">
<div align="left">
<p class= "bodytext">Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p><br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">Getting past fear</h2>
</div>
<p align="left" class="bodytext">One of the main elements of hypno-birthing is the removal of such fears and the use of positive images, positive language and positive affirmations about birth. Marie Mongon, an American hypnotherapist was one of the first people to use the phrase HypnoBirthing. She developed a teaching program for parents to be which she brought to the UK in the early 90's. Since then hypno-birthing has gained in popularity and many practitioners including Katherine Graves have gone on to adapt and enhance hypno-birthing techniques specifically for the UK.
There are now many hypno-birthing practitioners and whilst each have a slightly different approach the key elements of hypno-birthing remain the same - free of fear and tension a woman can give birth to her baby calmly, safely, gently.</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent"><br />
<div class="width15_percent"> </div>
<div align="center" class="width50_percent">
<div align="left"><h2 class="contentsubheadings">birthgently classes
</h2>
<ul type="square">
<li type="square" class="bullets">
<p class="bodytext">teaches deep relaxation which keeps you and your birth partner free of stress and fear</p></li>
<li type="square" class="bullets">
<p class="bodytext"> facilitates your body's production of powerful, natural pain relieving endorphins and feel good hormones</p></li>
<li type="square" class="bullets">
<p class="bodytext"> helps to shorten the length of the first stage of labour</p></li>
<li type="square" class="bullets">
<p class="bodytext"> reduces the need for surgical interventions</p></li> <li type="square" class="bullets">
<p class="bodytext">helps to keep baby calm and well oxygenated</p></li>
<li type="square" class="bullets">
<p class="bodytext"> eaves you and baby feeling calm but alert and able to fully experience those special first few hours together </p></li>
<li type="square" class="bullets">
<p class="bodytext"> empowers you and your birth partner to remain calm and in control even if there are unexpected circumstances</p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="width35_percent">
<div class="headerStretch">
<div class="image-pad-lefttop"><img src="images/grey-baby.jpg" width="265" height="177" /></div></div></div>
<div class="width15_percent"> </div>
<div class="clear_both">
<div class="width_100_percent">
<br />
<br />
<div class="width15_percent"> </div>
<div align="center" class="width70_percent">
<div align="left">
<h2 class="contentsubheadings">The common view</h2>
</div>
<p class= "bodytext" align="left">
Unfortunately the view that labour and birth are painful and traumatic continues to be one which is still widely circulated in the media. Even amongst well meaning friends and family the negative view often persists and pregnant women are frequently bombarded with negative and fear evoking images and stories..</p>
</div>
<div class="width15_percent"> </div>
</div>
</div>
<div class="clear_both">
<div class="width_100_percent">
<div class="width50_percentquotes-right">
<img src="images/open-quotes.jpg" width="30" height="20" alt=""/> My son was born at 4:50am. I sat back having been on all fours, and just stared at him swimming up on his back, eyes open in the water. The midwife had to prompt me to pick him up. I came out of this trance-like state and I scooped him up and suddenly the power of speech returned and I felt euphoric. <br />
AB -hypno-birthing Mum <img src="images/close-quotes.jpg" width="30" height="20" alt=""/></div>
<div align="left" class="width35_percent">
<br />
</div>
</div>
<div class="width15_percent"> </div>
</div>
</div>
</div>
</div>
</body>
</html>
I've had a look at this and cant see what is or isn't happening as desired. Take a look at this JSFIDDLE I've added border the main container and bottom div and it is sitting within the container.
Take a look yourself, add this css to your page to see whats going on
#container
{
border: 1px solid blue;
}
.width15_percent
{
border: 1px solid red;
}
Add overflow: hidden; to .wrapper
<!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.`
So I'm working on this site and for some reason a couple of the pages do not align correctly in firefox and opera, but work just fine in chrome, IE, and Safari. The basic construction is that I have a div with width, height=100%, within the Div i have a table to separate the sections of the page. The left and right side columns should be filling up the remainder of the width of the screen however in firefox and opera the columns have no width, but in IE, Chrome, and Safari they fill up the remainder. In playing with it if i remove the width parameters on the two middle cells it will line up correctly but this causes text alignment issues in chrome, IE, and Safari. How do I get the columns to fill up the page in all browsers?
Here is a link http://its.truman.edu/International/Meet_A_Student.htm
Here is my code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meet A Student</title>
<style type="text/css">
#outer {
opacity: .5;
}
#img1 {
opacity: .3;
}
#table1 {
opacity: 1;
}
</style>
</head>
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
<table style="width: 100%; height:100%; border-collapse:collapse">
<tr>
<td rowspan="4" style="background-color:#2BA7D0; margin-right:0px; height:100%;" id="outer" >
</td>
<td colspan="2" style="text-align: center; background-image: url('Pictures/Header_New.jpg');width:960px; height:100px" valign="bottom" >
<table style="width: 100%; border-collapse:collapse">
<tr>
<td style="width:20%"> <a href="/International/Home.htm">
<button type="button" style="color: black;background: #2BA7D0; border:0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Home
</span>
</button>
</a></td>
<td style="width:20%">
<button type="button" style="color:white; background:#FA7042; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Meet A<br/> Student
</span>
</button>
</td>
<td style="width:20%"> <a href="/International/Available_Funds.htm">
<button type="button" style="border-style: none; border-color: inherit; border-width: 0; background: #2BA7D0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold; WORD-WRAP:break-word">
Available <br /> Funds
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Contact.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Contact <br/> Truman
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Give.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Give
</span>
</button>
</a></td>
</tr>
</table>
</td>
<td rowspan="4" style="background-color:#2BA7D0; height:100%;" id="outer">
</td>
</tr>
<tr>
<td style="width:480px" >
<div>
<img alt="Wanding Shi" src="Pictures/Wanding Shi.jpg" style="float: left; margin-right:10px" width="258" height="389"/>
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">
Wanding Shi
</span><br />
Senior Business Major<br />
<br />
Home Country - China<br />
<br />
"I enjoy the environment at Truman and have
gotten involved in Phi Beta Lambda and the
Bulldog Investment Fund. I am grateful for
the opportunity to get to know students from
different countries while at Truman."
</p>
</div>
</div>
</td>
<td style="width:480px">
<div>
<img alt="Babajide Adio" src="Pictures/Babajide_Adio.jpg" style="float: left; margin-right:10px" width="240" height="389" />
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">Babajide
Adio</span><br />
Senior Biology Major<br />
<br />
Home Country - Nigeria<br />
<br />
"At Truman, I have enjoyed great opportunities
to do research with professors since my freshman
year. I have also gotten involved in a lot of
student organizations including honors
organizations, the African Students Association
and Intramural Soccer and Basketball. The
community is very friendly, and it is easy for
every student to find his or her niche. Since
international students don't qualify for many
scholarships because of citizenship, it would be
wonderful to receive support for international
students."
</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; width:20%; background-image:url('Pictures/Footer_New.jpg')" class="style6" >
<div id="table1"> <table id="table1" style="border-collapse:collapse; width:960px">
<tbody>
<tr>
<td style="text-align:right;font-family:Calibri;margin-bottom:0px; ,margin-top:0px" valign="bottom" >
<p style="font-family:Calibri;font-size:20pt; text-align:center;margin-bottom:0px;margin-top:0px" >
<a href="https://secure.truman.edu/alumni-s/contribution_new.asp" style="text-decoration:none; color:black">
Make a Contribution
<span style="color: #FA7042; font-weight:bolder">
TODAY!
</span>
<span style="text-decoration: underline">
<br/>click here
</span>
</a>
</p>
</td>
<td style="text-align:right;font-family:Calibri;">
<span style="font-size:14pt;font-weight:bold; padding-right:40px">
Truman State University
</span> <br />
<span style="font-size:12pt">
Office of Advancement | McClain Hall 205 <br />
100 E. Normal Avenue |Kirksville, MO 65301</span>
</td>
<td style="font-family:Calibri;border-left-style: solid;border-left-width: 1px; margin-left:10px; text-align:left">
<span style="font-size:14pt;font-weight:bold;padding-left:50px">
<a href="www.truman.edu">
www.truman.edu
</a>
</span>
<br />
<span style="font-size:12pt; margin-left:5px;">
(660) 785-4133 or (800) 452-6678
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#2BA7D0; margin-right:0px; height:100%" id="outer" class="style3">
<br />
<br />
</td>
</tr>
</table>
</div>
</body>
</html>
I suggest the following for you main div and body style:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-
HomepageColor.jpg'); clip:auto; overflow:hidden;">
<div style="margin:0px auto">.....
Ok and for the content: Why do you have so many Divs inside your table? The use of a table defeats the need for using a Div in most cases, so I suggest you take out all the divs in the table. If you want something to behave like a block element such as the images, set display: block or inline-block.
As for all the dimensions: You defined too many widths and heights. Do not assign the widths in pixels to the td tags, the size of the images will do their job. You can specify their dimensions. Try that and let me know.
"for some reason a couple of the pages do not align correctly in firefox and opera"
You can quikly fix that problem by adjusting this part of your code:
CHANGE THIS:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
TO:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:relative; height:100%; margin:0px auto">
The issue is that if you give position:absolute; your are removing the element from the normal document work-flow, thus causing the margin: 0 auto; to be meaningless.
What I did was to change the position:absolute; to position:relative; thus having the margin:0 auto; being "respected" by the browser.
EDITED
To solve the mentioned issue on your comment, you just need to set the html height to 100%;.
CSS
html {
height: 100%;
}
Note: This will tell the browser that the document has a height of 100%, thus causing the body and body>div height of 100% to extend till the end of the document.