why won't the menu fit? 2

[1DMF]

I have managed to get he menu horizontal and even with the image for the background, but I cannot get the menu to start on the left hand side.

There is a space I cannot get rid off and so the last menu tab is dropping to the next line.

old menu using tables and html :

http://www.stepnstomp.co.uk/menu-nocss.gif

new menu with css :

http://www.stepnstomp.co.uk/menu-css.gif

CSS......

/** Dropdowns **/
#nav ul { /* all lists */
padding: 0px;
margin: 0px;
list-style: none;
float: left;
width: 90px;
position:relative;
overflow:visible; 

}

#nav li { /* all list items */
position: relative;
float: left;
width: 90px;
display:block;
height:auto;

}

#nav li ul { /* second-level lists */
position: absolute;
left: -1000px;
margin-left: -35px;
margin-top: 0px;
}

#nav li a {
width: 90px;
display: block;
/*font-weight: bold;*/
text-decoration: none;
padding: 0px 0px;
margin: 0;
color: #FFFFFF;
background: #5D7AC5;
text-shadow: 0px 1px 1px rgb(250,250,250);
}	
#nav li a:hover {
color: #FFFFFF;
background: #5D7AC5;
border: 1px solid rgb(100,100,100);
text-shadow: 0px 0px 3px rgb(250,250,250);
}
#nav li a {
border-top: 1px solid rgb(240,240,240);
border-right: 1px solid rgb(160,160,160);
border-bottom: 1px solid rgb(160,160,160);
border-left: 1px solid rgb(240,240,240);
}

#nav a.encl {
background: #5D7AC5 center no-repeat url('[URL unfurl="true"]http://www.stepnstomp.co.uk/images/buttons/button1up.gif');[/URL]
border-top: 0px solid rgb(240,240,240);
border-right: 0px solid rgb(160,160,160);
border-bottom: 01px solid rgb(160,160,160);
border-left: 0px solid rgb(240,240,240);
height:25px;
padding:1px;
}	

#nav a.encl:hover {
background: #5D7AC5  center no-repeat url('[URL unfurl="true"]http://www.stepnstomp.co.uk/images/buttons/button1up.gif');[/URL]
border-top: 0px solid rgb(240,240,240);
border-right: 0px solid rgb(160,160,160);
border-bottom: 01px solid rgb(160,160,160);
border-left: 0px solid rgb(240,240,240);
height:25px;
padding:1px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.iehover ul ul, #nav li.iehover ul ul ul, #nav li.iehover ul ul ul ul {
left: -1000px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.iehover ul, #nav li li.iehover ul, #nav li li li.iehover ul, #nav li li li li.iehover ul{ /* lists nested under hovered list items */
left: auto;
}

/** Support for the "iehover-fix.js" **/
#nav iframe {
position: absolute;
left: 0;
top: 0;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}


/** end **/

Why is CSS so dificult to understand and use? but i'm close - real close!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

You're giving us images and want us to know why one image is shifted and the other is not. Please give us the link to the page, or at least the html and css. Without that all we can do is guess.

 

[1DMF]

html is here :

<table width="100%" border=0>
        <tr>
        <td width="100%" align="center" >
         <ul id="nav">
	        <li><a href="#" title="" class="encl">Company</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 
	        <li><a href="#" title="" class="encl">Guestbook</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 

	        <li><a href="#" title="" class="encl">Music</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 

	        <li><a href="#" title="" class="encl">Radio</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 

	        <li><a href="#" title="" class="encl">Msg Board</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 

	        <li><a href="#" title="" class="encl">Chat Room</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 

	        <li><a href="#" title="" class="encl">Links</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 

	        <li><a href="#" title="" class="encl">Free Fun</a>	
				<ul>
				<li><a href="#" title="">Menu 1.1.1</a></li>
				<li><a href="#" title="">Menu 1.1.2</a></li>
				<li><a href="#" title="">Menu 1.1.3</a></li>
				<li><a href="#" title="">Menu 1.1.4</a></li>
				</ul>
			</li> 
        </ul> 
        </td>
        </tr>
        </table>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Most of your css talks about an unordered list element (<ul>) inside an element that has an id of "nav". Looking at your html however, the element with the id of nav is actually the ul itself. That means that some of your css won't be applied, or will be applied to wrong things. I suggest you do either:

1. change your css to read ul#nav instead of #nav ul in all the occurances;
2. give the td that embraces the ul an id of nav and remove this id from the ul element.

Your choice.

 

[1DMF]

I don't get this, I've tried both suggestions and the result is the same, they just keep stacking 1 on top of each other..

http://www.stepnstomp.co.uk/change1.gif

I know how I can get it to do what I want, it's long winded and extra code, but at least it works, which is what it's all about, getting it to do what YOU want, not what IT wants.

I can just create 8 #nav css defined the same ie. nav,nav1,nav2 etc... and change the iehover-fix.js to cycle through all eight applying the Iframe. Then break the table into 8 <TD> cells and put each of the menu UL lists in each cell.

It does excatly what I want doing it that way, unless anyone has another solution?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

oh also if you completely remove the #nav ul (based on you saying it wasn't doing anything) the select list then shows over the top of the menu, which is what i'm attempting to try to fix.

So I guess that #nav ul is needed as the JS uses it to put the iframe round it to solve the select list ie bug.

IT would seem all works 100% as I have it except I can't get it to start on the far left and fit all menu's on one row?

What is it doing this? is it some sort of clipping problem? I have no idea why it won't go hard left and fit, I have checked and can't see any margin or padding defind in the css and if it was that, wouldn't put the same gap between all the menu buttons?

Oh well, if anyone can shed some light i'd very much appreciate it, this CSS thing does my head in, I can't understand why it behaves the way it does, you lot must be far cleverer than me

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

It is the padding left (40px) or margin left (40px) on the ul element, depending on the browser you use. The css you have should have fixed that gap by nullifying margins and padding on an ul element within the #nav element. However, since your top ul element is not within #nav element but is actually the #nav element itself, the paddings and margins are never nullified for that element. And so that gap appears. Pretty straightforward and pretty to the point. And exactly as it should behave.

Your explanations are not really to the point though. To quote you a little bit

I have managed to get he menu horizontal and even with the image for the background, but I cannot get the menu to start on the left hand side.

I don't get this, I've tried both suggestions and the result is the same, they just keep stacking 1 on top of each other..

Which problem are we solving here? You said that you solved the problem and posted pictures of a horizontal menu. Then you claim your menu is vertical. First you want help with getting rid of the margin/padding on the left, then you claim solution to remove that gap does not help menu stack up horizontally. Can you see my confusion here? So, let's start slow. Which problem are we solving here? CSS is pretty straighforward and things behave exactly like you tell them to, you just need to use, understand and apply it correctly.

Last but not least, from a gif file it is really hard for me to know how your javascript works. If you want to receive help in full be prepared to offer information in full -- give us the url to your page.

 

[1DMF]

It is the padding left (40px) or margin left (40px)

I'm lost where is this set?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

It is set in the default properties of the browser. Do you never wonder where the shape of the bullet is set, where the margins for the paragraphs are set, where the borders for input elements are and where the font size for h1 is set? All these settings have to exist and they are set by the browser's default behaviour. For Geckos, one can very simply find the file with all these settings defined, but for IE it is more complicated and I don't know where it has them. But you do know that every element you put on your site behaves differently, so that behaviour has to be defined somewhere.

 

[Foamcow]

Some browsers apply different initial values to others.
I've found a useful practice is to "zero" everything right at the start of the stylesheet. This puts all browsers on an even playing field.

At the start of your stylesheet put:

* { padding:0; margin:0; }

That's saying, "set the padding and margin of everything to 0". So then it doesn't matter if IE puts 30px on something and FF puts 35px on the same element. Now they all put a big fat nothing on there!

You can then manually set the padding and margins of your stuff as you want and not leave it up to the browser to decide.


<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

 

[1DMF]

Thank you so so much guys, it was driving me mad not understanding where this padding/margin was coming from.

Wacked in the * padding/margin foamcow provided and everything is working grand.

Again my sincerest thanks, now I have a fix for the I.E select list problem.

here is the working page.

http://www.stepnstomp.co.uk/cgi-bin/SSPL/singles.cgi

You guys rock

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.