Drop Down Menu Goes Under Images IN IE

Hi,

Our drop down menu “Reseller Hosting” on our website goes under our sliding images in Internet Explorer on our main index page: http://www.1tm.com

Any help would be appreciated,

Thanks!

Hi. Welcome to Sitepoint! I don’t know if you just made this site or that it is an inheritance from someone else but I would advise you to redesign! Before I even reached the tab resellers hosting, which is in the header, I stumbled upon 7 tables.

Thanks for the welcome, I know we are working on the site right now. Is there a quick solve for the drop down overlay issue?

Thanks!

did you try to set a z-index property for dropmenu


ul.dropmenu{
color:#FFFFFF;
display:block;
font-family:Arial;
font-size:12px;
height:0;
margin:0;
padding:0;
position:relative;
text-decoration:none;
z-index: 100;
}

Awesome it worked! thanks for the code! one more question on the bottom of all the table on our services pages show a small white line in IE any quick fix for that? like this: http://www.1tm.com/cpanel_web_hosting.html

Thanks!

Do you mean the white line just above the blue menu at the bottom?

like the “Web Hosting Overview” box on the right bottom there a small white line.

Thanks!

This obviously has to do with all the images you are using to create the drop shadow effect. Since you have most of the styles set on the tables, tr’s and td’s, I don’t see a quick fix, but maybe someone else around has a solution.

Like I already said in post #2, you might as well redesign the site! Since you know how you would like to have the layout this can be done quite quick I figure. If you keep it this way you will discover all kind of other hick ups and it will become very soon a start without an end or worse a nightmare.

How would you recommend us redesigning the site?

Thanks!

Well it is basically the a two columns site. For the overviews you need to keep using tables since the content is tabular data but for the rest (menus, columns etc…) you could use divs. Give me a little time and I will make a first set up

Cool thanks for all the help!

Hi, As donboe mentioned that page really needs a re-design as there are just too many things to put right quickly.

You are using quirks mode (via your doctype) which is the only reason that the page is displaying relatively well because all the broken code is being managed for you. Unfortunately quirks mode is not really an option these days especially as you relegate all versions of IE into the last century as far as rendering is concerned.

However, you can’t change the doctype now unless you address all the multiple issues in the page of which there are too many to go into detail (invalid nestings and multiple and missing tags.)

A re-design would be better and quicker :slight_smile:

A quick and nasty fix for IE would be to apply a negative margin to the bottom of the table to drag the shadow image flush and obscure the gap.

e.g.


* html table{margin-bottom:-1px}

Of course you may need to target specific tables if the above rules has adverse effects elsewhere.

I needed to finish some of my own work so I had to do it in between. This is just a rough layout so adding the tables for the tabular data etc, you need to do your self :wink:


html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; 
	padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

html, body {
	height: 100%;
}

body {
	background: #EAEAEA url(../images/bg.gif) repeat-x;
	font: Arial, Helvetica, sans-serif 100%;
	color: #474747;
}

#wrapper {
	width: 766px;
	min-height: 100%;
	margin: 0 auto;
	font-size: .875em;
	position: relative;	
}

* html #wrapper {
	height: 100%;	
}

#header {
	width: 100%;
	position: relative;
	z-index: 10;
}

#header .logo {
	width: 145px;
	float: left;	
}

#header .logo h1 a {
	width: 145px;
	height: 104px;
	display: block;
	background: url(../images/logo.gif) no-repeat;
	text-transform: uppercase;
	text-indent: -999em;	
}

#header .headline {
	width: 569px;
	height: 40px;
	line-height: 40px;
	float: left;
	text-align: center;
}

#header .headline h1,
#header .headline h2{
	float: left;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 160%;
	font-weight: 700;
	color: #000;	
}

#header .headline h1 span {
	color: #FF0000;	
}

#header .headline h2{
	margin: 4px 0 0 15px;
	font-size: 110%;
}

