jQuery Menu Goes Under Images & Page Spaceing To Long?

HTML & CSS
1

Hi,

Our website http://www.1tm.com works fine in most browsers but in IE the jQuery drop-down menu “RESELLER HOSTING” goes under the images. I tried using z-index but didn’t work.

Also theirs a huge page space between my testimonial "“Thanks for the great service and making your site easy” and the footer “1 Tech Media © 2010”

Any help would be appreciated.

Thanks!

2

Hi,

Don’t take this the wrong way as it’s meant to be constructive but that page is probably beyond saving and I would recommend you start again from scratch.

There are just too many broken elements and errors that I don’t think you will ever get this to work properly and you will keep running into issues.

Here are just a few of the things wrong:

1)The doctype is an old doctype that forces quirks mode in various browsers and means that IE will use the broken box model and behave more like ie5. It also means that newer versions of IE lose all their enhancements such as the ability to hover on elements other than anchors.

  1. However, you can’t upgrade the doctype because you have very broken code and a standard doctype will choke on all the errors.

  2. Some of the errors are listed below:


<br>
<br>
<br>
<br>
<br>
<br>
[B]</tr>[/B]
<tr>

There is a closing tr tag but above it is no table structure at all. It’s as though the table has been cut off at that point.

Monstrosities like this with inline styling and font tags and missing units on dimensions:


<p style="line-height: 240%; margin-left:15; margin-right:15; margin-top:10; margin-bottom:0" align="justify"> <font color="#666666" face="Arial" size="3">1 Tech Media  offers&nbsp; unlimited <a href="whm_cpanel_master_reseller_hosting.html"><font color="#737373"> <b>WHM / cPanel&#8482; Master Reseller Hosting</b></font></a><font size="3" color="#666666"> 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&#8482; control panel.</font></p>

Missing closing tags on nested elements (and missing units and inline styling).


<ul id="nav-one" class="dropmenu">
        <li> <a href="#" class="changeimage"></a>
            [B]<div class="products" style="position:absolute; left:145; top:76">[/B]
            <ul>
                <li><img src="http://www.1tm.com/background_40.gif" width="40" height="40" border="0">
                    <h2><a href="whm_cpanel_reseller_hosting.html">cPanel Reseller Hosting</a></h2>
                    <p>Unlimited cPanel Accounts</a></p>
                </li>
                <li><img src="http://www.1tm.com/background_41.gif" width="40" height="40" border="0">
                    <h2><a href="whm_cpanel_master_reseller_hosting.html">Master cPanel Reseller Hosting</a></h2>
                    <p>Unlimited WHM / cPanel Reseller Accounts</p>
                </li>
                <li><img src="http://www.1tm.com/background_44.gif" width="40" height="40" border="0">
                    <h2><a href="whm_cpanel_alpha_reseller_hosting.html">Alpha cPanel Reseller 
                        Hosting</a></h2>
                    <p>Unlimited WHM / cPanel Master 
                        Accounts</p>
                </li>
            </ul>

The list goes on :slight_smile:

I am reluctant to offer you a fix as I know that you will apply it and not do anything about the issues I mentioned but you can make the drop down appear on top in IE by adding a z-index at an appropriate point.


<body style="background:url('http://www.1tm.com/background_9.gif'); background-repeat:repeat-x; background-color:#EAEAEA;">
<div style="border:1px solid black; position:absolute; width:720px; left:50%; margin-left:-360px; border:0px solid black; top:0p[B]x;z-index:999[/B]"> <img src="http://www.1tm.com/logo.gif" usemap="#logo" width=145 height=105 border="0" style="position:absolute; left:0px">

As you have not progressed that far with this page I would urge you to start again with a full valid doctype and remove all the inline styling, deprecated presentational attributes and then control the presentation from the css.

Validate the code and fix all the broken tags and structures.

Once you have clean code things will progress much more easily and issues can be solved quickly.

3

Thanks for the reply, I know the site needs to be really really updated.

Any way to make it so theirs not a huge space between the testimonial and the “bottom footer” of the page?

Thanks z-index worked!

4

In the css you have set all tables and tds to be 100% high hence the massive gaps.


table {
    border:0px none;
    border-collapse:collapse;
    color:#737373;
    font-family:Arial;
    font-size:14px;
   [B] /*height:100%;*/[/B]
    line-height:14px;
    width:100%
}
td {
    border:0px none;
  [B]  /*height:100%;*/[/B]
    padding:0;
    vertical-align:top;
    width:100%
}
5

It worked! Within a month the entire site should be tableless.

Anything else you would recommend?

I really want this to be an awesome website.

Thanks for all the help!

6

Glad you are making progress :slight_smile:

I mentioned the major issues above so just work your way through them and I’m sure you’ll get there eventually. :wink: