Moving a menu

[maxelcat]

Dear All

Have read the sonofsuckerfish article and putting it to use.

So thanks for that.

Here's a question though. Please look at

http://www.maxelcat.co.uk/menu2.html

I want to pull down the visible drop down menus so that they line up with the base of the word "Maxelcat". Currently they sit along the top.

I have tried doing this by using absolute positioning. I made the overall wrapper position:relative and then put a div id="navwrapper" with position absolute inside it. this is at

http://www.maxelcat.co.uk/menu3.html

In FF and NS it looks ok except that when I enlarge the fonts they begin to merge with the content underneath - which I wnat to avoid. In IE the menus have just disappeared.

Is there another way to bring this menu down so that it lines up nicely, and when the fonts are enlarged they stay separate. I am beginning to link that using a table might be easier!!!!!

Would appreciate any pointers

Edward

/* CSS Document */

html, body, ul, li, h1 {
margin:0px;
padding:0px;
}


#wrapper	{
margin:0px auto;
padding:0px;
width:730px;
border:1px solid green;
position:relative;
}

#navwrapper	{
position:absolute;
top:50px;
left:0px;
z-index:100;
border:2px red solid;
}



#nav, #nav ul {
padding:0;
margin:0;
list-style:none;
}


#nav a	{
display:block;
width:10em;
}


#nav li	{
float:left;
width:10em;
}

#nav li ul	{
position:absolute;
width:10em;
left:-999em;
}

#nav li:hover ul	{
left:auto;
}

#nav li:hover ul, #nav li.sfhover ul	{
left:auto;
}

.imageright	{
float:right;
}

/*a small hack to get the border to fit past the floated things see [URL unfurl="true"]http://www.complexspiral.com/publications/containing-floats/*/[/URL]
.clearer	{
clear:both;
line-height:0;
height:0;
}

#content	{
border:2px yellow solid;
margin-top:20px;
padding:10px;
}

 

[Vragabond]

Simply give your #nav a margin-top of whatever you need to flush it parallel to what you need.

If you need your page to not lose shape when you enlarge the fonts, think about using an elastic design.

 

[maxelcat]

Thanks as ever for your time and reply - I really appreciate it!

On the face of it that would work fine, and it does in NS and FF but not in IE7. It prodcues a great gap under the logo before the content. I can't see why - seems totally logical (and obvious what you say)

I know I am quite new to this type of web dev work. I read yesterday that "Css is easy" - which it is if you want pretty colors and not a lot else.

Your suggestion is so simple, and obvious but didn't work across the browsers. How frustrating is that. I am still at the stage when I assume its me because all the browsers do is follow a set rules......... or do they?

I hope it gets easier!