www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS Issues - Please Help!

  1. #1
    Join Date
    Jul 2012
    Posts
    3

    CSS Issues - Please Help!

    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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    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!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jul 2012
    Posts
    3
    <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.

  4. #4
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    I would start by cleaning up the lists... e.g. instead of
    Code:
    <li><a href="packages.html">Football Packages</a>
    
    <ul class="dropdown">
    <div>
    <ul>
    
    <ul><li>......... </li>...
    </ul>
    </ul>
    </div>
    </ul>
    </li>
    try

    Code:
    <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
    Last edited by captainscall; 07-20-2012 at 01:05 PM.

  5. #5
    Join Date
    Jul 2012
    Posts
    3
    Thanks a lot guys got it all working now

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles