The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS Drop Menu Problems

Hello everyone,

I have a drop menu I created from the suckerfish model. It works great except for two parts. I can't seem to center the text vertically and I can't seem to keep the sub-links at the bottom of the main link (instead it covers half).

It looks terrible on any display setting except the one I have on my computer. So what if the user has 800x600 selected?

Most people with fix width sites will design with 800x 600 in mind and then just let the site centre so that it moves for larger windows. If you have designed an odd sized fixed width then you will make it awkward for some viewers. What most people do is have one or two fixed areas or columns and have one element that is fluid that takes up space as the window is widened or made smaller etc.

You could make your right area fluid and let it slide in and out but would of course have to be re-designed to allow for this. The image could slide under other content at small sizes and could just reveal a background colour at larger sizes ,

The problems in firefox, with your menu is that you have wrongly structured the list. Sub lists should be structured like this.
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

Remove the html comments that are in the middle of your stylesheet. They are probably causing a lot of the problems. If you look at the code I gave you above I had removed them from the styles. Use only css comments /* etc */ in your stylesheet.

I don't think there is any real need to surround your stylesheet with html comments (although they won't cause you problems like the embedded comments do) unless you are supporting very old browsers and I believe in the future that some browsers may ignore the whole stylesheet if you put it in comments anyway.

Its because you have used a negative z-index on the image. This has put the image behind the body which means its invisible. Negative z-indexes should be used with care. What you need is a z-index of 1 on that img element and then a z-index of 2 on the footer to place it above the image (if that's what you wanted).

Now that you've sorted those problems out you should probably recode that page as there are some bad points in there. You have font tags and hundreds of &nbsp; in there that are not needed with css as css will make the space and the positioning.

You have a horizontal scrollbar because your header is 100% wide but you have added 265px padding which makes it much too big. You can make the header 100% but apply the padding to an inner elements such as a paragraph tag and then the scrollbar will not appear.

You have also lost the dynamics of the 100% footer because you have absolutely placed most of the content so the footer has nothing to foot. You need to get some flow back into the document by statically palcing some elements. You can use margin top on an element to position it away from other absolute elements then everything underneath comes back into the flow.

The footer, clearfooter and the negative margin-bottom on #outer all work together to control the footer. If you change one then you must change all three. You also need to account for the broken box model where you have added padding/borders to elements with widths defined.

Things are starting to get better. I have been redesigning my site to work better with 600x800 and 1024x768.

I am now having a problem with using the footer and list items. Can you take a look at this page and tell me what I'm doing wrong? I'd like the footer placed properly (I thought using margin controls would keep the HTML "flow") and I'd like the list items to be bulleted.

You have used relative positioning in a few places and while it seems to work initially you are finding that elements overlap later on (such as your footer).

This is because relative positioning doesn't physically move anything it only visually moves it. Therefore everything else behaves as if the relative element is in its original position. You should the margin property to move elements that are in the flow and thus preserve the flow.

The problems with your lists are that you have defined all lists when you defined your main nav. You should have isolated the nav by referencing the list using the id #nav.

Also you have given some elements heights when they are supposed to be a fluid height. If you give an element a set height then good browsers will obey and content will spill out if greater. (IE will expand the element to compensate when it shouldn't).

Here is a quick revision of your code to take some of those remarks into account. The page will now also display ok in firefox where it was broken before.

Now that the Greybox no longer has a height it stops after the last line of text. It works great for pages where the text fills up the page but it doesn't work when there isn't enough text, shown here:

One thing I was thinking was some kind of script to get the display settings from the visitor then give them a page designed for that setting. I am hoping there is an easier solution. According the the W3 website 50% of users use 1024x768 and 35% use 800x600 so those are two settings I am most interested in getting right.

One thing I was thinking was some kind of script to get the display settings from the visitor then give them a page designed for that setting. I am hoping there is an easier solution. According the the W3 website 50% of users use 1024x768 and 35% use 800x600 so those are two settings I am most interested in getting right.

I would avoid using scripts for this (just a personal op0inion). Either design for the lowest denominator (800x600)or move to a more fluid design that works at most screen sizes.

Your design at present is 800px wide and you could just centre the site so it doesn't look out of place at larger resolutions. Alternatively create a fluid version that stretches across the whole width but would need to be redesigned of course with that in mind.