#header .top-nav,
#header .bottom-nav {
	margin-right: 20px;
	float: right;
	border: solid #FFF;
	border-width: 1px 1px 0 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 105%;	
}

#header .bottom-nav {
	margin-left: -145px;	
}

#header .top-nav li,
#header .bottom-nav li {
	float: left;	
}

#header .top-nav li a,
#header .bottom-nav li a {
	height: 31px;
	line-height: 31px;
	padding: 0 12px;
	display: block;
	background: #9966FF;
	text-align: center;
	color: #FFF;
	text-decoration: none;	
}

#header .bottom-nav li a{
	padding: 0 20px; 
	background:#1F78FD url(../images/bottom-line.png) 100% 0 no-repeat;
}

#header .bottom-nav li a span {
	font-weight: 700;	
}

#header .bottom-nav li a.last{
	padding: 0 12px; 
	background:#1F78FD none;
}

#header .secure {
 	width: 52px;
	height: 104px;
	float: right;
	background: url(../images/secure.gif) left top no-repeat;	
}

#content {
	width: 100%;
	margin: 40px 0;
	float: left;
	overflow: hidden;
	z-index: 1;
}

#content .left,
#content .right {
	width: 536px;
	min-height: 100px;
	margin-right: 20px;
	float: left;
	display: inline;
	background: #CCC;
}

#content .right {
	width: 210px;
	margin-right: 0;
	display: block;	
}

#content .left p,
#content .right p {
	margin: 15px;
	font-size: 1.2em;		
}

#footer-wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: #DDDDDD url(../images/footer.gif) repeat-x;	
}

#footer {
	width: 766px;
	margin: 0 auto;
	overflow: hidden;	
}

#footer-nav {
	width: 766px;
	margin-top: 4px auto 0;
	position: relative;
	text-align: center;
}

#footer-nav li {
	width: 191px;
	float: left;	
}

#footer-nav li a{
	width: 45%;
	height: 28px;
	line-height: 28px;
	display: inline-block;
	text-align: center;	
	color: #FFF;
	text-decoration: underline;
}

#footer-nav li a.clients {
	padding-left: 18px; 
	background: url(../images/clients.gif) 3px 6px no-repeat;
}

#footer-nav li a.chat {
	padding-left: 18px; 
	background: url(../images/live_chat.gif) 3px 8px no-repeat;
}

#footer-nav li a.order {
	padding-left: 18px; 
	background: url(../images/order_now.gif) 3px 6px no-repeat;
}

#footer-nav li a.affiliates {
	padding-left: 10px; 
	background: url(../images/affiliates.gif) 3px 4px no-repeat;
}

#footer-copyright,
#footer-payments {
	width: 668px;
	height: 70px;
	line-height: 70px;
	margin: 0 0 0 49px;
	float: left;
	text-align: center;
}

#footer-copyright {
	font-family: Arial, Helvetica, sans-serif;	
}

#footer-payments {
	background: url(../images/payments.gif) no-repeat;		
}

#footer-text {
	width: 766px;
	padding: 40px 0;
	position: relative;
	overflow: hidden;
	clear: both;
}

#footer-text p {
	margin: 20px 0;
	font-size: 1.2em;
	line-height: 1.2;
	
}

#footer-text p:first-child {
	margin-top: 0;	
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 Tech Mediat</title>
<link 	rel="stylesheet" 
		type="text/css" 
        href="css/layout.css" 
        media="screen, print" /> 
</head>

<body>

<!-- Start Wrapper -->
<div id="wrapper">
<!-- Start Header -->
<div id="header">

<!-- Start Logo -->
<div class="logo"><h1><a href="http://www.1tm.com" title="">1 TM Homepage</a></h1></div><!-- // End Logo -->

<!-- Start Headline -->
<div class="headline"><h1>1 Tech Media <span>Hosting</span></h1> <h2>1-800-369-7566</h2></div><!-- // End Headline -->


<!-- Start Secure Logo -->
<div class="secure"></div><!-- // End Secure Logo -->

