CSS Issues - Please Help!

[mattycl]

Hi everyone,
Made this website last night - www.crashpadsport.co.uk and the website is displaying fine in Google Chrome but messing up in IE. The second level navigation (above the slideshow of images) is displaying incorrectly. The Manchester Accommodation should be next to the Liverpool Accommodation however its dropping down below the home link for some reason. Also at the foot of the page it is not displaying correctly. The edges should be rounded properly at the bottom and after the white rounded page end there should be a few pixels of blue (as it is at the head of the page) with some links on. Any help would be greatly appreciated!
Thanks, Matt

[rtrethewey]

I ran your page through the W3C's HTML and CSS validators and there are a lot of errors. The overwhelming majority are nit-picks and other issues that aren't really errors, but there are a handful of actual errors and typos that you should deal with. Once you clear out those problems, it should be easier to see where the real issues lie. Good luck!

[mattycl]

<ul id="nav">


<div id="nav_wrapper">
<ul id="nav">
<li><a href="index.html">Home</a> </li>


<li><a href="packages.html">Football Packages</a>

<ul class="dropdown">
<div>
<ul>

<ul><li><a href="manupackages.html">Manchester United Packages</a></li>
<br />

<li><a href="mancitypackages.html">Manchester City Packages</a></li>
<br />

<li><a href="liverpoolpackages.html">Liverpool FC Packages</a></li>
<br />

<li><a href="evertonpackages.html">Everton FC Packages</a></li>
<br />

<li><a href="champsleague.html">Champions League Packages</a></li>
<br />

<li><a href="europa.html">Europa League Packages</a></li>
<br />

<li><a href="worldcup.html">World Cup 2014 Packages</a></li>
<br />

</ul>
</ul>
<div class="menu_clear"></div>
</div>
</li></ul></li>



<li><a href="accommodation.html">Liverpool Accommodation</a>

<ul class="dropdown">
<div>
<ul>
<ul>
<li><a href="accommodation.html#travelodge">Travelodge Liverpool</a></li>
<br />

<li><a href="accommodation.html#premier">Premier Inn Liverpool</a></li>
<br />

<li><a href="accommodation.html#holidayinn">Holiday Inn</a></li>
<br />

<li><a href="accommodation.html#jurys">The Jury's Inn Hotel</a></li>
<br />

<li><a href="accommodation.html#adelphi">The Liverpool Adelphi</a></li>
<br />

<li><a href="accommodation.html#thistle">Atlantic Thistle Hotel</a></li>
<br />

<li><a href="accommodation.html#base">Base 2 Stay</a></li>
<br />

<li><a href="accommodation.html#hiltonl">Hilton</a></li>
<br />

<li><a href="accommodation.html#elysian">Elysian Fields</a></li>
<br />

<li><a href="accommodation.html#staten">Staten Court</a></li>
<br />
<li><a href="accommodation.html#casartelli">Casartelli Apartments</a></li>
<br />

</ul>
</ul>

<div class="menu_clear"></div>
</div></li></ul>

<li><a href="manchesterhotels.html">Manchester Accommodation</a>

<ul class="dropdown">
<div>
<ul>
<ul><li><a href="manchesterhotels.html#place">Place Apartments</a></li>
<br />

<li><a href="manchesterhotels.html#piccadilly">Piccadilly Central Apartments</a></li>
<br />
<li><a href="manchesterhotels.html#wilmslow">The Wilmslow Hotel</a></li>
<br />

<li><a href="manchesterhotels.html#lodge">The White Lodge Hotel</a></li>
<br />

<li><a href="manchesterhotels.html#days">The Day's Inn Manchester</a></li>
<br />

<li><a href="manchesterhotels.html#jurys">The Jury's Inn Hotel</a></li>
<br />

<li><a href="manchesterhotels.html#hilton">The Hilton Hotel</a></li>
<br />

<li><a href="manchesterhotels.html#mercure">The Mercure Manchester Piccadilly Hotel</a></li>
<br />

<li><a href="manchesterhotels.html#lowry">The Lowry Hotel</a></li>
<br />
</ul>
</ul>
<div class="menu_clear"></div></div></li></ul></li>



<!-- end nav -->



<div class="clear_left"><!-- clear --></div>

</div>

<!-- end page top -->

<!-- ********************* END HEADER ********************** -->

Could you please advise where I've gone wrong here. Having no luck getting my head around it.

[captainscall]

I would start by cleaning up the lists... e.g. instead of

<li><a href="packages.html">Football Packages</a>

<ul class="dropdown">
<div>
<ul>

<ul><li>......... </li>...
</ul>
</ul>
</div>
</ul>
</li>

try

<li><a href="packages.html">Football Packages</a>

<ul class="dropdown">
<div>

<ul><li>........</li>....

</ul>
</div>
</ul>
</li>

That extra <ul> is not necessary.

Next, avoid using breaks within a list. If you want the list to be vertically displayed simply use {display: block;} on the <li> css

[mattycl]

Thanks a lot guys got it all working now