[WSG] Help needed with CSS dropdown menu issue in Opera

2006-11-04 Thread Nick Roper

Hi List,

Please see:

http://dev.logical.co.uk/museadvisory/index.php

I have implemented a drop down sub-menu for the main 'services' menu 
using the techniques outlined on the List Apart site at:


http://www.alistapart.com/articles/horizdropdowns

Have tested so far in FF, IE 6 and Opera 8.x on Windows. All seems fine 
in FF and IE, but there is a positioning and functionality problem in 
Opera, with the submenus appearing at top of page and not acting as links.


I've probably done something stupid and any help would be very much 
appreciated.


Cheers,

Nick



--
Nick Roper
partner
logical elements
innovative web and internet solutions
zend/php  mysql approved partner
email: [EMAIL PROTECTED]
phone: +44 1749 676798
 www: www.logical.co.uk
skype: nick.roper / +44 20 7870 9587


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] page loads in safari and then jumps to the middle

2006-11-04 Thread Rob O'Rourke

~davidLaakso wrote:

Rob O'Rourke wrote:

~davidLaakso wrote:
And perhaps a little contemplation about the questions you did not 
ask with regard to that page...? 


I wanted to think about other things for a while... I'd love to hear 
any suggestions as to where I could improve it. I honestly don't know 
what other questions to ask, I've had no other criticism bar the 
Safari issue so far.

No criticism here. Just some light entertainment and food for thought:
-- If it can be said a page exists for a reason, just what is the 
reason your page exists?




Woops forgot to change the email address to the list. It's a fair 
comment, but I'm currently looking for work in the Liverpool/Manchester 
area (UK), hopefully it'll get me some interviews...


Rob O


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



RE: [WSG] Help needed with CSS dropdown menu issue in Opera

2006-11-04 Thread Kepler Gelotte


 Have tested so far in FF, IE 6 and Opera 8.x on Windows. All seems fine 
 in FF and IE, but there is a positioning and functionality problem in 
 Opera, with the submenus appearing at top of page and not acting as links.

It doesn't appear that you have css/museadvisory_menus.css on your server
and css/museadvisory_main.css doesn't reference #dropnav at all so the
positioning of the list is being handled by #contentLeft. Did you forget to
move the menu CSS file to the server?

Regards,
Kepler Gelotte
http://www.neighborwebmaster.com




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] page loads in safari and then jumps to the middle

2006-11-04 Thread Rob O'Rourke



snip


Sorry everyone, went OT there. That last reply to my thread wasn't meant 
to go to the list.


Rob O



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] Help needed with CSS dropdown menu issue in Opera

2006-11-04 Thread Nick Roper

Hi Kepler,

css/museadvisory_menus.css isn't relevant any more. I was using it in a 
previous version but hadn't removed the reference from the markup.


When the page started out there were no requirements for any dropdown 
navigation, so everything was just handled by #contentLeft. Then a 
request for a dropdown was made and I added the code  css per the 
example on List Apart. The associated javascript uses the #dropnav id to 
apply a class of 'over'  - see below.


Maybe the problems are down to the confusion between #contentLeft and 
#dropnav?


Javascript code is :

startList = function() {
if (document.alldocument.getElementById) {
navRoot = document.getElementById(dropnav);
for (i=0; inavRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==LI) {
node.onmouseover=function() {
this.className+= over;
  }
  node.onmouseout=function() {
  this.className=this.className.replace( over, );
   }
   }
  }
 }
}
window.onload=startList;

Nick

Kepler Gelotte wrote:


Have tested so far in FF, IE 6 and Opera 8.x on Windows. All seems fine 
in FF and IE, but there is a positioning and functionality problem in 
Opera, with the submenus appearing at top of page and not acting as links.


It doesn't appear that you have css/museadvisory_menus.css on your server
and css/museadvisory_main.css doesn't reference #dropnav at all so the
positioning of the list is being handled by #contentLeft. Did you forget to
move the menu CSS file to the server?

