RE: [WSG] Scalable Inman Flash Replacement Technique
On Wed, 1 Sep 2004 13:49 , Hill, Tim [EMAIL PROTECTED] sent: Just a note on this I tested it with a demo version of Jaws and it read the heading text, it did read it as a flash object though, so maybe for other screenreading software the heading may not read? Is anyone in a position to test this? Time Screen readers should pick up the text in the stylesheet, not the flash object! i've tested it on a current project (http://www.southtyneside.info/project_area/cleadonpark/) works really well! Mark Harwood http://phunky.co.uk http://zinkmedia.co.uk ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] background image on a horizontal list.
Hello there!!
I've been a member here for some time, and now I will see if I as well can
get some help from you :)
First of all, I'm a beginner so don't shoot me!!
The problem:
On my webpage, I've created an unordered horizontal list for my main
navigation, where I use some homemade buttons as background (link,
visited,hover active).
I've made those buttons 100px wide, but in the browsers I've tested them out
the hole background image is not visual .
It's a horizontal list, so I have used :{ display: inline; width: 100px;} in
the css, but the {with: 100px;}
declaration, doesn't seem to have any effect at all.
When I use {display:block; width: 100px; } it does'nt seem to be a problem
(other then the list transform in to a vertical list).
Here is the layout:
http://lennart-fylling.com
Here you can see how the buttons really look's like:
http://lennart-fylling.com/utkast2.php
I hope here are some experts in this area, who can make may day much better.
I hope you understand both my problem and my school english :)
--
Lennart Fylling
Aalesund
Norway
http://lennart-fylling.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background image on a horizontal list.
Lennart,
Using display:inline will cancel out the width of the element and make it as wide
as the text inside of it,
what i tend to do when creating horizontal menu's is
#menu-UL { margin : 0px ; padding : 0px ; }
#menu-UL li { margin : 0px ; padding : 0px ; float : left ; }
#menu-UL li a { width : 100px ; background : #99cc00 ; padding : 5px ; }
Hope that help's fella
Mark Harwood
--
phunky.co.uk / zinkmedia.co.uk / xhtmlandcss.co.uk
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] background image on a horizontal list.
Hi Lennart,
From your CSS, you could apply the width:100px to the #navlist li ID and
use float:left instead of display:inline.
Hope this helps.
- Regnard Raquedan
mobile: 639192907711
ym: rkraquedan @ yahoo.com
msn: rkraquedan @ hotmail.com
web: http://regnard.raquedan.com
Original Message:
-
From: Lennart Fylling [EMAIL PROTECTED]
Date: Wed, 1 Sep 2004 10:56:37 +0200
To: [EMAIL PROTECTED]
Subject: [WSG] background image on a horizontal list.
Hello there!!
I've been a member here for some time, and now I will see if I as well can
get some help from you :)
First of all, I'm a beginner so don't shoot me!!
The problem:
On my webpage, I've created an unordered horizontal list for my main
navigation, where I use some homemade buttons as background (link,
visited,hover active).
I've made those buttons 100px wide, but in the browsers I've tested them out
the hole background image is not visual .
It's a horizontal list, so I have used :{ display: inline; width: 100px;} in
the css, but the {with: 100px;}
declaration, doesn't seem to have any effect at all.
When I use {display:block; width: 100px; } it does'nt seem to be a problem
(other then the list transform in to a vertical list).
Here is the layout:
http://lennart-fylling.com
Here you can see how the buttons really look's like:
http://lennart-fylling.com/utkast2.php
I hope here are some experts in this area, who can make may day much better.
I hope you understand both my problem and my school english :)
--
Lennart Fylling
Aalesund
Norway
http://lennart-fylling.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
mail2web - Check your email from the web at
http://mail2web.com/ .
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] background image on a horizontal list.
Hi Lennart - welcome.
Your buttons are only visible for the width of the word used for your
links, plus its padding - so a bigger (wider) word reveals more of your
button. Try this:
#navlist li {
list-style: none;
margin: 4px;
float: left;
}
#navlist li a {
display: block;
...etc }
That way the button is always fully visible - but if your linked text
is longer than 100px, it will extend outside of the button...
By the way, I noticed you tried to 'open up' your buttons with spaces
in the code:
lia href=#About/a/li
That won't work; the browser ignores whitespace. Adding non-breaking
spaces (nbsp;) would work, but it's not the best way to fix the
problem!
Oh, and your English is fine - better than my Norewgian (which is zero)!
Hope that helps.
Nick
___
Omnivision. Websight.
http://www.omnivision.com.au/
On Wednesday, Sep 1, 2004, at 18:56 Australia/Sydney, Lennart Fylling
wrote:
Hello there!!
I've been a member here for some time, and now I will see if I as well
can
get some help from you :)
First of all, I'm a beginner so don't shoot me!!
The problem:
On my webpage, I've created an unordered horizontal list for my main
navigation, where I use some homemade buttons as background (link,
visited,hover active).
I've made those buttons 100px wide, but in the browsers I've tested
them out
the hole background image is not visual .
It's a horizontal list, so I have used :{ display: inline; width:
100px;} in
the css, but the {with: 100px;}
declaration, doesn't seem to have any effect at all.
When I use {display:block; width: 100px; } it does'nt seem to be a
problem
(other then the list transform in to a vertical list).
Here is the layout:
http://lennart-fylling.com
Here you can see how the buttons really look's like:
http://lennart-fylling.com/utkast2.php
I hope here are some experts in this area, who can make may day much
better.
I hope you understand both my problem and my school english :)
--
Lennart Fylling
Aalesund
Norway
http://lennart-fylling.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Odd IE Behaviour.
I dont know why, but if you do this in IE, it will effect the Mouse Cursor. Well it happened to me, anyone have an explaination? create a textarea. add the CSS - background: none; and then you wont have the normal cursor over the textarea - unless you are over text. normally its the VERTICAL BAR, all over the textarea regardless of text being there or not. when you set the background to none, it is asif its not a textarea unless there is some text over the top. Odd behavious. maybe someone can make some sense out of it. Cheers - Chris Stratford ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS competition
Sound's very nice johna i shall deffently be submitting one or two templates for you! Would you have any problem with me also offering the one's i submit to you on my new project xhtmlandcss.co.uk ? or would you like soley right's to them? Many Thanks Mark Harwood -- http://phunky.co.uk http://zinkmedia.co.uk http://xhtmlandcss.co.uk ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background image on a horizontal list.
Mark Harwood WebMail wrote: Least your sorted now! you got about 4/5 emails all given the same advise :D Yes, but the advises I've got helped me out, so with a bit testing and failing, I'm finally getting somewhere. I'm far from finished, but you can se the result of my list here http://lennart-fylling.com/ , need to do some more positioning before I'm 100% satisfied. -- Lennart Fylling Aalesund Norway http://lennart-fylling.com/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS block display model horizontal arrangement in container block
Hi Nick, thanks for the links. They are nice additions to my collection of CSS resources. Particularly the /* Position is Everything */ website was interesting for its rundown on IE CSS bugs and workaround hacks. Reading about the IE/Win Guillotine Bug showed me that, contrary to what I thought, IE was not getting it right even though it was what I wanted. I can't post a link to my page because I don't have a public website (yet). The page I am making (reworking, actually, removing the tables used for formating content) is behind the corporate firewall. The example I posted does look like the classic header/3 column/footer layout but I want to be able to add or remove columns easily as well as other sections with or without columns. For example - forgive my sketches, please ;-): +-+ | | | | | | +-+ +-+ | +-+ +-+ +-+ +-+ | | | | | | | | | | | | +-+ +-+ +-+ +-+ | +-+ +-+ | | | | | | +-+ +-+ | +-+ +-+ | | | | | | | | +-+ +-+ | +-+ +-+ | | | | | | +-+ Now the good news. I got it. I actually have two solutions. One using floating blocks inside normally flowing blocks with an empty cleared div (clear:both) after the columns and the other using absolute positioning inside relatively positioned blocks. I prefer the float method because it's shorter and easier to modify. The absolutely positioned blocks don't count as content and therefor I must give the containing block a height., whereas the cleared div tucks the bottom of the containing block around the bottom of the longest floater. I also have to have a separate selector for each absolutely positioned column to position it whereas the floats stack horizontally. All I have to define is the width of the floating columns. I use percentages but find the percents can't add up to 100% which is no big deal. Carlyle -- Diese E-Mail enthält vertrauliche und/oder rechtlich geschützte Informationen. Wenn Sie nicht der richtige Adressat sind oder diese E-Mail irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese Mail. Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser Mail ist nicht gestattet. This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden. ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] stuck on first attempt
Hi all, After much trepidation, here is my first attempt at building a site using web standards: http://lorenzo.za.net/ ... or as a zip file: http://lorenzo.za.net/dtc.zip As can be seen, it's far from done. I've just managed to get it looking and working right in IE6, after starting from a decent Firefox 0.9 layout. Uncommenting the content in the #content and #bookmark divs will show how they stretch the page height/background images perfectly in these browsers. I'm aware that I did this by using !important extensively in my CSS, resulting in some dodgy workarounds in places (including substituting transparent PNGs with GIFs for IE6). I created the design in PS and converted it into html, as I'm in the habit of doing. What I'm wondering now is: have I painted myself into a corner? I'd really like to retro-fit the design to other browsers (IE5+, Opera 7 and Netscape 7 at least) but have no idea what step to take next... Can it be salvaged, or do I have to restart from scratch using more of a rules-based design approach? Suggestions/advice? -- _/\/¯¯\/\_. - Project Manager - (w) www.quirk.co.za (e) [EMAIL PROTECTED] (h) +27 (0)86 11 021 33 (t) +27 (0)21 462 7353 (f) +27 (0)21 462 7354 www.quirk.co.za/email_conditions.php ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Problem with line-height and images in IE
Hi,
I have a dodgy problem with my Stylesheet in Internet Exploret 5+.
!-- START: Code --
style
.mydiv {
font-family: Arial,Verdana;
font-size: 12px;
color: #333;
width: 300px;
line-height: 16px;
}
img { border: 0; }
/style
div class=mydiv
Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text
Text Text Textimg src=arrow.gif width=9 height=7 alt=
/ Text Text Text Text Text Text
/div
!-- END: Code --
The problem is, that an image inside a block element destroys the
line-height of the line containing that image. In my example the line
height of the line containing an image is only 15 px and not as declared
16px.
Can anybody help me?
Cheers,
--
Marco Della Pina
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] positioning problem
Hi all, Could someone take a look at this page: www.vtimms.org/providers/ We can't figure out what we're doing wrong with the positioning. We want the 'box' div to expand to hold the 'content' div. Any ideas? Thanks, Barb -- Barbara Dozetos Democracy is two wolves and a lamb Web Developer voting on what to have for lunch. Physician's Computer CompanyLiberty is a well-armed lamb 1 Main St., Ste 7 contesting the vote. Winooski, VT 05404 --Benjamin Franklin [EMAIL PROTECTED] 802-846-5532 ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] positioning problem
Nevermind -- as is so often the case, about 5 minutes after we sent this plea for help, we discovered the glitch. Barb Barbara Dozetos wrote: Hi all, Could someone take a look at this page: www.vtimms.org/providers/ We can't figure out what we're doing wrong with the positioning. We want the 'box' div to expand to hold the 'content' div. Any ideas? Thanks, Barb -- Barbara Dozetos Democracy is two wolves and a lamb Web Developer voting on what to have for lunch. Physician's Computer CompanyLiberty is a well-armed lamb 1 Main St., Ste 7 contesting the vote. Winooski, VT 05404 --Benjamin Franklin [EMAIL PROTECTED] 802-846-5532 ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Sliding Doors and IE5.00 Mac
Someone asked the other day about making the ALA Sliding Doors
technique work on early versions of IE Mac (IE 5.00, running on OS ). I
have that working on my portfolio for a while [1]. Simplified version
here:
http://dev.l-c-n.com/Rfloatnav/slidingdoors.php
The trick is not to float anything for the oldest versions of IE5.0
Mac, but use {display:inline-block} instead.
That is only served to IE Mac, all versions (because it is damn
difficult to differentiate between the older and newer versions).
[1] Or on a full site
http://www.l-c-n.com/lcn/) (site in Japanese)
HTH
Philippe
---/---
Philippe Wittenbergh
now live : http://emps.l-c-n.com/
code | design | web projects : http://www.l-c-n.com/
IE5 Mac bugs and oddities : http://www.l-c-n.com/IE5tests/
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
