While I was trying to style my footer, and checking it in Firefox, i encountered an error that the facebook, etc icons were not showing up. This is the sample footer html code.
<div id="footer">
<div id="footer_content">
<div id="footer_left">
<!-- JP Morgan && Force For Good Signature -->
<div id="jp_right_content_main">
<div id="jp_right_content_inner1">
<font color="#FFFFFF" size="4" font-family="Times New Roman">In Assocaition with:</font> <br /> <img
class="header-photo" width="280" height="70" alt="JPM Logo"
src="images/Logo_JPM.jpg"></img>
<h1 class="header11">
<font color="#ED872D">Force</font> <font color="white">For</font> <font
color="green">Good</font>
</h1>
</div>
<div id="right_content_inner2">
<img src="images/partner_pic.png" width="130" height="130" />
</div>
</div>
</div>
<div id="footer_right">
<a href="http://www.facebook.com/Unitedwaymumbai" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/facebook.gif"
height="27" width="16"></a><a
href="http://www.youtube.com/unitedwaymumbai" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/youtube.gif"
height="27" width="34"></a><a
href="http://www.linkedin.com/company/united-way-of-mumbai"
target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/linkdin.gif"
height="27" width="26"></a><a
href="http://twitter.com/mumbaihelpline" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/tweeter.gif"
height="27" width="32"></a><br>
<p class="text7">
Copyright United Way Mumbai & J.P.MORGAN SERVICS INDIA PVT LTD. All
Rights Reserved. <a href="sitemap.htm"><span class="text8">Sitemap</span>
</a>Page Designing By <a href="http://www.force4g.com"
target="_blank" class="text8">FORCE FOR GOOD | TEAM : T.U.R.C.S</a>.
</p>
<div id="contact_text" class="header5">Contact: 022-24937676 / 79
or Email: contact#unitedwaymumbai.org</div>
</div>
</div>
</div>
And its corresponding css:
#footer{width:100%; height:auto; border:0px solid black; float:left; background:url('../images/footer_bg.gif') repeat-x;}
#footer_content {width:959px; height:auto; margin-left:auto; margin-right:auto; margin-bottom:30px }
#footer_left {width:491px; float:left; margin-top:16px; margin-bottom:25px; }
#footer_right {width:468px; float:left; margin-top:16px; }
#jp_right_content_main { height:159px; width:468px; float:left; margin:0; padding:0; background-image:url(../images/partner_bg.png); background-repeat:no-repeat}
#jp_right_content_inner1 {width:311px; height:127px; margin-left:27px; float:left; margin-top:5px;}
The facebook, twitter etc png images are not showing up.
Any help would be appericiated.
Regards,
Vivek
And the moral of the story is: Make sure your images are linked correctly.
And for future reference, setting things up on sites like JS fiddle not only helps other people troubleshoot your problem, but gives you a chance to redo what you've already done and catch small errors (like this one).
Related
I recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
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>
I have a rotating carousel done using webkit animation and CSS. There are 3 items under the carousel and each item has a photo and a blurb of text. I'm trying to link the text to 3 different links.
Right now all 3 text boxes are linked to the same link ( the last one ). I have a feeling it might have something to do with z-index, but I'm not sure. I've put all my code into a jsfiddle.
http://jsfiddle.net/LGbbf/1/
Any help is appreciated!
HTML code involved
<div class="gallery-area">
<ul>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/IYF-Family-Treasures.jpg" /> </div>
<div class="txt-box">
<p>Send in a photo of your family, friends and neighbours enjoying the Chinese New Year festivities and stand to WIN a $400 IKEA Gift Card ANG BAO! <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/cny.png" /> </div>
<div class="txt-box">
<p>Chinese New Year is a time when families get together to celebrate. Check out the events where you and your family can celebrate during this festive period. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
<li>
<div class="img"><img alt="" width="765" height="323" src="http://app.msf.gov.sg/Portals/0/Files/IYF/AboutIYF_carousel_ver4.png" /> </div>
<div class="txt-box">
<p>2014 is the International Year of the Family. We invite all to join us in the spirit of love and respect, commitment and big-heartedness. <img alt="" width="6" height="10" src="http://app.msf.gov.sg/Portals/0/Files/IYF/img-arrow.png" /></p>
</div>
</li>
</ul>
</div>
CSS code involved
.info-img-box {
box-shadow:0 9px 6px -6px #929292;
-webkit-box-shadow:0 9px 6px -6px #929292;
overflow:hidden;
position:relative;
margin:0 0 32px;
}
.info-img-box img {
vertical-align:top;
}
.info-img-box .txt-box {
position:absolute;
bottom:0;
left:0;
width:100%;
background:url(http://app.msf.gov.sg/Portals/0/Files/IYF/bg-txt-box-img.png);
padding:8px 0 10px;
}
.info-img-box .txt-box img{
vertical-align:middle;
}
.info-img-box .txt-box p {
margin:0 13px;
font:13px/16px "Lato", Arial, Helvetica, sans-serif;
}
.info-img-box .txt-box a {
color:#fff;
text-decoration:none;
}
.info-img-box .txt-box a:hover {
text-decoration:underline;
}
.quote-area:after {
content:"";
clear:both;
display:block;
}
just Try this It's working
Change Keyframe css
css:
#-webkit-keyframes round{
0%{opacity:1; z-index:1111}
27%{opacity:1; z-index:1111;}
33%{opacity:0; z-index:0;}
94%{opacity:0; z-index:0;}
100%{opacity:1; z-index:1111;}
}
#keyframes round{
0%{opacity:1; z-index:1111}
27%{opacity:1; z-index:1111;}
33%{opacity:0; z-index:0;}
94%{opacity:0; z-index:0;}
100%{opacity:1; z-index:1111;}
}
Here is updated fiddle http://jsfiddle.net/LGbbf/3/
Hope It Helps you :)
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.
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.