-
1. Re: spry vertical menubar issues ie compatibility mode
Nancy O. Apr 21, 2013 12:47 PM (in response to westwm)#1 Your liberal use of APDivs (position:absolute) is pure poison for primary layouts.
See screenshot from Firefox 20 with increased text size.
You don't need positioning for any of this. Default CSS positioning (static or none) is all that is required for 98% of layouts. Alignment is best controlled with CSS Margins, Floats and Padding. Or just use a pre-built, 3-column layout from DW.
Go to File > New > Blank Page > HTML > Layouts... Select one from the 3rd panel & hit Create.
#2 Spry Menus were built in 2006, predating modern browsers by several years. As such, Adobe abandoned the framework last year because quite frankly it isn't up to modern standards. Also, Spry drop menus don't invoke on touch screen devices because they lack a mouse. Best advice, ditch Spry & use a better menu system.
Pop-Menu Magic2 by PVII (commercial DW extension) http://www.projectseven.com/products/menusystems/pmm2/index.htm jQuery Superfish http://users.tpg.com.au/j_birch/plugins/superfish/ Nancy O.
-
2. Re: spry vertical menubar issues ie compatibility mode
westwm Apr 23, 2013 2:34 PM (in response to Nancy O.)hi Nancy
thank you so much for the advice and for taking the time to browse through the my site
you can tell i am a novice at this. i was basically following an online course from lynda.com (think it was called 'your first css site' by paul trani and basically started out the site one way but moved to another direction with it so there is a lot of residual code underneath this current site. Its been a chore to say the least, over 4 months of frustrating developement now.
I am totally shocked by the fact that spry is outdated! the online tutorial was done using dreamweaver6 so i assumed this is current technology. throughout they kept saying that it was suitable for all browsers, or so i was led to beleive.
in your opinion what would be the quickest way to fix the browser irregularities? should i create a new page as you suggested and then template it from there in dreamweaver? I really do like the spry image viewers and menu and 'kind of' know it right now. to have to learn jquery menus and slideshows seems like it would take another 3 months for me.
My boss is growing impatient, i have my 1st child due any day and i need to get this site up and running soon. is there any quick fixes that would get these pages running reasonably well? in your opinion, would it be possible to get this site going in a day or two?
thanks for your help. Your opinions and suggestions, and any others would be greatly appreciated!
Nancy O. wrote:
#1 Your liberal use of APDivs (position:absolute) is pure poison for primary layouts.
See screenshot from Firefox 20 with increased text size.
You don't need positioning for any of this. Default CSS positioning (static or none) is all that is required for 98% of layouts. Alignment is best controlled with CSS Margins, Floats and Padding. Or just use a pre-built, 3-column layout from DW.
Go to File > New > Blank Page > HTML > Layouts... Select one from the 3rd panel & hit Create.
#2 Spry Menus were built in 2006, predating modern browsers by several years. As such, Adobe abandoned the framework last year because quite frankly it isn't up to modern standards. Also, Spry drop menus don't invoke on touch screen devices because they lack a mouse. Best advice, ditch Spry & use a better menu system.
Pop-Menu Magic2 by PVII (commercial DW extension) http://www.projectseven.com/products/menusystems/pmm2/index.htm jQuery Superfish http://users.tpg.com.au/j_birch/plugins/superfish/ Nancy O.
-
3. Re: spry vertical menubar issues ie compatibility mode
Mike M Apr 23, 2013 7:35 PM (in response to westwm)Closest thing to Spry menu I've found is DynamicDrive's "Smoothmenu" Looks very similar, but is more customizable and as the name says, smoother than Spry. It's built in horizontal and vertical layouts.
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
Nancy's 100% right about the APDIVs, they cause a lot more headaches than they're worth. They should be a last resort for something you can't do with overlays or z-index tweaking.
-
4. Re: spry vertical menubar issues ie compatibility mode
westwm Apr 26, 2013 12:52 PM (in response to Mike M)hey thank you very much that is a very slick menu and will implement that in replacement of my spry menu.
thanks again for the help!
C F McBlob wrote:
Closest thing to Spry menu I've found is DynamicDrive's "Smoothmenu" Looks very similar, but is more customizable and as the name says, smoother than Spry. It's built in horizontal and vertical layouts.
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
Nancy's 100% right about the APDIVs, they cause a lot more headaches than they're worth. They should be a last resort for something you can't do with overlays or z-index tweaking.
-
5. Re: spry vertical menubar issues ie compatibility mode
westwm Apr 26, 2013 1:08 PM (in response to westwm)Hi nancy (and others)
I've begun to re-implement the site using the pre-created template from dreamweaver that you suggested above.
I'm still finding it hard to abandon the use of ap div's. for instance here is a shot of my current progress:
now with your statement:
You don't need positioning for any of this. Default CSS positioning (static or none) is all that is required for 98% of layouts. Alignment is best controlled with CSS Margins, Floats and Padding. Or just use a pre-built, 3-column layout from DW.
and C F McBlob's comment of "Nancy's 100% right about the APDIVs, they cause a lot more headaches than they're worth. They should be a last resort for something you can't do with overlays or z-index tweaking."
how can i move the text called "Instruction" into the middle of the scroll banner inidacted by the RED highlighting using the above mentioned options instead of an ap div?
how can i create an open are to place my gallery and slide show images indicated by BLUE?
how can i move text that i will use as a blurb to describe each gallery, indicated by GREEN?
the new header and body backgrounds are images that were inserted using css background option. all other text and mark ups are the same as the original dreamweaver template
any additonal pointers would be greatly appreciated!
thanks!
-
6. Re: spry vertical menubar issues ie compatibility mode
Nancy O. Apr 26, 2013 1:50 PM (in response to westwm)I would structure the page this way:
http://www.alt-web.com/sandbox/Westwood.html
The only image is the blue ribbon which I used as a backgound for the Heading 2. Everything else is done with real text & CSS. No APDivs required.
View source in browser to see the code.
Nancy O.
-
7. Re: spry vertical menubar issues ie compatibility mode
mike129374 May 15, 2013 7:30 AM (in response to westwm)THE CONFLICT IS BETWEEN YOUR DOCUMENT CSS AND THE SPRY CSS.
It is because the <li> and <a> TAGS have been styled and therefore OVERRIDDEN THE SPRY CSS.
Use CLASS TAGS e.g. <li class="anyclass"> and <a class="anyclass">
and STOP USING THE <a> TAGS.
N.b. you may need to unstyle any <a> or other TAGS that conflict with the SPRY CSS. (However it's best to start over knowing that styling basic tags may affect the SPRY CSS). -
8. Re: spry vertical menubar issues ie compatibility mode
westwm May 21, 2013 2:47 PM (in response to Nancy O.)nancy thank you so much for taking the time and showing me this.
its actually incredible but quite a bit over my head, i will have to study this for a while to fully understand whats going on in terms of how you positioned elements without using ap divs.
what is your formal education in web building if you dont mind me asking. seems like i will have to take some paid courses.
thanks again.
Nancy O. wrote:
I would structure the page this way:
http://www.alt-web.com/sandbox/Westwood.html
The only image is the blue ribbon which I used as a backgound for the Heading 2. Everything else is done with real text & CSS. No APDivs required.
View source in browser to see the code.
Nancy O.
-
9. Re: spry vertical menubar issues ie compatibility mode
Nancy O. May 21, 2013 4:34 PM (in response to westwm)My formal education as you put it comes from reading articles by experts and experimenting with code until I get what I want.
Web Design Theory
http://webdesign.tutsplus.com/sessions/web-design-theory/
Eric Meyer
CSS Tricks
Smashing Magazine
http://coding.smashingmagazine.com/
Web Design Tuts
http://webdesign.tutsplus.com/
Good luck!
Nancy O.