Regards,
Kepler Gelotte
http://www.neighborwebmaster.com




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***




--
Nick Roper
partner
logical elements
innovative web and internet solutions
zend/php  mysql approved partner
email: [EMAIL PROTECTED]
phone: +44 1749 676798
 www: www.logical.co.uk
skype: nick.roper / +44 20 7870 9587


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



[WSG] Do width and hight still needed for inline image?

2006-11-04 Thread Tee G. Peng

Good weekend everyone!

I see some sites that don't declare width and hight attribute for  
inline images and html validotor doesn't give error too. Does this  
mean we can abandon the two attributes for inline image?



Thanks!


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] Help needed with CSS dropdown menu issue in Opera

2006-11-04 Thread David Hucklesby
On Sat, 04 Nov 2006 23:29:01 +, Nick Roper wrote:

 When the page started out there were no requirements for any dropdown
 navigation, so everything was just handled by #contentLeft. Then a
 request for a dropdown was made and I added the code  css per the
 example on List Apart. The associated javascript uses the #dropnav id to
 apply a class of 'over'  - see below.

 Maybe the problems are down to the confusion between #contentLeft and
 #dropnav?

 Javascript code is :

 startList = function() {
 if (document.alldocument.getElementById) {
 navRoot = document.getElementById(dropnav);
 for (i=0; inavRoot.childNodes.length; i++) {
 node = navRoot.childNodes[i];
 if (node.nodeName==LI) {
 node.onmouseover=function() {
 this.className+= over;
 }
 node.onmouseout=function() {
 this.className=this.className.replace( over, );
 }
 }
 }
 }
 }
 window.onload=startList;

Hi Nick,
I'm not familiar with the menu, but glancing at this script I do
notice a test for document.all. I know that it's unlikely that Opera
would need help from a script. IE 6 and below likely does need this
script. So I wonder if the test for document.all is to filter for IE ?

I also know that Opera will return true for this condition. So the
script is, in fact, applied by Opera. Maybe start here - does Opera
work okay if you pull the script? If so, you could wrap the script in
a conditional comment for IE 6 and below. IE 7 likely does not
need it either. (But test!)

FWIW - More than a few of us went from Opera 7.54 to Opera 9, as the
version 8 added a lot more functionality, and a lot of bugs in the process.

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



[WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng
Hi, I am doing a layout that requires equal height for each column  
and row, however the contents inside of each column and row are  
different and in some pages, in certain sections, the length of the  
content will be decided by end users' data feed. Each column, each  
row has its own background color (gradient image). I don't want to  
set 'height' attribute; I maybe able to play with pixel perfect with  
precise calculation  to obtain equal height but when a user resize  
font size, the integrity will be lost.


Here is a mockup screen shot, client got everything precisely line up:
http://project.lotusseedsdesign.com/ss.png

an untidy layout I just did
http://project.lotusseedsdesign.com/ss02.png

my markup is such:

div class=left_colFirst row, first column /div  
div class=right_colFirst row, second column /div

div class=left_colsecond row, first column /div 
div class=right_colsecond row, second column /div

I was thinking if I insert a wrapper for each row so it looks like so

 div class=wrapper
div class=left_colFirst row, first column /div  
div class=right_colFirst row, second column /div
/div

 div class=wrapper
div class=left_colsecond row, first column /div 
div class=right_colsecond row, second column /div
/div


However with different background colors that are controlled by  
gradient images, it seems pointless to do so.


Your suggestion deeply appreciated!

Thanks!

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Gunlaug Sørtun

Tee G. Peng wrote:

Hi, I am doing a layout that requires equal height for each column
and row, however the contents inside of each column and row are
different and in some pages, in certain sections, the length of the
content will be decided by end users' data feed.


I suggest you try building it with CSS table, with the usual workaround
for IE/win.

Example: http://www.gunlaug.no/tos/moa_11.html
...which includes IE fixes.
Study Roger's article (linked in) and demos for the rest.

regards
Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Al Sparber

Example: http://www.gunlaug.no/tos/moa_11.html
...which includes IE fixes.
Study Roger's article (linked in) and demos for the rest.


IE7 wants to scroll the negative margins. There are some scripted 
solutions that might be easier to manage, so long as the equal columns 
can be seen as an enhancement.


--
Al Sparber
PVII
http://www.projectseven.com








***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Rob O'Rourke

Tee G. Peng wrote:
Hi, I am doing a layout that requires equal height for each column and 
row, however the contents inside of each column and row are different 
and in some pages, in certain sections, the length of the content will 
be decided by end users' data feed. Each column, each row has its own 
background color (gradient image). I don't want to set 'height' 
attribute; I maybe able to play with pixel perfect with precise 
calculation  to obtain equal height but when a user resize font size, 
the integrity will be lost.


Here is a mockup screen shot, client got everything precisely line up:
http://project.lotusseedsdesign.com/ss.png

an untidy layout I just did
http://project.lotusseedsdesign.com/ss02.png

my markup is such:

div class=left_colFirst row, first column /div   
div class=right_colFirst row, second column /div


div class=left_colsecond row, first column /div   
div class=right_colsecond row, second column /div


I was thinking if I insert a wrapper for each row so it looks like so

 div class=wrapper
div class=left_colFirst row, first column /div   
div class=right_colFirst row, second column /div

/div

 div class=wrapper
div class=left_colsecond row, first column /div   
div class=right_colsecond row, second column /div

/div


However with different background colors that are controlled by 
gradient images, it seems pointless to do so.


Your suggestion deeply appreciated!

Thanks!

tee



Hi Tee,

If those blocks always contain similar output you could float your 
blocks left to stack them up and set the height in ems. Seems to me the 
easiest way to do a layout like that.


e.g.

div id=container

div class=left id=bookmarks/div
div class=right id=people/div
div class=left id=sites/div
div class=right id=tags/div

/div

and then CSS like:

#container { width: 830px; } /* to leave a 30px gap in the middle e.g.  
|400px| 30px |400px|  */
.left, .right { height: 60em; width: 400px; margin-bottom: 30px; } /* 
whatever your dimensions need to be */

.left { float: left; clear: left; }
.right { float: right; clear: right; }


That way your blocks have equal height and width, will stack as per the 
image and you have a nice semantic unique id on each to apply styles 
with. Might need some tweaking for cross-browser goodness but in a fixed 
width layout that code should be safe to work from.


Hope that gives you some ideas.
Rob O


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng


On Nov 4, 2006, at 8:02 PM, Al Sparber wrote:


Example: http://www.gunlaug.no/tos/moa_11.html
...which includes IE fixes.
Study Roger's article (linked in) and demos for the rest.


IE7 wants to scroll the negative margins. There are some scripted  
solutions that might be easier to manage, so long as the equal  
columns can be seen as an enhancement.


Yeah, Al is right. I see the endless vertical scrolling from IE7. Got  
fix for IE7 -:)


http://project.lotusseedsdesign.com/eqforie7.png

Al, I aware you have an equal height script and just went back to  
take look, can it be used for many columns with rows? I ask because  
of the reading from 'the script argument' paragraph. The in-house  
programmers maybe able to come out something similar but if they  
don't know how to hook up id and class for dl element, it  may be  
better not to count on them.


tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng


On Nov 4, 2006, at 8:22 PM, Rob O'Rourke wrote:





Hi Tee,

If those blocks always contain similar output you could float your  
blocks left to stack them up and set the height in ems. Seems to me  
the easiest way to do a layout like that.


e.g.

div id=container

div class=left id=bookmarks/div
div class=right id=people/div
div class=left id=sites/div
div class=right id=tags/div

/div

and then CSS like:

#container { width: 830px; } /* to leave a 30px gap in the middle  
e.g.  |400px| 30px |400px|  */
.left, .right { height: 60em; width: 400px; margin-bottom: 30px; } / 
* whatever your dimensions need to be */

.left { float: left; clear: left; }
.right { float: right; clear: right; }


