Re: [css-d] IE5 problem with menus: Thank you!
Dear Holly,
I have just come back to Australia from Hong Kong, and implemented
your solution.
On 08/10/06 20:18 -0500, Holly Bergevin wrote:
From: Nick Urbanik <[EMAIL PROTECTED]>
The menus here: http://camwest.pps.com.au/ jump about in IE5
Hi Nick,
If you'll ammend one of the selectors in your lt IE 7 Conditional
comment/style sheet, IE5 should come around.
change -
#menu ul li a {height: 1%;)
to -
#menu ul li a,
#menu,
div#menu li,
div#menu li:hover {height: 1%;}
(yeah, I added several elements there)
Anyway, it worked for me and didn't seem to bother IE6 or IE5.5.
Thank you very much indeed! It did indeed fix it. I would like to
buy you a beer or the beverage of your choice --- now the web site
seems as if it will work with any browser! Thank you.
I would love to know *how* you knew that this would work, since my
goal includes understanding CSS and how web browsers interact with it.
--
Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED]
GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24
pgpFN1b2myGiZ.pgp
Description: PGP signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE5 problem with menus
Dear Folks, The menus here: http://camwest.pps.com.au/ jump about in IE5, but these menus: http://nicku.org/ seem to work fine in IE5. I wrote both, basing the html and css on the code in http://www.tanfa.co.uk/css/examples/menu/vs7.asp. Can anyone suggest why http://nicku.org/ works and http://camwest.pps.com.au/ doesn't? Note that I tried http://camwest.pps.com.au/ in IE5.5, IE6, Firefox 1.5.0, Konqueror 3.x, Opera 9, and it seems to work fine there. -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpih4S40i6vK.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] application/xhtml+xml: background-color disappears!
You ripper, Roger! (okay, for readers who are not older Australians,
that means, "You are wonderfully good, Roger!")
On 11/09/06 02:32 -0400, Roger Roelofs wrote:
Nick,
On Sep 11, 2006, at 1:32 AM, Nick Urbanik wrote:
If you look at http://nicku.org/index.shtml you will see the body
background-color is a light greeny colour #e5f5e9, but if you look
at http://nicku.org/index.sxhtml in firefox 1.5.0, you will see that
the background-color is missing. (If you look at http://nicku.org/
you should get whatever your browser asks for).
Can anyone help me to understand why the background-color is missing
with application/xhtml+xml but is present with the exact same xhtml
and css served as text/html?
In html the body element is 'magical' in that it fills the viewport
(aka browser window) even when there isn't enough content to do so.
In xml that is not true. In xml the html element as the root element
gets this 'honor'. Changing your body style to
html, body { ...
should fix things right up.
It did, thank you very much!
Keep in mind that in xml there is no forgiveness for errors. The
parser just stops and puts up an error message rather than trying to
display the page anyway.
Yes, I noticed that! :-)
--
Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED]
GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24
pgphMjI6Ohz6x.pgp
Description: PGP signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] application/xhtml+xml: background-color disappears!
Dear Folks, In an effort to use XHTML properly serving application/xhtml+xml to browsers that ask for it, I decided to try my own web site as the first guinea pig. If you look at http://nicku.org/index.shtml you will see the body background-color is a light greeny colour #e5f5e9, but if you look at http://nicku.org/index.sxhtml in firefox 1.5.0, you will see that the background-color is missing. (If you look at http://nicku.org/ you should get whatever your browser asks for). Can anyone help me to understand why the background-color is missing with application/xhtml+xml but is present with the exact same xhtml and css served as text/html? -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpMWxwNdXQN5.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapping text around images with CSS and XHTML
On 02/09/06 03:52 -0400, Peter Apockotos wrote:
But my real question is how do I wrap text around items such as
(images/ads/php/javascript) as seen on the link provided below. And
I would like to do this with XHTML Strict guidelines of the WC3.
<http://www.macnn.com/articles/06/01/20/intel.imac.gets.4.5.stars/>
Well, let's see, I select the header and text, then from my Firefox
context menu, I choose, "View Selection Source"
and see this:
Intel iMac for consumers, not Pros
[ stuff to display the image ]
Apple's new iMac Core Duo [ lots of uber-marketing speak
excised ...] Pro users.
Then I select "View CSS" from the web developer's toolbar and see:
#recad{
padding: 0 0 20px 20px;
width: 300px;
height: 250px;
float: right;
}
So I guess that's how they did it.
But I'd have used a header instead of a div for the heading.
And the w3c validator shows "Failed validation, 186 errors", so they
seem to have committed other html errors too.
--
Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED]
GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24
pgpdTaf9h7ilw.pgp
Description: PGP signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Simple floating thumbnails with captions
Dear Folks, On 02/09/06 06:37 +0200, Gunlaug Sørtun wrote: Nick Urbanik wrote: In a fluid layout I think this will work better... <http://www.brunildo.org/test/ImgThumbIBL.html> ...meow. Yes, that was the first thing I tried, since those cats look so nice there :-) Unfortunately, it seems to work well when all thumbnails are the same width, but I had endless bother with trying to set the width to a value equal to the width of the largest image. You can see the unhappy results in http://linus.nicku.org/trains/trains-old.shtml which looks very odd in a number of browsers. Part of the trouble is that I am too silly to understand why each rule is required. If I can do something simpler that I actually understand then I can build on it. I later want to add lots of radio buttons and links into the caption area (no, not on my son's web site) to replace the crufty old table layout thumbnails of my gigabytes of family photos. -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgphxOOBjjLS6.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Simple floating thumbnails with captions
Dear Folks,
My aim is really simple: float some variable sized thumbnails images
with variable sized captions, and have them float (or arrange
themselves in any way) nicely, so that they don't do silly things
like:
++ ++
|| ||
|| ++
++ +-+
| |
| |
+-+
instead of doing this, which is more the behaviour I want.
++ ++
|| ||
|| ++
++
+-+
| |
| |
+-+
I would also like the captions to wrap to the same width as the
thumbnail image.
I have tried using styled with {list-style: none; float: left;}
but still get the above behaviour, as at
http://linus.nicku.org/arithmetic/arithmeticbook-test.shtml
I have been successful when all images are the same height, so that
the thumbnails at http://linus.nicku.org/trains/ seem to work, but the
captions are in a box that is sometimes too narrow.
The examples I have seen at
http://alistapart.com/stories/practicalcss/ (after converting div -> ul)
and at http://css-discuss.incutio.com/?page=GalleryFloat involve
setting both the width and the height. When the height expands
because of enlarging the font, then things seem to go wrong.
Any suggestions are most welcome.
--
Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED]
GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24
pgpdGjZayOUJH.pgp
Description: PGP signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pruned test case to try in Opera, Safari, IE5.x on Mac OS9.
Dear Folks, I have now made a single page that won't take nearly so long to load with all the CSS inline, irrelevant CSS excised, and with two menus: http://linus.nicku.org/test-with-empty-div.html * The first menu solves the problem of the margin under the menu with an empty div containing only a --- Horrible HTML for layout! Although this HTML hack works, it mixes presentation with the content, and I really hope to be able to find a better way. * The second menu is made with a div that wraps it. The bottom margin seems to displace the popups vertically upwards (in Opera only as far as I can tell). This problem seems to be related to my understanding of floats. I will be grateful to be able to learn from you people. Please could someone with Mac OS9 and Mac OSX and Safari let me know if the menus work there? -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpJ2oEZWXAhS.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expandable, horizontal menus that work?
Dear Folks, On 21/08/06 11:11 +1000, Nick Urbanik wrote: On 21/08/06 10:26 +1000, Nick Urbanik wrote: Dear Folks, On 20/08/06 11:39 +1000, Nick Urbanik wrote: Dear Folks, I've fixed my IE problem, but the Opera problem remains. I have fixed the problem with Opera to the point where the menus work, by explicitly setting the margins of the tags to 0, as advised here: http://css.maxdesign.com.au/listutorial/sub10.htm However, the position of the second level menus is wrong (and the margin under the has disappeared too), all in Opera 9. Okay, fixed by setting the margins of the to 0. But I cannot put a margin under the list, with Opera. I even put an empty div underneath, wrapped a div around it, and still was unable to get a gap between the menus and a following header. Well, when I put a inside the empty div, Opera recognised it, so I finally have a vertical gap under the menu. However, this looks like a horrible hack, reminiscent of using tables for layout. Why does Opera ignore the margin around the enclosing (that I've since removed)? Any suggestions about what is happening here gratefully received. Still hanging out for any ideas/explanations. The site, again, is at http://linus.nicku.org/ -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpz2EHaz0YxS.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expandable, horizontal menus that work?
On 21/08/06 10:26 +1000, Nick Urbanik wrote: Dear Folks, On 20/08/06 11:39 +1000, Nick Urbanik wrote: Dear Folks, I've fixed my IE problem, but the Opera problem remains. I have fixed the problem with Opera to the point where the menus work, by explicitly setting the margins of the tags to 0, as advised here: http://css.maxdesign.com.au/listutorial/sub10.htm However, the position of the second level menus is wrong (and the margin under the has disappeared too), all in Opera 9. Okay, fixed by setting the margins of the to 0. But I cannot put a margin under the list, with Opera. I even put an empty div underneath, wrapped a div around it, and still was unable to get a gap between the menus and a following header. Any suggestions about what is happening here gratefully received. -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpmRSqjZgyQ3.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expandable, horizontal menus that work?
Dear Folks, On 20/08/06 11:39 +1000, Nick Urbanik wrote: Dear Folks, I've fixed my IE problem, but the Opera problem remains. I have fixed the problem with Opera to the point where the menus work, by explicitly setting the margins of the tags to 0, as advised here: http://css.maxdesign.com.au/listutorial/sub10.htm However, the position of the second level menus is wrong (and the margin under the has disappeared too), all in Opera 9. Any ideas (apart from using unrelated techniques) would be much appreciated, since I the focus here is on learning, not on satisfying my corporate client (my six-year old son). -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpTbOloRwUTc.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dropdown doesn't work in IE
On 20/08/06 23:28 +0100, Ian Young wrote:
Hi all
Working on a drop down based on Suckerfish.
Doesn't work at all in IE6. Has JavaScript included (as per Suckerfish).
Also sidebar image doesn't appear until hovering over menu.
You have also got:
body {
behavior: url(csshover.htc);
}
which:
* is not necessary for use with suckerfish.js
* may (?) possibly interfere with sucjerfish.js
--
Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED]
GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24
pgp5SqaqOlZqf.pgp
Description: PGP signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Javascript: getElementsByTagName() getElementsById(): How getElementsByClass()?
Dear Folks, On 20/08/06 14:24 -0700, Paul Novitski wrote: At 8/20/2006 01:29 PM, Nick Urbanik wrote: This is tangentially related to this list But not closely enough. Here's a great JavaScript list for future scripting questions: https://lists.LaTech.edu/mailman/listinfo/javascript Thank you. http://google.com/search?q=getElementsByClass Doh! Sorry. -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpZve8F4tDw0.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Javascript: getElementsByTagName() getElementsById(): How getElementsByClass()?
Dear Folks, On 20/08/06 22:18 +0100, Christian Heilmann wrote: Dear Folks, As you can guess, I am totally new to Javascript, and a beginner at CSS. Yes, so why do you try to solve all the problems on your own? Well, I have just finished reading "Cascading Style Sheets", 2e, by Owen Briggs et al, and am actually trying to learn enough to do things like this by myself. A lofty ambition, but, hey, I can dream! :-) http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ is an implementation of getElementsByClassName, and nearly every JavaScript library out there has similar solutions. As to implementing more than one multi level dropdown menus on a page: Have you considered the users without CSS or JavaScript? Do they really need all these options? suckerfish.js is a very simple javascript function for IE only, a very simple and clean alternative to csshover.htc. It is only for the suckers who use IE. If they turn off javascript, they still see the top level menu items, which work. If people use CSS incapable devices, they still see a of links, which should still have meaning to them. After looking at how the various getElementsByClass() functions are written, I realise that I can probably use some of the ideas from the code to implement what I need. Thank you. -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpuickn5DP52.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [OT] Javascript: getElementsByTagName() getElementsById(): How getElementsByClass()?
Dear Folks, This is tangentially related to this list, since I am trying to improve the simple suckerfish.js code at http://www.htmldog.com/articles/suckerfish/hover/ to be able to use classes as well as ids, in my continued effort to to solve my problems with CSS horizontal menus mentioned above. Now I can see that Javascript provides getElementsByTagName(), getElementsById() and getElementsByName(). My question is: How do I implement the equivalent of getElementsByClass() (which as far as I can see, is not built into Javascript?). As you can guess, I am totally new to Javascript, and a beginner at CSS. -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgpfJ5ABk6unY.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expandable, horizontal menus that work?
Dear Folks, I've fixed my IE problem, but the Opera problem remains. On 20/08/06 10:17 +1000, Nick Urbanik wrote: Dear Folks, I have a mission-critical application: my six-year old son's website! http://linus.nicku.org/ The horizontal menus are adapted from http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones2.html but they break in Opera 9. If I uncomment the width in ".nav li" below 1. In Opera 9, the hover works the first time, then not at all till I refresh. 2. IE then shows the menus with strange gaps. I fixed that: the HTML was invalid! With the width uncommented, as it is now, things look bad in Opera, as mentioned above. The following happens in Opera 9: 1. If I just hover over the menu items that have no children, things seem to work okay. 2. When I hover over the first menu item to bring up the second menu item, no further hovering seems to have any effect. I would be grateful for any suggestions, as I am just learning CSS now. I haven't tried Safari, as I don't have a Mac. It looks okay in Konqueror though. -- Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED] GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24 pgp0JHoGaxsGk.pgp Description: PGP signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Expandable, horizontal menus that work?
Dear Folks,
I have a mission-critical application: my six-year old son's website!
http://linus.nicku.org/
The horizontal menus are adapted from
http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones2.html
but they break in Opera 9.
If I uncomment the width in ".nav li" below
1. In Opera 9, the hover works the first time, then not at all till I
refresh.
2. IE then shows the menus with strange gaps.
.nav li {
float: left;
/* width: 11.05em; */ /* width needed or else Opera goes nuts */
}
I really want a flexible layout, since I am so tired of seeing the
enlarged text constrained within tiny 720 pixel width boxes on my 1920
pixel wide screen.
--
Nick Urbanik RHCE http://nicku.org[EMAIL PROTECTED]
GPG: 7FFA CDC7+5A77 0558 DC7A 790A 16DF EC5B BB9D 2C24 ID: BB9D2C24
pgpqiXTO4GhDS.pgp
Description: PGP signature
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
