Positioning Problem with CSS Drop Down Menu (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

JacieClaeys -> Positioning Problem with CSS Drop Down Menu (7/16/2006 18:03:33)

I am redoing my site and learning CSS. I am using Page1 and Claires horizontal drop down menu. Am having a problem with the positioning of the menu.

If I set up the page as it is done on the SEO Consultants page with the content first for SEO then I get this in both IE and Mozilla:
Example 1
http://www.nrgsaver.com/css/center-box1.htm

It puts the menu at the bottom.

If I set up the menu in the order it is supposed to appear on the source page then it appears properly:
Example 2
http://www.nrgsaver.com/css/center-box2.htm

But that defeats the purpose of the text being spidered first instead of the links.

Also the hover doesn't work in IE although I have the csshover.htc linked. It does work in Mozilla on Example 2 but not on Example1.

I know I am missing something but I have spent a week trying to find out what and am all out of ideas.

I'm just too new to CSS to figure it out I guess. Sure could use some help.
Much thanks
Jacie



Nicole -> RE: Positioning Problem with CSS Drop Down Menu (7/18/2006 23:10:41)

Hi Jacie,

I don't really understand it either as mentioned in this thread

Towards the bottom of that thread, BonRouge has a link to a useful site he's created doing exactly what you're trying to do!

Hope that helps.

Nicole



JacieClaeys -> RE: Positioning Problem with CSS Drop Down Menu (7/19/2006 3:13:33)

Many thanks Nicole. I will check it out.

Just tonite, I finally got the page to work in both IE and FF. Sort of!

I put a positioning in my CSS layout sheet and that forced it to the top in both browsers. I redownloaded the whateverhover and now that works in both also.

Only problem I have now is that FF is perfect but in IE when it opens the secondary boxes it spreads them across the entire page instead of just making the box the size of the longest head.

Maybe the thread you supplied will give me some answers.
I just don't understand why it works perfert for Claire and not for me. I haven't even looked at it in Opera or any earlier browsers yet. I will have to really screw up my courage for that job.

Thanks for the help
Jacie



Nicole -> RE: Positioning Problem with CSS Drop Down Menu (7/19/2006 3:50:21)

WOW!

Internet Explorer is really having fun with your site isn't it!

I also noticed different background colours for some of your dropdowns.

I used to use Xara Webstyle for my menus like this, but now I've come to realise that these programs have little regard for web standards or different browsers. Stu Nicols has some great menu ideas on his site, and they're all compliant!

http://www.cssplay.co.uk/menus/index.html



JacieClaeys -> RE: Positioning Problem with CSS Drop Down Menu (7/19/2006 10:38:18)

Yes, dontcha LOVE IE.
I used to use AllWeb menus which is java but I have been determined since the CSS Drop Down came out to learn all CSS.

I figure by the time I am through with this menu I should have a pretty good working idea of CSS and how it works. There is nothing like digging thru the rubble of your site to teach you a thing or two and IE is always ready to lend a hand.

On the different background colors.....I know. Figured once I got it working properly it would be an easy thing to go in and fix. Just seemed like the least of my problems at the time.

Looked at the thread you gave last nite and went to his site. I too, bookmarked the site because I am going to need some style sheets for 3 column. That is coming up next. But not until I have this page working perfectly.

Thanks for posting. I was feeling pretty lonely out there for a while.[:(]
Jacie



c1sissy -> RE: Positioning Problem with CSS Drop Down Menu (7/20/2006 16:05:01)

I can't stress enough validation!!!!!!
Please
validate your site with the validator for your (x)html and css. You have errors in your code.

If you try something that is mentioned in a link and it isn't working for you, please, please please validate. Then if you are having problems come back and post your questions with links to the problem sites.



JacieClaeys -> RE: Positioning Problem with CSS Drop Down Menu (7/20/2006 17:56:26)

Thanks for the reminder to validate Cissy. It is on my list of things to do with this page. It is the first page I have done using the CSS Drop Down Menu and using CSS for the first time. All the pages on my regular site which I will be replacing with this new format are validated.

I finally got the menu to position at the top in both IE and FF night before last. www.nrgsaver.com/css/center-box.htm However, IE is bringing up the drop down boxes all across the page. This is very much, still a work in progress. My regular site is www.nrgsaver.com and every page has the validation WC3 on it . I don't make a change to a page, no matter how small, without validating before I send it up.

Once I get the menu to work properly and the CSS set up I want to redo the pages in XHTML Strict which will be another step -unless I am going about this backward? It just seemed more logical to learn the CSS first, then clean up the page. Is this the wrong way to go about it?

I have had this web site up since 1997 and it seems I just finish learning something new and it is time to start all over again. So I will take all the advice I can get anytime anywhere.
Many thanks



JacieClaeys -> RE: Positioning Problem with CSS Drop Down Menu (7/20/2006 18:16:42)

Cissy.....I just got IT driving home from work. What you were saying was that it might be the errors in the code that are causing it not to work. Validate and fix THEN if I have problems bring it here for help. What a dunce I am. Sorry!!! The greatest thing in life is that I learn something new every day. Sometimes it is the same thing over and over everyday. This is one of those things.[:D]
Jacie



c1sissy -> RE: Positioning Problem with CSS Drop Down Menu (7/20/2006 20:21:47)

quote:

ORIGINAL: JacieClaeys

Cissy.....I just got IT driving home from work. What you were saying was that it might be the errors in the code that are causing it not to work. Validate and fix THEN if I have problems bring it here for help. What a dunce I am. Sorry!!! The greatest thing in life is that I learn something new every day. Sometimes it is the same thing over and over everyday. This is one of those things.[:D]
Jacie


BINGO! [;)]

xhtml strict is really easy to learn. It is just that, a more strict usage of xhtml. All your "empty elements" need to be closed, such as image, break etc.. And don't forget about your meta's as well, they also need to be closed. Your css link for a lined style sheet needs to be closed. You can't use depreciated tags/elements in xhtml strict.

So your break is like this:
<br />
<image src="" />
and so on.

I would suggest learning the xhtml strict WITH the css as they basically go hand in hand. (depends on the individual opinion also [:D])

And when you validate as you are going along you can learn from the validator by using the xhtml strict dtd.

If you have any other questions, just feel free to post them.



JacieClaeys -> RE: Positioning Problem with CSS Drop Down Menu (7/25/2006 23:29:12)

Hi,
All pages now validate (source page and CSS). Everything fine in FF but now IE is putting a vertical space in the drop down which stops the navigation ( too say nothing of the looks).
The main page is: www.nrgsaver.com/css/center-box.htm
and the menu CSS is www.nrgsaver.com/css/menuh2.css
I either have something wrong in the source code , the menuh2 code or something is hinky with the csshover.htc ,however, it is a direct download from Peter Nedales with no changes made. It almost looks like it is happening at the hover level tho.
Sure would appreciate any thoughts you might have.
Thanks
Jacie



Tailslide -> RE: Positioning Problem with CSS Drop Down Menu (7/26/2006 4:00:12)

Ok this is just a guess and it may not help at all (think I covered myself there!!).

IE sometimes has "issues" with whitespace between list items in menus - doesn't always seem to happen.

There are several ways round it, basically you remove the whitespace between the list items.

First way: 

<ul><li>Item one</li><li>Item Two</li><li>Item Three</li></ul>


Easy enough but would be a HUGE PITA with your big menu!

Second Way: 

<ul>
<li>Item One</li><!-- 
--><li>Item Two</li><!-- 
--><li>Item Three</li>
</ul>


Use HTML comments to technically remove the gaps

Third Way 
<ul>
<li>Item One
</li><li>Item Two
</li><li>Item Three</li>
</ul>


has the closing tag right before the next opening one thus in theory the list items have no gaps.

I tend to use the comment one just as I find it easier to read. Actually I tend to avoid dropdowns all together as they're no end of trouble!

As mentioned, this might not help at all, but is probably worth a try.



c1sissy -> RE: Positioning Problem with CSS Drop Down Menu (7/26/2006 9:06:07)

try putting display:inline with you li styles and see what that does for IE. It should help it.



JacieClaeys -> RE: Positioning Problem with CSS Drop Down Menu (7/26/2006 10:56:37)

I tried Tail's suggestion and put the code for the first dropdown (Special Sales) all on one line in the code www.nrgsaver.com/css/center-box1.htm . It took out the vertical space but the second item in the drop down disappears before you can click on it. The first one clicks fine. Hmmmmm

I will try the inline display and see what that does.
Many thanks
Jacie



JacieClaeys -> RE: Positioning Problem with CSS Drop Down Menu (7/26/2006 11:16:32)

Hi Cissy,
I put the display: inline in the CSS code and it also fixes the problem of the vertical space but the drop down list still disappears before you can click on it.

Could I be leaving something critical out of the equation?

Jacie



c1sissy -> RE: Positioning Problem with CSS Drop Down Menu (7/26/2006 11:42:02)

quote:

ORIGINAL: JacieClaeys

Hi Cissy,
I put the display: inline in the CSS code and it also fixes the problem of the vertical space but the drop down list still disappears before you can click on it.

Could I be leaving something critical out of the equation?

Jacie


Now try it on the drop down list's li. see how that works out for you. Otherwise not sure what to tell you. Try clearing your cache and temp folders after you do this and refresh to see what happens.

Also run it through the validator on the css and your (x)html code to see if you are missing something error wise that you aren't seeing. wometimes that is a big help in solving an error.

I had a problem with a page a couple of weeks ago, and could not get what was going on. Bobby d looked at it for me, and found it right away. Just a minor coding error, something I do all the time, but left out. Yet, it can interfer with your whole page.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375