YADQ (Yet Another DropMenu question)!

30 Posts

StainlessSteelRat Reply #1, 18 years, 1 month ago

Oh, boy... how to begin?!?
I’m trying to put together my first XHTML/CSS site using MODx (a simply awesome framework, btw) and have been having a terrible time styling DropMenu. I should mention I am (obviously) very new to CSS and learning it as I go along.

I’m developing only in FF right now and am very aware the layout is still broken in IE; the Best Practice seems to be to worry about IE-compliance at the end. The URL for my site is: http://dev.baycollege.edu

If you check out the third-level of my menu, the text overlaps into the content area to the right, but the background color when hovering over that third level gets cut off at the edge of the div. The DropMenu text doesn’t -- just the hover box.

I hope I explained it correctly. I was hesitant to post here because I know my code is still a mess and I haven’t had much chance to optimize or clean anything (I only have a few hours per week open for this sort of stuff). I’ve noticed, however, that this is the most friendly and helpful community forum I’ve seen in a while, so I thought I’d ask!

Thanks for your help!

Robert Laczhazy

372 Posts

briggsys Reply #2, 18 years, 1 month ago

Quote from: StainlessSteelRat at Mar 13, 2006, 08:19 PM

If you check out the third-level of my menu, the text overlaps into the content area to the right, but the background color when hovering over that third level gets cut off at the edge of the div. The DropMenu text doesn’t -- just the hover box.

The problem appears because its crossing another DIV, you’ll notice all the highlights extend to the edge of the Subleft1 DIV. If you give the hover class a width or padding the highlight would go past the edge of the Subleft1 DIV but of course it would alter all of those hovers, unless you set up a CSS for just that 3rd level one which is a but messy and the width would needed to be altered to suit the length of the text (YUCK!)

#subleft1 a:hover, #subleft1 div.subdiv a:hover, #subleft1 li.here a:hover {
	color: #EF7729;
	background-color: #333 !important;
        padding-right: 89px;
}

Not an expert on CSS, but maybe floating it would cure it?

[img]http://www.emanz.ac.nz/assets/images/logo/emanz-icon_16x16.gif[/img] Emergency Management Academy of New Zealand [br] http://www.emanz.ac.nz[br][br]MODx Sandbox Login: sandbox Password: castle [br]
Admin Sandbox Login: sandbox Password: castle

30 Posts

StainlessSteelRat Reply #3, 18 years, 1 month ago

Thanks, that seemed to do the trick! I knew I’d get an answer quickly here! I’ll be back if I have more questions... I suspect that getting the site to render properly in IE won’t be easy.

Thanks again.