That way your blocks have equal height and width, will stack as per  
the image and you have a nice semantic unique id on each to apply  
styles with. Might need some tweaking for cross-browser goodness  
but in a fixed width layout that code should be safe to work from.




Rob, thank you very much! I will play with your suggestion - more  
homework for tonight I am afraid :)


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Al Sparber

http://project.lotusseedsdesign.com/eqforie7.png

Al, I aware you have an equal height script and just went back to 
take look, can it be used for many columns with rows? I ask because 
of the reading from 'the script argument' paragraph. The in-house 
programmers maybe able to come out something similar but if they 
don't know how to hook up id and class for dl element, it  may be 
better not to count on them.


Our script was not written for multiple rows. An image-based faux 
column technique would work.


--
Al 





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] how to retain equal height without losing layout integrity when user resizes font size

2006-11-04 Thread Tee G. Peng


On Nov 4, 2006, at 8:22 PM, Rob O'Rourke wrote:


and then CSS like:

#container { width: 830px; } /* to leave a 30px gap in the middle  
e.g.  |400px| 30px |400px|  */
.left, .right { height: 60em; width: 400px; margin-bottom: 30px; } / 
* whatever your dimensions need to be */

.left { float: left; clear: left; }
.right { float: right; clear: right; }


That way your blocks have equal height and width, will stack as per  
the image and you have a nice semantic unique id on each to apply  
styles with. Might need some tweaking for cross-browser goodness  
but in a fixed width layout that code should be safe to work from.



Rob, I am playing with your suggestion this moment. Setting height in  
EM seemed a very good approach, even for rows  that have different  
lenght of contents. When I tried enlarge the font size in Firefox and  
Safari, it however gives an undesirable space at the bottom of each  
row, the same goes to deduce the font size.


I am thinking, perhaps it's best to combine yours and Georg'  
suggestion, using table-row and table-cell for display element for  
advance browsers,  then feeds IE 6 and 7 the height with EM,. IE 7  
has zoom feature like Opera, this maybe a more sensible approach?


Regards,

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



Re: [WSG] Help needed with CSS dropdown menu issue in Opera

2006-11-04 Thread Nick Roper

Hi David,

Thanks for this. I will investigate later today (and upgrade Opera)

Thanks again.

Nick


David Hucklesby wrote:

On Sat, 04 Nov 2006 23:29:01 +, Nick Roper wrote:

When the page started out there were no requirements for any dropdown
navigation, so everything was just handled by #contentLeft. Then a
request for a dropdown was made and I added the code  css per the
example on List Apart. The associated javascript uses the #dropnav id to
apply a class of 'over'  - see below.

Maybe the problems are down to the confusion between #contentLeft and
#dropnav?

Javascript code is :

startList = function() {
if (document.alldocument.getElementById) {
navRoot = document.getElementById(dropnav);
for (i=0; inavRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==LI) {
node.onmouseover=function() {
this.className+= over;
}
node.onmouseout=function() {
this.className=this.className.replace( over, );
}
}
}
}
}
window.onload=startList;


Hi Nick,
I'm not familiar with the menu, but glancing at this script I do
notice a test for document.all. I know that it's unlikely that Opera
would need help from a script. IE 6 and below likely does need this
script. So I wonder if the test for document.all is to filter for IE ?

I also know that Opera will return true for this condition. So the
script is, in fact, applied by Opera. Maybe start here - does Opera
work okay if you pull the script? If so, you could wrap the script in
a conditional comment for IE 6 and below. IE 7 likely does not
need it either. (But test!)

FWIW - More than a few of us went from Opera 7.54 to Opera 9, as the
version 8 added a lot more functionality, and a lot of bugs in the process.

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***




--
Nick Roper
partner
logical elements
innovative web and internet solutions
zend/php  mysql approved partner
email: [EMAIL PROTECTED]
phone: +44 1749 676798
  www: www.logical.co.uk
skype: nick.roper / +44 20 7870 9587


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***