<!-- Start Top Nav -->
<ul class="top-nav">
<li><a href="#">Reseller Hosting</a></li>
<li><a href="#">Virtual Private Server</a></li>
<li><a href="#">Semi-Dedicated Server</a></li>
</ul><!-- // End Top Nav -->

<!-- Start Bottom Nav -->
<ul class="bottom-nav">
<li><a href="#"><span>Live Cha</span>t</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Web Hosting</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#" class="last">Script Installation</a></li>
</ul><!-- // End Bottom Nav -->

</div><!-- // End Header -->

<!-- Start Tables Content -->
<div id="content">

<div class="left">
<p>Tables left</p>
</div>

<div class="right">
<p>Tables right</p>
</div>

</div><!-- // End Tables Content -->

</div><!-- // End Wrapper -->

<!-- Start Footer -->
<div id="footer-wrapper">
<div id="footer">

<ul id="footer-nav">
<li><a href="#" class="clients">Client Login</a></li>
<li><a href="#" class="chat">Live Chat</a></li>
<li><a href="#" class="order">Order Now</a></li>
<li><a href="#" class="affiliates">Affiliates</a></li>
</ul>

<div id="footer-copyright">
1 Tech Media © 2010 &#9474; Legal Document And Privacy Policy  Secured BY COMODO™
</div>

<div id="footer-payments"></div>


<div id="footer-text">
<p>Welcome to 1 Tech Media one of the leading hosting and web service providers on the internet. We offer affordable unlimited cPanel™ Web Hosting to help you make your online presence get noticed. We offer unlimited storage space and unlimited file transfer so you can rest assured you will never be billed for going over the limits. Our WHM / cPanel™ Reseller Hosting solution was designed to help you to improve your sales by offering superior support and fast servers. WHM / cPanel™ reseller accounts come with unlimited storage space and unlimited file transfer so you can watch your business grow without boundaries. 1 Tech Media offers  unlimited WHM / cPanel™ Master Reseller Hosting which is designed for serious web hosting companies who would like to create reseller accounts for their clients. Instantly create unlimited reseller accounts from your WHM / cPanel™ control panel. One of our most unique plans is our unlimited WHM / cPanel™ Alpha Reseller Hosting solution where you can create unlimited WHM / cPanel™ master reseller accounts, unlimited WHM / cPanel™ reseller accounts, and unlimited regular cPanel™ accounts for your clients. Alpha reseller is the last reseller account you will ever need.</p>

<p>We offer Virtual Private Server service where you get complete control over the server. This includes WHM / cPanel™ where you can create unlimited cPanel™ accounts. Also included is Fantastico which automates the installation of scripts for your websites. If you have allot of server activity we recommend our Semi-Dedicated Server where you get massive amounts of server resources and very small amount of clients on the server. This will make your website a powerhouse and it includes 5,000 GB file transfer.</p>

<p>Our Professional Web Design service is very popular for creating high-end websites that deliver results. We will work with you to create your perfect website using advanced designing software and creative web designers. Our Professional Script Installation is very affordable and most scripts are installed in less then 12 hours. We have installed many scripts for clients and use advance installation techniques.</p>

<p>With our Free Affiliate Program clients get an affiliate control panel, affiliate campaign tracking, real-time statistics, banners and links, and 24 / 7 support tickets &amp; chat. Payments are sent out weekly via check as long as you have made $25 or more. There is absolutely no setup cost and signing-up is 100% free.</p>

<p>We have carefully put together our service solutions to meet the needs of all potential users, ranging from the home user through to the commerce business user. 1 Tech Media has proven itself to be a leader in the technology services field. We're not going anywhere and have secured a long future in this business.</p>
</div>

</div>
</div><!-- // End Footer Content -->

</body>
</html>



I hope you can do something with this

Hey yeah code looks allot cleaner thanks for the help ill see if I can slowly start cleaning the code to match your touch.

Thanks!

ps. If you need web hosting let me know your e-mail address.

You’re welcome. I will pm the files in a zip