Skip navigation

Web design

j.estle2012 Calculating status...

Currently Being Moderated

<li> elements create huge boxes in the middle of pages? Need Fix

Jul 10, 2012 12:20 PM

Tags: #dreamweavercs5.5

All of the <li> tags, including those found in the spry horizontal menu bar and the body create large empty boxes near them when rendered in browsers off the remote server, even though they tested perfectly in live view and in all browsers on the local server.

You can see the problem at www.hbarber.com/test/howitworks.html and see the css sheet at www.hbarber.com/include/barberstyle.css.

I've played with every applicable <ul> and <div> css rule, validated the html, and checked to make sure the widths of all the components fit together.

Any help to get rid of the boxes and make lists functional again would be greatly appreciated! Thanks

804 Views 2 Replies Latest reply: Nancy O., Jul 13, 2012 12:18 PM

Replies

Currently Being Moderated

1. dweb3d.com,

Jul 12, 2012 10:14 PM in reply to j.estle2012

Report

Hello, a have seen your css stylesheet and have a few errors:

1. try to keep in lowercase, only a coding practice

2. look at the w3c css validator jigsaw.w3.org/css-validator/ you have 10 errors in your code, maybe any things don´t be good

3. look at your code this part

ul
{
margin: 12px 6px 12px 14px;
padding: 0px 0px 0px 0px;
width: 100%;
height:auto;
}

pray attention to width: 100%;
the order takes the ul elements at 100% of page width, try to fix this.

greeting and don´t doubt to comment

--
http://dweb3d.com

|
Mark as:
Currently Being Moderated

2. Nancy O.,

Jul 13, 2012 12:18 PM in reply to j.estle2012

Report

z index is not a valid CSS property (no spaces allowed). It should be z-index (with a dash).

Replace this in your Spry CSS code:

ul.MenuBarHorizontal li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 144px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    color: #000;
    z index: 5000;
     }

With this:

ul.MenuBarHorizontal li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 144px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    color: #000;
   z-index: 5000;
     }

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Web design

<li> elements create huge boxes in the middle of pages? Need Fix

Jul 10, 2012 12:20 PM

More Like This

Bookmarked By (0)

Answers + Points = Status