[css-d] Problems with custom image-bullets (IE of course)
I apologise in advance if I'm asking a stupid question, but I have a baby and not getting much sleep so brain not functioning well...! I have been struggling to get custom bullets to line up correctly in IE. I searched the CSS archives and came across your example Francky at http://home.tiscali.nl/developerscorner/css-discuss/test-graphical- bullets.htm. This is very helpful and I think I understand how it works. The bit I don't understand is the IE fine-tuning. I've looked in the text books, but am still not sure how the IE browser reads this, but the other browsers don't. And fundamentally where do I put the: Does it go in the HTML document near the list itself? Thanks in advance for your help. Sincerely Sarah __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problems with custom image-bullets (IE of course)
Thank you so much Francky and Jukka – it makes complete sense now you've explained it! Can I just ask what kind of code the '[if lte IE 6] ... [endif]' is? Even though it works, I like to know the details of how, and what other programming languages I need to think about learning to enable me to make the fullest use of CSS. Many thanks – your help is much appreciated! Sarah :) On 9 Mar 2007, at 18:48, francky wrote: >>> __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problems with custom image-bullets (IE of course)
Wow – so much (extremely useful!) information and you both helped me fix my problem! Thank you so much. I have bookmarked all these pages and will study them a bit later. It's so good to be directed to the most elegant way of doing things instead of struggling with masses of complex unnecessary code (I would otherwise have been studying my Javascript book for IE browser sniffer code). I really appreciate you taking the time to give me all this information – it's been a huge help and means I can spend some time playing with my kids instead of shouting at them because I'm frustrated that my web page doesn't work properly :) You and the css-discuss list give so much generous support – makes me realise that there are lots of wonderful people in the world! I hope if I get better at this that one day I will be able to help others too. Cheers Sarah On 9 Mar 2007, at 23:05, francky wrote: > Sarah McCall wrote: >> [...] >> Can I just ask what kind of code the '[if lte IE 6] ... [endif]' >> is? Even though it works, I like to know the details of how, > Well, it is not html, not css and not a programming language - it's > a part of Microsoft's IE language ... > The MSIE language is just IE only, and IMO it shouldn't be used > unless to correct IE bugs. ;-) > How the Conditional Comments (the name for the '[if lte IE 6] ... > [endif]' stuff) are working, is explained by Microsoft in a MSDN page: > >* About Conditional Comments > <http://msdn.microsoft.com/library/default.asp?url=/workshop/ > author/dhtml/overview/ccomment_ovw.asp> > > ... though their examples could be a bit updated: > >* test :: Microsoft's IE CC information :-) > <http://home.tiscali.nl/developerscorner/css-discuss/test-IE- > cc-information.htm> > > Besides the link of Jukka, lots of practical suggestions about > filtering on Georg's page: > >* CSS sledgehammer...#2 <http://www.gunlaug.no/contents/ > wd_1_02_01.html> > >> [...] >> and what other programming languages I need to think about >> learning to enable me to make the fullest use of CSS. >> [...] >> > In my opinion, css and (x)html should be enough; added can be some > knowledge about javascript for some (dynamical) features and tricks. > > But for the fullest use of CSS a kind of "bug destroying > language" :-) is developed, which is no language at all, but a > series of hacks and workarounds, gathered from all over the world, > to force that browsers (and especially IE) are doing what should be > expected according to the w3c css specs. For this, I can recommend > 'Position Is Everything - modern browser bugs explained in detail': > >* PIE, startpage <http://www.positioniseverything.net/> >* PIE, IE troubles <http://www.positioniseverything.net/ > explorer.html> > > Greetings, > francky > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Background image rollover cutting off image
I'm trying to get my head round image replacement and using css for
rollovers instead of javascript (sorry I know I'm behind the times
somewhat).
I think I've managed to get both working up to a point, but for some
reason the css link code ('meet_the_team_link a' and
'meet_the_team_link a:hover') cause the imaage to cut off on the right
hand side.
You can see it in practice here:
http://homepage.ntlworld.com/sarah.mccall/storytelling/
I've left the background image showing in the original
'meet_the_team_link' div so you can see how it should appear (this is
correct positioning, but ultimately should be removed as we only need
the 'meet_the_team_link a' image otherwise one overlaps the other ).
The div is 167px wide and the image only 160px wide so there should be
enough room for it.
This is the HTML code:
Meet the
storytelling team
and this is the css code:
#left_hand_column {
width: 240px;
height: 700px;
margin: 0;
border: 0;
}
#welcome_girl {background:transparent url(../images/welcome_girl.png)
0 0 no-repeat;
float: left;
width:73px;
height: 100px;
margin: 0;
border: 0;
}
#meet_the_team_link {
background:transparent url(../images/meet_the_team_link.png) 0 0 no-
repeat;
padding: 100px 0 0 0;
float: left;
width:167px;
height: 0px;
overflow: hidden;
margin: 0;
border: 0;
}
#meet_the_team_link a {
background:transparent url(../images/meet_the_team_link.png) 0 0 no-
repeat;
padding: 100px 0 0 0;
width:167px;
margin: 0;
border: 0;
}
#meet_the_team_link a:hover {
background-position: 0px -101px;
padding: 100px 0 0 0;
margin: 0;
border: 0;
}
Any suggestions about where to start looking for a solution to this
problem would be really appreciated. I've spent all day on it and feel
I'm getting nowhere.
Many thanks
Sarah
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background image rollover cutting off image
Thank you very much to Brian Hazelton and Philippe Wittenbergh for their extremely valuable suggestions and practical help. It now works! Communities like this make the difference between persevering and giving up for people who are new to CSS like me. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] drop-down menu titles
I am very much a newbie and know that I am trying to run before I walk by attempting drop-down menus, but I've committed myself now ... and it's a good way to learn. This is my first posting so please tell me if I do something wrong. Please see a Photoshop version of what I'm trying to achieve: http://homepage.ntlworld.com/sarah.mccall/web4c.gif This is where I've got to: http://homepage.ntlworld.com/sarah.mccall/bildweb/ I have based the code on a 'walk-through' example in the book 'DHTML and CSS for the World Wide Web' by Jason Cranford Teague (Chapter 18, p375) My question is: Is it possible to have titles in the navigation bar which run on to two or even three lines (e.g. 'Learning Disabilities Community')? Is it possible at all? Is it possible using this method of creating drop-down menus or can someone suggest a more appropriate method? Thanks. Sarah __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop-down menu titles
Thank you so much -- a far superior approach (most importantly for accessibility, but also far less css and javascript to get lost in). I struggled a little to get the drop down part of the menu to be wider than the menu item in the top navigation bar (to fit long submenutitles on one line). Eventually I copied some of the code from the Suckerfish 'Make it look prettier' example: http://www.htmldog.com/articles/suckerfish/dropdowns/example/ which magically worked -- I'm just getting my head around how. I'm not sure what the following bit of code means though (specifically the backslash in 'width' (w\idth): width: 14.4em; w\idth: 13.9em; Is it a hack? Please know that because of the wonderful css-discuss.org and specifically because you took the trouble to look at my problem Jason I can now spend a few hours more with my kids and less in front of the computer -- which has got to make the world a better place. Thank you! On Sunday, August 28, 2005, at 01:01 am, Jason M Roehrig wrote: Take a look at the Suckerfish Drop Down Menu [1] tutorial, as this is exactly what you are looking for. It is recommended to mark-up menu elements as list elements, placed in a list (most commonly unordered lists), as a menu is nothing but a list of links and should be accordingly marked. My question is: Is it possible to have titles in the navigation bar which run on to two or even three lines (e.g. 'Learning Disabilities Community')? You just need to set the width of list elements. Is it possible at all? Yes :) Is it possible using this method of creating drop-down menus or can someone suggest a more appropriate method? I think this is the best method to achieve what you want, just try and keep in mind, not to make your navigation over complex, as this could cause irritation of users, while created with good will. [1] http://www.htmldog.com/articles/suckerfish/dropdowns/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop-down menu titles
Sorry I forgot to ask something else ideally I would like the drop down part of the menu to only be activated by a click or key press rather than hovering over the link (sometimes it can be annoying if you're looking at the content and keep accidentally triggering drop downs). Is there an easy solution or would I need to employ lots of Javascript? If so, would it then render the navigation less accessible? Thanks Sarah On Sunday, August 28, 2005, at 01:01 am, Jason M Roehrig wrote: Take a look at the Suckerfish Drop Down Menu [1] tutorial, as this is exactly what you are looking for. It is recommended to mark-up menu elements as list elements, placed in a list (most commonly unordered lists), as a menu is nothing but a list of links and should be accordingly marked. My question is: Is it possible to have titles in the navigation bar which run on to two or even three lines (e.g. 'Learning Disabilities Community')? You just need to set the width of list elements. Is it possible at all? Yes :) Is it possible using this method of creating drop-down menus or can someone suggest a more appropriate method? I think this is the best method to achieve what you want, just try and keep in mind, not to make your navigation over complex, as this could cause irritation of users, while created with good will. [1] http://www.htmldog.com/articles/suckerfish/dropdowns/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
