Page 1 of 1

sub menu list formatting

PostPosted: Sun Aug 16, 2009 7:12 am
by Mary303
In general I've found the button maker flexible and easy to use.

http://www.barntalk.modelhorseblab.com/index.php
I am having a display issue with the sub-menu list. The sub-menu items are formatted to always display as white, but most of the dropdown sub-menu items aren't until mouse-over, making them un-readable. I have edited the Menu Style - some changes appear to be reflected when I see them online, others not. When viewed through Webuilder 2008 the sub-menu list colors do display properly . I don't know if the issue is due to format settings or if perhaps it's due to the browser.

I don't know if this helps but here is the css code
.ebul_cbnavbarall, .ebul_cbnavbarall ul {
background-color: #990000;
border: 0px solid #990000;
display: block;
font-size: 1px;
margin: 0px;
overflow: auto;
padding: 0px;
position: absolute;
visibility: hidden;
}

.ebul_cbnavbarall_shadow {
background-color: #777777;
display: block;
margin: 0px;
overflow: hidden;
position: absolute;
visibility: hidden;
}

.ebul_cbnavbarall table {
border-collapse: separate;
}

.ebul_cbnavbarall tr {
background-color: #990000;
cursor: pointer;
font-size: 1px;
}

.ebul_cbnavbarall td {
border: 0px solid #990000;
padding: 5px;
text-align: left;
}

.ebul_cbnavbarall td a {
color: #FFFFFF;
font-family: "Verdana", serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

.ebul_cbnavbarall tr.hot, .ebul_cbnavbarall tr.expanded {
background-color: #CC0000;
}

.ebul_cbnavbarall tr.hot td, .ebul_cbnavbarall tr.expanded td {
border-color: #CC0000;
}
.ebul_cbnavbarall tr.hot a, .ebul_cbnavbarall tr.expanded a {
color: #FFFFFF;
font-family: "Verdana", serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

ul.ebul_cbnavbarall {
position: absolute;
visibility: hidden;
}

.cbnavbarallebul_menulist .spaced_li {
padding: 0px 1px 0px 0px;
}

.cbnavbarallebul_menulist li {
list-style-type: none;
float: left;
}

.cbnavbarallebul_menulist img {
vertical-align: bottom;

}

.cbnavbarallebul_menulist {
margin: 0px;
padding: 0px;
line-height: 0px;
}

Re: sub menu list formatting

PostPosted: Mon Aug 17, 2009 10:50 pm
by Mary303
bumping ... need to get some assistance with this ... thanks!

Re: sub menu list formatting

PostPosted: Tue Aug 18, 2009 11:22 am
by MikeyB
Hi,

Don't see any problem with your menu here, can see all the options on the 4 headers, REGISTER, Memberships, About Us, Contact Us
All white text on a red background, and when the mouse is over the background is a lighter red.

Re: sub menu list formatting

PostPosted: Fri Aug 21, 2009 2:27 am
by Mary303
What you describe is what it should look like. But on my screen that is not what I'm seeing. On my screen Register is correct, but Memberships, About Us and Contact Us show dark red text which is not very visible. When the mouse is over the sub-menu they display correctly white text on red background.

Could this be due to different browsers? I use IE. I would like it to display correctly for all browsers.

Re: sub menu list formatting

PostPosted: Fri Aug 21, 2009 10:14 am
by MikeyB
Ah yes, I looked in Firefox 3.5, just tried IE6 and I now see the problem.
It's also broken in Chrome and IE8.

One thing I have noticed is that the links in the Register menu are only <a title=""> so have no href, the ones with a href are picking up the default link colour.
My css is not good, but I think you need to create & specify a new class for the links in the menu.

Re: sub menu list formatting

PostPosted: Sat Aug 22, 2009 5:43 pm
by Mary303
OK I've now re-done the buttons twice, setting the submenu text to white. With IE there is no change. Any ideas or thoughts, is there anyway I can stick with this color scheme and have it work for IE & Firefox, and those browsers that display similarly?

(Currently those links are changed and I know they are not displaying properly in any case.)

Re: sub menu list formatting

PostPosted: Thu Aug 27, 2009 9:29 pm
by Karlis
Any chance to see the URL? It seems to be offline.

There should be no problem with colors in any web browser *unless* you have your own CSS code that is conflicting with the menu code. Try removing all your own CSS code and see if menu works properly then.

Re: sub menu list formatting

PostPosted: Thu Oct 01, 2009 12:12 pm
by w00dy
I've got a similar problem. The menu renders differently in IE and FF.

Here's the site: http://www.hhtc.org.uk/website/index.htm

I also created a version with transparency turned off but it still appeared as transparent in IE.

I also had to move the menu items around as the dropdowns appear behind the front page gallery.

Any help appreciated.

Re: sub menu list formatting

PostPosted: Fri Oct 02, 2009 7:47 pm
by Karlis
This seems not to be related with transparency. The menu opens behind the text (although it has z-index of 100+) due to weird nature of your layout. Try checking why the text section is on the very top.

Re: sub menu list formatting

PostPosted: Sun Oct 04, 2009 6:46 pm
by w00dy
Seems to be sorted now, promoted menu placeholder to front and displays OK now.

"Weird layout"....the site was produced in Xara Xtreme Pro 5, the big brother of Xara Web Designer. Xtreme is a vector graphics program that does very nice WYSIWYG sites or rapid prototyping. Maybe not for the purists but for quick sites, very useful. Graphics-wise, Xara is a killer app, who needs Illy.

Re: sub menu list formatting

PostPosted: Thu Oct 08, 2009 7:58 pm
by Karlis
Layout looks cool, the way it is produced is weird (the code), all consists of absolute divs which is very uncommon. So we end up with many layers on top of each other and it might mess things up. Other than that all is fine.

Re: sub menu list formatting

PostPosted: Fri Oct 09, 2009 10:10 am
by MikeyB
Agree with Karlis, very strange code produced there, but does look okay in the browser.

For example, your paragraphs of text, rather than being just paragraphs or single divs, eash line is a div of it's own:

Your text:
We are a college which offers a comprehensive, broad and flexible
curriculum to students of all abilities. Our college combines its
distinctive approach to the education of young people with added
value of working in partnership with parents and the local
community.


In your code it is:
Code: Select all
  <div style=" font-size: 13px; color: Black;">
   <div class="xr_tl" style="left: 0px; top: 18px;">We are a college which offers a comprehensive, broad and flexible </div>
   <div class="xr_tl" style="left: 0px; top: 34px;">curriculum to students of all abilities. Our college combines its </div>
   <div class="xr_tl" style="left: 0px; top: 50px;">distinctive approach to the education of young people with added </div>
   <div class="xr_tl" style="left: 0px; top: 66px;">value of working in partnership with parents and the local </div>
   <div class="xr_tl" style="left: 0px; top: 81px;">community.</div>
  </div>


Normally you would have something like:
Code: Select all
<p style="xxxxx">
We are a college which offers a comprehensive, broad and flexible
curriculum to students of all abilities. Our college combines its
distinctive approach to the education of young people with added
value of working in partnership with parents and the local
community.</p>

or:
Code: Select all
<div style="xxxxx">
We are a college which offers a comprehensive, broad and flexible
curriculum to students of all abilities. Our college combines its
distinctive approach to the education of young people with added
value of working in partnership with parents and the local
community.
</div>

Re: sub menu list formatting

PostPosted: Sun Oct 11, 2009 7:30 pm
by w00dy
As I said, the code was produced by a vector graphics program, which allows wrap-around text. If you check out this link, you'll see what I mean:
http://www.hhtc.org.uk/flowtext/index.html
Xtreme produces cross browser, cross platform compatible, fully standards compliant (X)HTML. It's little brother, Web Designer is a cut-down version but of all of the WYSIWYG's out there, it is far and away my preferred solution and it's so easy to integrate third party extensions, like Easy Button and Menu Maker, which absolutely rocks by the way! (People in the Xara forums have been asking about it as Xtreme's menu system is long-winded in comparison)

If have to, I can do basic HTML but I'm slow and for me it has to be about productivity... all I want to do is to produce my coursework units as quickly as possible... 10-12 pages and load quickly over our intranet really. That said, the college website, which is done in the same program, isn't too slow loading, a "few" extra lines of absolute code doesn't make all that difference in page size in today's broadband world.

Sometimes people aren't too happy about competitor's software being brought up on their forum but I still see Xtreme as a vector package, which after five years of usage, I can get round very quickly. Your HTML editing software is first rate and probably the Holy Grail of code slingers. It's just a question of horses for courses.

Re: sub menu list formatting

PostPosted: Mon Oct 12, 2009 11:53 pm
by Karlis
Nothing against Xtreme, completely different tool for different needs. It is just that the code it creates is so unusual that it may cause some confusion in the rare event when manual adjustments need to be done. The main thing, however is that it gets the job done.