Re: [WSG] Is this a good use of dl
Hey Cris, Well, I don't know man... but I think the list inside the list is just unnecessary. You could put the name inside dt and general description in dd. You could use br / or anything or else too... If I am not wrong, W3C says you can do that. Well, that's just my opinion, let's see what the other members have to say about it. See You, Linuxer *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Mac / Linux Check if you please
Hey Joseph, How you doing? Well, I have been checked your web site on Linux through Icedove(Debian's Firefox). That works really fine. No problems here. Best, Linuxer Joseph R. B. Taylor wrote: Greetings all, Can I ask the Linux users to take a look at this one? I want to make sure there's no layout flaws on your favorite browsers. http://michaels.sitesbyjoe.com/ Many thanks, *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Site Check Please (Citinet Lending)
Good afternoon, I'm currently in the process of designing a site that resides in a dev environment: http://dev5.headclerk.net/ It's CSS-driven and XHTML compliant. I make every effort to ensure that I use valid, well-formed semantically correct markup, but often I'm too close to the project to detect any flaws in the code. This is the reason I'm asking the WSG members to take a quick look and provide their expert feedback. Thanks in advance for your time, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Site Check Please (Citinet Lending)
Thank you Justin! I've begun the process of fixing those errors. Respectfully, Mario Mario, Some of your CSS does not validate. http://jigsaw.w3.org/css-validator/validator?profile=css2warning=2uri=http%3A%2F%2Fdev5.headclerk.net%2F My only major issue with the design is the Upcoming Training background. There is not enough contrast between the type and the background for someone of low vision. Cheers, Justin ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Web design education
Chris, I've conducted several courses in CSS at a local community college where CSS-based designs are emphasized. The faculty and students embrace Web Standards, and understand the inherit value of using standard's technologies. All is not lost :) Respectfully yours, Mario S. Cisneros A large university here in the UK offers web design courses. But I don't hold out much hope for the future when they have things like this in their syllabus: Without the use of tables, all web pages would have to be presented in purely linear form. Many creative uses of the screen would be impossible to achieve. Although tables are a little trickier than other effects used in basic web design, it is mainly a matter of remembering that HTML's first purpose is to structure the page; tables are just an extension of this basic idea. Once you have mastered the basics, you can get some very sophisticated effects with table tags. (Taken from http://www.leeds.ac.uk/acom/webdesign/materials/lesson4.html) Has anyone attended this course? Is it really as bad as all that? To what extent can students do it the right way without being penalised from straying from the Official Course Documentation? And, a larger question for us all: what are we as web standards and accessibility evangelists to do about the continued ingorance and apathy towards this vital subject, especially in academia? Let's hope that the recent Target website court case in the US highlights the cause. Chris Taylor www.stillbreathing.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Server Side Includes
Richard, I use SSI's for my navigation, and I've never had any problems with validation, or structure. Kind regards, Mario Are there any standards issues around using server side includes? For example a simple include of another file e.g. -- #include file=test.html -- Does it matter that this is making use of code within comments (without wishing to start the debate about IE conditional code in comments again), or is it irrelevant because this will not be seen by the browser? Thanks, Richard Morton QM Consulting Ltd ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Server Side Includes
Paul, I don't entirely agree that the SSI is irrelevant to standards. I use XHTML Strict, and if my markup in the SSI file contains a deprecated property then it won't validate. Yes, the server needs to be configured to interpret the SSI file, and it's similar to PHP in that he code is parsed by the webserver, but the markup needs to valid and well-formed. Mario SSI is irrelevant to standards, as the code is parsed by the webserver (and the include file placed in the output code) before the browser/client receives it Paul -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Wednesday, November 09, 2005 1:10 PM To: wsg@webstandardsgroup.org Cc: [EMAIL PROTECTED] Subject: Re: [WSG] Server Side Includes Richard, I use SSI's for my navigation, and I've never had any problems with validation, or structure. Kind regards, Mario Are there any standards issues around using server side includes? For example a simple include of another file e.g. -- #include file=test.html -- Does it matter that this is making use of code within comments (without wishing to start the debate about IE conditional code in comments again), or is it irrelevant because this will not be seen by the browser? Thanks, Richard Morton QM Consulting Ltd ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Server Side Includes
I wasn't arguing either. I was simply pointing out that the code still needs to be valid, well-formed and semantically correct. I teach a class at the local college and you'd be amazed at the number of students taking web-based courses with mimimal computer experience therefore I wouldn't assume that anything is a given, especially with beginners to CSS and the list, hence I took the liberty of emphasizing this point, which still stands. Mario From: [EMAIL PROTECTED] I don't entirely agree that the SSI is irrelevant to standards. I use XHTML Strict, and if my markup in the SSI file contains a deprecated property then it won't validate. I don't think anyone is arguing that the content of the include is irrelevant, the original question was about the syntax of the include statement and its effect on validity. Since the validator or browser never get to see the include statement, it is irrelevant. Of course the content of the include file would need to be valid to pass validation and hopefully display correctly in browsers. That seems to be a given. -- Peter Williams ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Navigation Anomaly in FF and IE
Good afternoon,
I recently launched a re-design of my company's site, and noticed that the main
menu (i.e. our
company, services, portfolio, rates, testimonials and custom quote) collapses
and expands in IE
and FF when a link is clicked. It happens quickly so you'll have to watch for
it :) However, it
works perfectly fine in Opera.
http://www.webnetdesignstudios.com
I've tried several different combinations in my CSS rules to address this
issue, and reviewed
several different sites in an effort to resolve this problem, but to no avail.
I'm probably
missing something quite basic, but it's driving me crazy.
Any advice would be greatly appreciated! The following is a CSS code snippet
that controls the
main menu, which I grabbed and altered slightly from Listamatic:
#mainNav
{border-top: 1px solid #999;
border-bottom: 1px solid #999;
background-color: #CCC4BE;}
#mainNav ul
{margin: 0;
list-style: none;
padding: 1px 0 4px 0;}
#mainNav ul li
{display: inline;}
#mainNav ul li a:link, #mainNav ul li a:active, #mainNav ul li a:visited
{color: #000;
font: bold 0.7em tahoma, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 10px 8px 10px;
border-right: 1px solid #999;}
#mainNav ul li a:hover
{color: #fff;
text-decoration: none;
background-color: #FF5100;}
#mainNav #pipe
{border-left: 1px solid #999;}
Warmly,
Mario
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Footer Navigation
Hi Sarah, I duplicate my main menu in the footer for those interior pages that scroll vertically more then one-page down so the user doesn't have to scroll up to navigate. I know this is a common practice, which of course an intra-page link such as 'back to top is another viable option often employed. Kind regards, Mario Hi William, Yes, I agree. However, the main navigation elements for websites I design are almost always css based (no images). So is there a valid argument for providing a footer navigation? Or, are there problems with the duplication of links for screen readers and/or disadvantages with search engine rankings? I think this practice is a remnant of pre-accessibility days where navigation options that were provided as images were duplicated as plain text links in the footer to aid people with images turned off etc. With judicious use of alt tags I don't believe this is something that is still necessary. -- XERT Communications email: [EMAIL PROTECTED] office: +61 2 4782 3104 mobile: 0438 017 416 http://www.xert.com.au/ web development : digital imaging : dvd production ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] 2nd Attempt: Main Menu Collapses, Expands in IE FF
Good morning all,
I've racked my brain, but can't seem to figure out the problem. I just launched
my site's
redesign (www.webnetdesignstudios.com), and although I'm pleased with the
initial results I'm
still addressing a few bugs. The one that bothers me the most is the fact that
the main menu
(i.e. our company, services, portfolio, etc.) collapses, expands and sometinmes
shifts in IE and
FF when a link is clicked. It seems to work fine in Opera.
The following is a CSS code snippet that controls the main menu, which I
grabbed from
Listamatic:
/* MAIN NAVIGATION BAR
*/
#mainNav
{text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 3px 0 5px 0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background-color: #CCC4BE;}
#mainNav ul
{margin: 0;
padding: 0;
list-style-type: none;}
#mainNav ul li
{display: inline;
line-height: 1.5;}
#mainNav ul li a:link, #mainNav a:active, #mainNav a:visited
{color: #000;
font: bold 0.7em tahoma, sans-serif;
text-decoration: none;
border-right: 1px solid #999;
padding: 10px 10px 9px 10px;}
#mainNav ul li a:hover
{color: #fff;
text-decoration: none;
background-color: #FF5100;}
#mainNav #pipe
{border-left: 1px solid #999;}
Any advice would be greatly appreciated!
Kind regards,
Mario
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Main Menu Collapses and Expands in IE FF
Good morning all,
I just launched my site's redesign (www.webnetdesignstudios.com), and although
I'm pleased with the
initial results I'm still addressing a few bugs. The one that bothers me the
most is the fact that
the main menu (i.e. our company, services, portfolio, etc.) collapses and
expands in IE and FF
when a link is clicked. It seems to work fine in Opera.
The following is a CSS code snippet that controls the main menu, which I
grabbed from Listamatic:
/* MAIN NAVIGATION BAR
*/
#mainNav
{text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 3px 0 5px 0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background-color: #CCC4BE;}
#mainNav ul
{margin: 0;
padding: 0;
list-style-type: none;}
#mainNav ul li
{display: inline;
line-height: 1.5;}
#mainNav ul li a:link, #mainNav a:active, #mainNav a:visited
{color: #000;
font: bold 0.7em tahoma, sans-serif;
text-decoration: none;
border-right: 1px solid #999;
padding: 10px 10px 9px 10px;}
#mainNav ul li a:hover
{color: #fff;
text-decoration: none;
background-color: #FF5100;}
#mainNav #pipe
{border-left: 1px solid #999;}
Any advice would be greatly appreciated!
Kind regards,
Mario
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: Final Answer:...RE: [WSG] using the * within a selector
Hi Ted,
I've wanted to use attribute selectors in my CSS rules, but have been concerned
about browser
support?
Please advise...
Kind regards,
Mario
Hi All
The answer lies not in the * but in using a different selector. Sebastien
Guillon sent me a
private answer:
This:
/*english */
a[hreflang=en]:after, a[hreflang=en-us]:after,
a[hreflang=en-ca]:after, a[hreflang=en-gb]:after,
a[hreflang=en-th]:after, a[hreflang=en-ie]:after,
a[hreflang=en-ph]:after, a[hreflang=en-au]:after,
a[hreflang=en-nz]:after, a[hreflang=en-in]:after {content:\A0(In
English); font-size:90%;
color:#666;}
Can be shortened to:
/*english */
a[hreflang|=en]:after {content:\A0(In English);
font-size:90%;color:#666;}
See http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
You can also put all the font color and size in one rule like this:
a[hreflang]:after
{font-size:90%; color:#666;}
So now you're left with
/*english */
a[hreflang|=en]:after {content:\A0(In English);}
--
I'm in the process of adapting an international link idea from Sebastien's
blog. I'll post it
soon and let everyone know.
Ted
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rob
Mientjes
Sent: Wednesday, October 05, 2005 1:58 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] using the * within a selector
On 10/5/05, Drake, Ted C. [EMAIL PROTECTED] wrote:
a[hreflang=sp]:after, a[hreflang=sp-*]:after {content:\A0(In
Spanish);
font-size:90%; color:#666;}
Is there a way to use the wildcard inside a selector like this?
a[hreflang*=sp]::after { ... }
See: http://www.w3.org/TR/2001/CR-css3-selectors-2003/#selectors
N.ȨX+i nZÖ«v+hym쵩jl.f.×¥wq(b(,)à¶#8249;azX
)i
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Homepage Review: webnetdesignstudios.com
Thank you Lea. I removed the strong tag, and added the cite tag with a rule applied to the cite element that bolds the authors name. Seems to be the best of both worlds. Kind regards, Mario On Sun, 2 Oct 2005 22:58:19 -0400, Christian Montoya wrote: Isn't b still valid? If you want to have a weightless way of bolding the text, but don't want to mess with a span, use b . Yes, its 'valid', for low values of valid, but wrapping a cite element around the name screams 'this is who said it'; a b element tells you nothing. I just wish there were a way to link a cite and a q, the way we link labels and inputs. warmly, Lea -- Lea de Groot Elysian Systems - http://elysiansystems.com/ Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Homepage Review: webnetdesignstudios.com
Michael,
I understand that the Internet is an electronic medium, and I#8217;m quite
aware of all the
browser nuances and additional devices employed to render websites. However,
what I said was that
the Internet is also a visual medium, which is an important aspect of site
design that must be
considered. Correct use of color, imagery, typography, links, etc are key
factors in creating a
quality site therefore to label the Internet as simply being an electronic
medium is overlooking
one of its most fundamental uses.
Furthermore, if there is a method that isn#8217;t widely supported then it
does become a personal
preference whether, or not I choose to use it in every instance. My courseware
states that
display: inline in IE5 is unsupported, however if that#8217;s untrue then
that#8217;s a relief,
but has nothing to do with me unlearning everything I thought was acceptable.
I agree with much of your input, and all the other members who were so gracious
enough to take
time to review the page, and provide their expert opinions. However, I'd be
remiss if I didn't
take exception to your closing remarks, which I interpreted as quite
condescending.
I#8217;ve been a designer for 8 years and a list member for 21 months. I
conduct courses is XHTML
and CSS at the local college, and take standards very seriously. I joined this
group for their
expert advice, and have always welcomed different opinions and points of view
in an effort to
enhance my knowledge and expertise. Normally, I#8217;d address this issue
off-line, but I think
it#8217;s important to express my opinion on this matter openly because there
are many beginners
to standards and the WSG who are reluctant to post questions for fear of being
chastised, or
criticized.
From my perspective I#8217;m only interested in learning about best practices
as it relates to
web standards. I think we should just stick to answering the questions, and
refrain from using a
patronizing tone, or making presumptuous inferences. Allow each member to
discern for themselves
the correct method to implement instead of being made to feel sub-standard.
I say this with all respect, and hope my input is received in the spirit it is
intended.
Respectfully yours,
Mario S. Cisneros
Hi,
I haven't followed this thread completely, but I wanted to comment on this
specific post
because some of your comments caught my eye and another view may come in
handy.
However, I think using strong to emphasize the author of the
testimonial is perfectly acceptable.
Because it's not going to bring about the total destruction of mankind, you
are more right than
not in the world of living and breathing, but in the world of standards,
it's not acceptable
and it's wrong. You might as well use a hn to ad visual emphasis. You are
attempting to
visually draw the readers eye to the name (e.g. bold), not necessarily add a
strong emphasis.
If it is visual, it presentation. If it's presentation, it's not structure.
To create a rule and use span tag is overkill.
I totally agree and, generally, I try not to use spans. Instead I mark up my
document in such a
way, limited as they are, the tags are as semantic as possible, while at the
same time, provide
me with hooks into my content without redundancy.
Someone (Josh I suppose) suggested that you use a span for the
testimonial, and while that is allot better (semantically speaking) than
what you are doing
now, it wouldn't have been my first choice. I would use a definition list
for this:
dl id=testimonial
dtJoe Coyle, President, www.coylemedical.com/dt
ddMr. Cisneros and his team have an extraordinary talent for customer
communication, market
vision, and web page design./dd
dl
And, if you absolutely have to have the commenter's name appear
*visually* beneath their comments, you could use the following (or similar)
CSS:
#testimonial * {
margin: 0;
padding: 0;
}
#testimonial {
width: 400px;
}
#testimonial dt {
margin-top: 80px;
}
#testimonial dd {
float: left;
margin-top: -80px;
}
Of course, you would have to tweak this (margins) per instance and it's not
thoroughly tested,
but should work OK in most browsers.
Additionally, the image is to provide a soft visual touch
There is also nothing stopping you from displaying the little person image
as a background on
your dt, but you certainly shouldn't be using an inline image as it is
purely presentational
and adds nothing to the content. If it were a photograph of the speaker, I
would use the image
within an additional dd.
Similarly the images in your header could be a replaced h1. There are
various methods
available to you; most have drawbacks, all are better than in a
non-semantic, inline image.
In terms of how you display an image on the page the rule is simple: If the
is content (as in
the speaker photograph in the above example
Re: [WSG] Homepage Review: webnetdesignstudios.com
Hi Josh,
I appreciate your input, and I concur with some of your points, and will apply
the changes
accordingly. However, I think using strong to emphasize the author of the
testimonial is
perfectly acceptable. To create a rule and use span tag is overkill.
Additionally, the image is
to provide a soft visual touch, I realize the importance of clean, well-written
code and content,
but the Internet is also a visual medium.
I don't agree that every horizontal navbar should be in a list especially since
display:inline
isn't supported in IE5, but that's a personal preference.
Again, I thank you for your advice, and as always I continue to learn more
about standards design
by being a part of this list!
Respectfully yours,
Mario
Okay, most of the points I made still apply. 1) is out, because you've
ditched the JS menu. 2,
3, 4, 5 (less now) and 7 still apply. You've got images where you could be
using background
images in a H4 for the
special offers section, and I'd lean towards doing part of your
testimonial bit differently. Perhaps:
p class=testimonialnamespanJoe Coyle,/span President/p and add the
rule
.testimonialname span {font-weight:bold}
to your CSS, instead of
pimg src=Images/Icons/comment.gif width=16 height=16
alt=Client Testimonial /strongJoe Coyle,/strong President/p
...because the name isn't really emphasised (which is what the strong tag
means), only styled
differently, and the image has no semantic weight (you've already said
Client testimonial in
the H2 immediately above).
Text resizing isn't so bad, if you're prepared to accept your nav bar
breaking so quickly (it
only scales one step up in Firefox here).
Only other suggestion I've got is to perhaps stick the Plans starting at
$24.95/month server
graphic as part of a link background, instead of just as an image... and, if
you _do_ want to
retain the image, change the alt text to something more meaningful than web
servers -- Plans
starting at $24.95/month would do nicely.
Regards,
Josh
On Sun, 2005-10-02 at 00:21 -0500, [EMAIL PROTECTED] wrote:
Josh,
My sincere apologies!!
I failed to provide the URL to the development environment for the redesign:
http://www.webnetdesignstudios.com/index1.htm
This is my current site, and one of the reasons I've decided to implement a
re-design.
Sorry for the miscommunication.
Kind regards,
Mario
A few suggestions, in order of markup.
1) The JS menus are okay, if everything listed in them is accessible some
other way.
2) Your non-JavaScript link list (topnavbar) should be a list. And the
bullet images would
be better as background images or
list-style-image's.
3) Instead of having an image for your header, consider having a H1 that
says WebNet Design
Studios: A Progressive Web Design and Development Group and use an
image-replacement
technique. As the page title, this should carry greater semantic weight than
it does at
present, which is why I'd lean towards a H1 rather than a semantically
neutral div with an
img inside.
4) If you change that to be a H1, then (this one is open to conjecture) I
think all the
other H1s on your page should become H2, etc.
5) Currently, your H1s have images inside them. Setting padding-left and a
background-image
would be a better alternative here. Use id or class to differentiate the
images between
headers, if this is what you need (at the minute, it looks like that's what
your design aims
for).
6) You have a table that's semantically inappropriate under the Consumer
Shop heading
(summary=Consumer Shop id=table) -- these links should, again, be an
unordered list. To
make them use the space more
effectively, you can float them to make their appearance emulate a table.
With fluid
layouts, this has the added benefit of making
columns appear to appear and disappear as the layout scales -- though
this isn't a concern
here. You can also set a background image for list items instead of
including the img tag
at the start of each.
7) Finally, your footer should also be a list. I would use an image
replacement technique
here again, possibly putting your copyright
statement in a separate list to enable correct positioning (if you need
to... it's possible
not to, but might be easier that way).
AND -- this one is important -- text resizing (up) breaks immediately
because you've set the
heights of #integration, #consumer, #special, #starter, #site and #quote in
pixels.
Unsetting all of these doesn't particularly break anything, though when
resizing the length
of the columns relative to one another does fluctuate somewhat (I'm only
testing in Firefox, here). You can fix this by putting your #clear div
INSIDE the #wrapper
div, so that #wrapper extends as far as it has to, continuing the white
background all the
way down (I think... I've never been completely on top of that whole
clearing thing
[WSG] Homepage Review: webnetdesignstudios.com
Dear Mates, I'm in the process of re-designing my company site, and I've started with the homepage. Please know that it's in development environment, and I plan to re-do all the interior pages once I'm confident that my CSS, XHTML and design are standards compliant. Obviously, I thought it prudent to ask for an objective opinion from the WSG members before proceeding any further. The page is a CSS-based layout using XHTML Strict 1.0, and I#8217;m thrilled to report that both validate. In addition, I invested considerable effort ensuring that the markup is valid, well-formed, and semantically correct. The site renders correctly in Internet Explorer 6.0, Firefox 1.0, Netscape 7.0, Mozilla 1.6, and Opera 7.4. In addition, the site renders correctly in an 800x600, and higher screen resolutions. I'm primarily interested in the lists feedback on the code however, any constructive remarks, ideas, or suggestions on the design are always welcome! Please know that the links point to the current site, and are included as visuals cues only. Please advise at your earliest convenience... Respectfully submitted, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Homepage Review: webnetdesignstudios.com
Josh, My sincere apologies!! I failed to provide the URL to the development environment for the redesign: http://www.webnetdesignstudios.com/index1.htm This is my current site, and one of the reasons I've decided to implement a re-design. Sorry for the miscommunication. Kind regards, Mario A few suggestions, in order of markup. 1) The JS menus are okay, if everything listed in them is accessible some other way. 2) Your non-JavaScript link list (topnavbar) should be a list. And the bullet images would be better as background images or list-style-image's. 3) Instead of having an image for your header, consider having a H1 that says WebNet Design Studios: A Progressive Web Design and Development Group and use an image-replacement technique. As the page title, this should carry greater semantic weight than it does at present, which is why I'd lean towards a H1 rather than a semantically neutral div with an img inside. 4) If you change that to be a H1, then (this one is open to conjecture) I think all the other H1s on your page should become H2, etc. 5) Currently, your H1s have images inside them. Setting padding-left and a background-image would be a better alternative here. Use id or class to differentiate the images between headers, if this is what you need (at the minute, it looks like that's what your design aims for). 6) You have a table that's semantically inappropriate under the Consumer Shop heading (summary=Consumer Shop id=table) -- these links should, again, be an unordered list. To make them use the space more effectively, you can float them to make their appearance emulate a table. With fluid layouts, this has the added benefit of making columns appear to appear and disappear as the layout scales -- though this isn't a concern here. You can also set a background image for list items instead of including the img tag at the start of each. 7) Finally, your footer should also be a list. I would use an image replacement technique here again, possibly putting your copyright statement in a separate list to enable correct positioning (if you need to... it's possible not to, but might be easier that way). AND -- this one is important -- text resizing (up) breaks immediately because you've set the heights of #integration, #consumer, #special, #starter, #site and #quote in pixels. Unsetting all of these doesn't particularly break anything, though when resizing the length of the columns relative to one another does fluctuate somewhat (I'm only testing in Firefox, here). You can fix this by putting your #clear div INSIDE the #wrapper div, so that #wrapper extends as far as it has to, continuing the white background all the way down (I think... I've never been completely on top of that whole clearing thing, so I'm not 100% sure that'll work... the theory runs something like that, though. Play around.) HTH, Josh Kind Regards, Joshua Street base10solutions Website: http://www.base10solutions.com.au/ Phone: (02) 9898-0060 Fax: (02) 8572-6021 Mobile: 0425 808 469 Multimedia Development Agency E-mails and any attachments sent from base10solutions are to be regarded as confidential. Please do not distribute or publish any of the contents of this e-mail without the senderâ#8364;#8482;s consent. If you have received this e-mail in error, please notify the sender by replying to the e-mail, and then delete the message without making copies or using it in any way. Although base10solutions takes precautions to ensure that e-mail sent from our accounts are free of viruses, we encourage recipients to undertake their own virus scan on each e-mail before opening, as base10solutions accepts no responsibility for loss or damage caused by the contents of this e-mail. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] HomePage Review: Corrected URL
Dear Mates, My sincere apologies!! I failed to provide the URL to the development environment for the redesign: http://www.webnetdesignstudios.com/index1.htm Sorry for the miscommunication. Kind regards, Mario ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Screen Resolution for Fluid Layouts
G-day Mates, I'm building my first site using a fluid layout, and I want the site to render properly in 800X600, but I've noticed some extremely well-crafted standards-based sites designed using liquid layouts that generate a horizontal scroll bar in 800X600. A few examples: http://abc.net.au/ http://www.watchfire.com/ http://www.stylegala.com/ This is rather confusing because SitePoint renders correctly in 800X600, and their certainly a model site, and watchfire is all about accessibility, but it fails in 800X600. Therefore I'm very curious as to what the general concensus is from my fellow standards advocates when designing sites using liguid layouts? Please advise... Respectfully yours, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Screen Resolution for Fluid Layouts
Hi Kenny, You're right, I made an assumption that because they stretched across the entire viewport in 1024X768 then the authors used fluid layouts, which was a mistake on my part, and next time I'll be sure to check their CSS, but it still makes my ask why they ignored 800X600. Anyway, thanks for the feedback. Kind regards, Mario Therefore I'm very curious as to what the general concensus is from my fellow standards advocates when designing sites using liguid layouts? Truely liquid layouts will look fine at any resolution. Your examples are not liquid layouts. Your first and last examples use fixed widths, and the middle one uses *cringe* tables for layout. If you must use fixed widths, you just have to decide what resolution you want your site to look best in, and wish luck to the rest. If you have a liquid layout, the question of best resolution doesn't apply. But I'm sure there will be plenty of replies to come that give you an easier answer, such as 800x600 is best. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] issues with trying to overlay background-images
Bruce,
If I'm not mistaken, and I'm sure someone will correct me if I'm wrong, z index
only works with
absolute positioning, and not with background images.
Kind regards,
Mario
Hello group.
On a page I am working on, I am trying to get a background image for a search
bar to overlap and
appear in front of another background image. I am not sure if this is even
possible, but I am
trying to do it using z-index to no avail.
the page url is:http://www.semlogic.com/new_version/template.htm
and the relevent CSS is
#header {
margin:0;
padding:0;
width:780px;
height:142px;
background: url(../images/bkg_header.gif);
z-index:100;
}
#grey_bar{/*grey bar used below logo header*/
background:#c1c1c1 url(../images/search_bkg.gif) top right no-repeat;
width:100%;
height:auto;
z-index:1;
}
the grey bar has a background positioned right which is the background for
the search bar and I
want that to extend beyond (above) the
boundaries of the grey_bar div and appear in front of the image in the header
div.
hope this makes a little bit of sense.
the full css is at :
http://www.semlogic.com/new_version/css/style.css
any suggestions for accomplishing this is greatly appreciated!
thanks,
--
::Bruce::
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] iframes
Chris,
I can't speak to iframes because I use the CSS overflow style, which provides
the same basic
functionality, but requires using absolute positioning, and the height should
be insufficient to
contain the text, which will automatically generate a scroll bar:
#news
{position: absolute;
top: 65%;
left: 65%;
height: 185px;
width: 155px;
overflow: auto;
text-align: left;
border: 2px inset #fff;
padding: 0 5px;
background-color: #dd;}
Respectfully submitted,
Mario S. Cisneros
Hi,
What is the consensus of iframes? I've heard they've been deprecated, could
some point me to
articles on their impact on accessibility?
C
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Font Size Re-sizing
G'day Mates,
I've reviewed articles on A List Apart and the WSG sites, as well as, The CSS
Anthology, but I
really would like a more defintive answer pertaining to the best method for
re-sizing text.
Therefore, I thought it prudent to turn to the experts!
The following is my current set of rules for allowing visitors to zoom text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is greatly
appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Font Size Re-sizing
Hi Janelle,
The slash in my example separates font-size from line-height.
Regards,
Mario
We are in the middle of redesigning our company's website and after using pt
for so long ems
have been challenging to get used to. I have declared body {font-size:
1em;} and have adjusted
from there (i.e. sidenav {font-size: 0.80em;}.Can you explain what the
slash in your example
is (body {font: x-small/130% Veranda, Arial, san-serif;}).Is this a
browser hack?
Thanks,
Janelle
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Darren
Wood
Sent: Tuesday, August 16, 2005 1:55 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Font Size Re-sizing
I know there are a lot of old school designers out there (and when I say
designer I mean those
people who spend their hours in photoshop and NOT doing the markup) who still
insist that
font-sizes be in point size. That is simply not practical in the web-space
(as, I'm sure you
know)...generally I ignore them and their silly point sizes. I find the best
method for font
resizing is using the keyword syntax, i.e.
xx-small, x-small, small, large, etc
Generally I'd set the base font to x-small/small (depending on what the
design shows) and then
use em's to inc them for headers and strong tags, etc.
body {
font: x-small/130% Verdana, Arial, sans-serif;
color: #333;
}
h1 {
font-size: 2em;
}
h2 {
fon-size: 1.8em;
}
...
...
HTH
D
On 8/17/05, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
G'day Mates,
I've reviewed articles on A List Apart and the WSG sites, as well as, The
CSS Anthology, but
I really would like a more defintive answer
pertaining to the best method for re-sizing text.
Therefore, I thought it prudent to turn to the experts!
The following is my current set of rules for allowing visitors to zoom
text:
body
{margin: 0;
padding: 0;
font-size: 76%;
background: #6A6A8F;}
#container
{width: 100%;
font: normal 1em/14pt verdana, arial, sans-serif;
text-align: justify;
background: #fff;}
Any advice regarding this important design and accessible feature is
greatly appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] attribute selectors question
Hi Ted, It looks good to me, but you'd have to designate each pdf accordingly: a[href=test.pdf] However, there is another attribute selector, but its a CSS3, which would work well based on your example: a[href$=pdf] Kind regards, Mario Hi All I have a quick question. I don't seem to be running on all cylinders and I can't remember how to write the css that would look for a link that has .pdf in the href. A [href???.pdf]... Or am I mixing up my CSS and javascript? I need some coffee. Ted ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] accessibility - opening new windows philosophy
I completely concur with Gary as I have these types of files open in a new window for the very reasons he stated. Additionally, I've had users report that they close the window thinking that they're exiting the document, but they're actually closing the browser. Respectfully, Mario There is a flip-side to the no new window recommendation.. Many of our users are very computer illiterate and giving them too many options confuses them. We do open our PDF documents in a new window and never have any complaints about it. We DO get complaints, though, when things are too hard to use or if the page they were on disappars because we opened a document in that same window or if the file downloaded and they can't find it (happened regularly before we launched the PDF in another window). We also get complaints from Mac users for similar reasons (because, apparently, the default behaviours that have sometimes been set up always just download files to one place and dont give the user an option of saying where they want the file - and then they can't find it). I'm all for web-standards - but when a user base clearly has problems in dealing with a move to a standard then I would prefer to cater for my user base over the standard. There are always exceptions to every rule. Regards, Gary On 8/16/05, Damian Sweeney [EMAIL PROTECTED] wrote: Hi Ted, I would say let the user decide. Wherever possible I try to provide enough information in the link itself so that the user knows what to expect and can proceed as they wish. Many people will set up their browser to deal with different file types according to their preference (open the document in the browser, open it in the application, download the file). Opening in a new window removes user choice. By providing a plain link you give users the option that you use of `right-click - open in new window`. How do I choose to open a new-window-link in the current window if that is my preference? The only time I open links (to web pages) in a new window is when I have to place a link inside someone else's frame and I warn the user that I'm doing it. I wouldn't use a new window for the downloadable documents you are referring to. Unexpected pdfs are annoying, especially for low-bandwidth users. So, I would recommend something like: a href=document.pdfSome stuff (pdf format, 200kb)/a Include all the info in the link, if you can, for people who only read the links. Cheers, Damian Hi All We've had a discussion at work about pdf documents and hijacking the user's browser / making it more user-friendly. What is the general feeling towards having pdf and other non-html documents open in a new window? -- Damian Sweeney Learning Skills Adviser (online) Language and Learning Skills Unit Instructional Designer, AIRport Project Equity, Language and Learning Programs University of Melbourne 723 Swanston St Parkville 3010 www.services.unimelb.edu.au/ellp/http://www.services.unimelb.edu.au/ellp/ www.services.unimelb.edu.au/llsu/http://www.services.unimelb.edu.au/llsu/ airport.unimelb.edu.au/ http://airport.unimelb.edu.au/ ph 03 8344 9370, fax 03 9349 1039 This email and any attachments may contain personal information or information that is otherwise confidential or the subject of copyright. Any unauthorised use, disclosure or copying of any part of it is prohibited. The University does not warrant that this email or any attachments are free from viruses or defects. Please check any attachments for viruses and defects before opening them. If this email is received in error please delete it and notify us by return email or by phoning (03) 8344 9370. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Getting an image to slide behind another, not drop below
Hi Richard, You might want to consider using stacking to achieve your desired effect, which requires using absolute positioning: !--The higher an item's z-index, the nearer it appears to the viewer.-- div style=position: absolute; top: 100px; left: 264px; z-index: 1; img src=abc.jpg //div div style=position: absolute; z-index: 2; img src=xyz.gif //div Regards, Mario I'm working on a site that is still only local at the moment so unfortunately I don't have a link that I can provide. I've got a header that has an linked image on the left and a floating image on the right, and there's background image to provide continuity between the two. This works well while the screen width is greater than 770, which I seem to be able to do quite easily with min-width in non IE browsers, however if I could somehow get the right hand image slide to behind the left hand image instead of drop beneath it then I can support widths of less than 770 without the header breaking. Is there a way of doing this? TIA Richard ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Logic?
Please forgive me if I've missed something, but I must respectfully disagree. I've created a number of fixed-width layouts centered within the viewport at 760px, and floated one-column left and the other column right inside a container div without issue. Again, if I've misunderstood the issue and answer my apologies. Kind regards, Mario The border cuts off at bottom of menu, not bottom of content. That don't make sense. Makes a lot of sense. Floated elements don't take up any space in the container (i.e. the container will not contain them). There are several ways to get it working, but this is probably one of the best: http://www.positioniseverything.net/easyclearing.html Prabhath http://nidahas.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Logic?
Prabhath, I understand, and I knew there had to be more to it. Respectfully, Mario Please forgive me if I've missed something, but I must respectfully disagree. I've created a number of fixed-width layouts centered within the viewport at 760px, and floated one-column left and the other column right inside a container div without issue. Yes, I've done it without problems too. But the situation discussed here is different because the container has a border, which should be as tall as the tallest of the content elements inside it. If this tallest element happens to be floated, and that float is *not* cleared *inside* the container, the container will not stretch down to wrap it. If it were not for that border, we could've gone ahead and used a non-wrapping container, and used clear: both for any footer content. cheers, Prabhath http://nidahas.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] list-style-image in horizonal menu
Thank you both very much! I did set the list-style-image as a background and it worked like a charm. The only difference was instead of setting the positioning using left center, I used 0 40%, which placed the image pefectly inline with the text. I'll take a look at the artile cited below, and again many thanks! Warm regards, Mario In fact, you could put the background image in the anchor to achieve a rollover affect by adjusting the background position, or changing the the image. Here's a good article on single background images and positioning: http://superfluousbanter.org/archives/2004/05/navigation_matr.php kind regards Terrence Wood. On 7 Aug 2005, at 11:23 AM, [EMAIL PROTECTED] wrote: Goodevening All, I have a slight problem. I can't seem to get the list-style-image to work, which is part of a unordered list set to display inline in a horizonal menu bar. On 7 Aug 2005, at 1:16 PM, russ - maxdesign wrote: I agree with Patrick - I'd use background-image instead of list-style-image as you have far more control over the placement of the image using the background-position property. Russ Alternatively, you could try and add left-hand padding and place the star as a non-repeating background image ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] list-style-image in horizonal menu
Goodevening All,
I have a slight problem. I can't seem to get the list-style-image to work,
which is part of a
unordered list set to display inline in a horizonal menu bar. I've reviewed my
books, The CSS
Anthology and Web Standards Solutions, but I must be missing something
therefore any advice or
suggestions would be greatly appreciated.
CSS:
#topnav
{font: bold 12px trebuchet ms, serif;
text-align: center;
text-transform: uppercase;
border-top: 1px solid #fff;
border-bottom: 1px solid #000;
background-color: #00563E;}
#topnav ul
{margin: 0;
padding: 0;}
#topnav ul li
{display: inline;
list-style-image: url(../images/star.gif);
line-height: 30px;}
#topnav a:link, #topnav a:active , #topnav a:visited
{color: #fff;
padding: 5px 20px 5px 15px;
text-decoration: none;
border-right: 1px solid #B8C5BD;}
#topnav a:hover
{color: #B8C5BD;
text-decoration: underline;}
Respectfully yours,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] My life as an 800x600 leper (was: Site Check: Broadleaf)
Good afternoon Sunny, I operate a design shop in Dallas, Texas and I always make sure my sites render properly in 800X600 because there is still a high percentage of users setting their screen resolutions to 800X600. I'm not willing to sacrifice or ignore that large audience, which could have a negative impact on my credibility as a designer. In addition, there's no valid reason why a site can't be visually engaging and render properly in a higher resolution. Kind regards, Mario S. Cisneros accessibility means access for everyone regardless of technology availability or other kinds of disabilities. I think web standards were meant to raise awareness first and give an impulse to all of us to build a better web. A web for everyone, everywhere ! *applause* i have to chime in here on this quoted text, but for another reason... i build web sites. i'm over 40. i have 20/20 vision. i work (and play) at 800x600. i LIKE it. many ppl on this list ask the members for opinions on their work. i sometimes nervously reply privately, with a screenshot, to show how it looks on a lower res. i don't often get a response. but i do hear ppl say in their posts how they sacrifice the low res visitor. recently there was a thread about websites dealing with statistics (browsers, resolutions, platforms etc). i went to one of the sites (not belonging to a member here, i think, but a pretty well-known stats site). i couldn't see a third of it without horizontally scrolling. i was amazed and more than a little annoyed. i emailed them. their reply stated that they made the decision years ago not to support 800x600. when i replied and expressed my surprise at years ago i offered a few suggestions about web standards and accessibility, and about this being the world wide web (as opposed to the office wide). i have to confess, i may have sounded a little rude (i was pretty irritated by now) so i probably deserved what i got back: Thanks for the initial comments, but I'm not going to be drawn into an argument on something so banal.. umm... accessibility is banal? another site i contacted recently (i feel like i'm becoming a one-woman low-res evangelist) responded with Yeah... It's a harsh decision I made. Everything's too skinny otherwise.. so, seriously folks, am i wrong to hope that a site will look right in my browsing environment? should i get with the current trend and go 1024+ ? i honestly want to know if i should just shut up about the fact that i have to horizontally scroll on MANY sites. a large majority of them are designed by folk who i would normally assume to be in the know about this sort of thing, and THEY don't seem to care what it looks like for me. sunny ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Class Discusion: Centering a Fixed Width Layout
Good morning Mike,
I must respectfully disagree. I'm looking at my client site in FF, Opera,
Mozilla and Netscape as I compose this reply, and the page is left-aligned
using margin:0 auto in the body rule only.
However, it center-aligns the page when placing the margin:0 auto in a
container div.
body
{text-align: center;
background: #ccc;}
#container
{margin: 0 auto;
width: 760px;
font: normal 12px verdana, arial, sans-serif;
background: #fff;}
Respectfully yours,
Mario
Hi Mario,
That only occurs with IE v5.
IE v5.5, v6, Firefox, Netscape and Opera will all centre the design. The
only amend required to get IE v5 to behave is to add text-align:center
to the body element. Then compensate for that alignment in the elements
below:
* {margin:0; padding:0}
html {height:100%; font-size:100.01%}
body {
text-align:center;
min-height:101%;
font:76.1%/130% Verdana, Helvetica, sans-serif;
color:#000; background:#fff;
width:760px;
margin:0 auto
}
body * {text-align:left}
#wrapper {width:760px}
(Amended from:
http://www.websemantics.co.uk/tutorials/useful_css_snippets/#leveller)
IE v5 requires all the centred content to be in a wrapper div (other
browsers don't).
div id=wrapperall centred content in here/div
mike 2k:)2
marqueeblink
e-mail: [EMAIL PROTECTED]
site: http://www.webSemantics.co.uk
/marquee/blink
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Sent: 20 June 2005 19:32
To: wsg@webstandardsgroup.org
Cc: Mike Foskett
Subject: RE: [WSG] Class Discusion: Centering a Fixed Width Layout
Hi Mike,
Great set of CSS code snippets and explanations! However, there is one
declaration that suggests using margin: 0 auto in the body rule, which
supposedly center-aligns the webpage in the browser. However, testing
reveals that it left-aligns the page, but placing this declaration in a
container or wrapper works.
Please advise...
Respectfully yours,
Mario
You might find this useful to look at:
http://www.websemantics.co.uk/tutorials/useful_css_snippets/#leveller
Gives light detail on why certain settings are used.
The latest version:
http://www.websemantics.co.uk/tutorials/useful_css_snippets/#levelleru
pdate It requires text-align:center adding for IE v5 though.
Hope it helps
mike 2k:)2
marqueeblink
e-mail: [EMAIL PROTECTED]
site: http://www.webSemantics.co.uk /marquee/blink
**
This email and any files transmitted with it are confidential and
intended solely for the use of the individual or entity to whom they
are addressed. If you have received this email in error please notify
the system manager.
This footnote also confirms that this email message has been swept by
MIMEsweeper for the presence of computer viruses.
www.clearswift.com
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Class Discusion: Centering a Fixed Width Layout
Hi Mike, Great set of CSS code snippets and explanations! However, there is one declaration that suggests using margin: 0 auto in the body rule, which supposedly center-aligns the webpage in the browser. However, testing reveals that it left-aligns the page, but placing this declaration in a container or wrapper works. Please advise... Respectfully yours, Mario You might find this useful to look at: http://www.websemantics.co.uk/tutorials/useful_css_snippets/#leveller Gives light detail on why certain settings are used. The latest version: http://www.websemantics.co.uk/tutorials/useful_css_snippets/#levellerupdate It requires text-align:center adding for IE v5 though. Hope it helps mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.clearswift.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Class Discusion: Centering a Fixed Width Layout
First, Firefox still allows the user to increase the font size if pixels are used. Second, font size is a much debated topic, and I think it's rather presumptious to infer that those of us who use pixels wallow in mediocrity. [EMAIL PROTECTED] wrote: I do teach the students about em, keywords and pixels, etc. based font size and allow them to make up their own minds. I understand the issue pertaining to accessibility and zooming text, but my personal preference is using pixels. Fair enough, it's your choice. But why make it more difficult for the user? Say to a user that you don't care if they read the text is a good way to loose return visitors. Admittedly, not many, as most people are used to putting up with the garbage that's out there; but why not rise above field, rather that wallowing the mediocrity? In general, if someone wants to resize the font, it's for a good reason. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Class Discusion: Centering a Fixed Width Layout
Good day all,
I'm conducting a course in CSS at the local community college, and the
students are sincerely interested in web standards and designing with
CSS instead of tables.
One question that continues to come up is how to successfully
center-align a fixed width layout in today's modern browsers. Here's my
feedback, which I'd like anyone to review and challenge where
applicable:
The basic CSS syntax is as follows:
html
{height: 100%;
margin-bottom: 1px;}
body
{margin: 0;
padding: 0;
text-align: center;
font: normal 12px verdana, arial, sans-serif;
background: #fff;}
#container
{margin: 0 auto;
width: 760px;}
I discuss the construction of two and three column layouts, floating
columns, clearing floats, headers, footers etc. but the crux of my input
is centering the webpage.
1. Margins set to 0 in order to eliminate default margins in IE,
Firefox, Mozilla and Netscape.
2. Padding set to 0 in order to eliminate default padding in Opera.
3. Text-align: center set to center the page in Internet Explorer 5.0
5.5
4. Margins must be set to 0 auto in order to center-align a
fixed-width layout in IE6, Firefox, Mozilla, Netscape and Opera.
5. Placing margin: 0 auto in the declaration block for the body rule
doesn't center-align the layout therefore this particluar declaration
must be placed inside an ID and applied to a wrapper or container div.
Any opinions, suggestions or direction is very much appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Class Discusion: Centering a Fixed Width Layout
Thanks Ben, I've prefer to place the text-align: left and/or justify in
the div's designated for each column.
#leftcolumn
{width: 350px;
float: left;
text-align: justify;
margin-left: 8px;
background: #fff;}
#rightcolumn
{width: 210px;
float: right;
text-align: left;
font-size: 10px;
background: #fff;
margin-right: 3px;
border: 1px solid #66;
padding: 2px 5px;}
Kind regards,
Mario
You'd need a text-align: left; in the #container otherwise the all the
content within it will be centered.
On 6/17/05, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
Good day all,
I'm conducting a course in CSS at the local community college, and the
students are sincerely interested in web standards and designing with
CSS instead of tables.
One question that continues to come up is how to successfully
center-align a fixed width layout in today's modern browsers. Here's
my feedback, which I'd like anyone to review and challenge where
applicable:
The basic CSS syntax is as follows:
html
{height: 100%;
margin-bottom: 1px;}
body
{margin: 0;
padding: 0;
text-align: center;
font: normal 12px verdana, arial, sans-serif;
background: #fff;}
#container
{margin: 0 auto;
width: 760px;}
I discuss the construction of two and three column layouts, floating
columns, clearing floats, headers, footers etc. but the crux of my
input is centering the webpage.
1. Margins set to 0 in order to eliminate default margins in IE,
Firefox, Mozilla and Netscape.
2. Padding set to 0 in order to eliminate default padding in Opera.
3. Text-align: center set to center the page in Internet Explorer 5.0
5.5
4. Margins must be set to 0 auto in order to center-align a
fixed-width layout in IE6, Firefox, Mozilla, Netscape and Opera.
5. Placing margin: 0 auto in the declaration block for the body rule
doesn't center-align the layout therefore this particluar declaration
must be placed inside an ID and applied to a wrapper or container
div.
Any opinions, suggestions or direction is very much appreciated!
Respectfully submitted,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Ben Wong
e: [EMAIL PROTECTED]
w: http://blog.onehero.net
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Class Discusion: Centering a Fixed Width Layout
Hi David,
I do teach the students about em, keywords and pixels, etc. based font
size and allow them to make up their own minds. I understand the issue
pertaining to accessibility and zooming text, but my personal preference
is using pixels.
Thanks,
Mario
On Thu, 16 Jun 2005 18:00:46 -0400, [EMAIL PROTECTED]
wrote:
Good day all,
I'm conducting a course in CSS at the local community college, and the
students are sincerely interested in web standards
Some people who are interested in web standards advocate using relative
font-size methods.
and designing with CSS instead of tables.
[...]
body
{margin: 0;
padding: 0;
text-align: center;
font: normal *12px* verdana, arial, sans-serif;
background: #fff;}
[...]
Regards,
David Laakso
--
http://www.dlaakso.com/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Class Discusion: Centering a Fixed Width Layout
Point of clarification.
I understood that margin: 0 auto worked in IE6, but IE 5.0 and 5.5
required the use of text-align: center in the body rule therefore why do
I need margin: 0 auto in both the body and container?
Please advise...
Thanks,
Mario
[EMAIL PROTECTED] wrote:
The basic CSS syntax is as follows:
html
{height: 100%;
margin-bottom: 1px;}
body
{margin: 0;
padding: 0;
text-align: center;
font: normal 12px verdana, arial, sans-serif;
background: #fff;}
#container
{margin: 0 auto;
width: 760px;}
Regarding margins and padding, simpler is
* {margin : 0; padding : 0;}
Zeroing all default margins and paddings helps achieve better cross
browser rendering, as well as lists which are semantically, but not
presentationally, a list (i.e., navigation lists).
For the font size, under normal circumstances, use only percent or ems.
(Were it properly supported, you could also use exs, but afaik, all
browsers just use 2ex=1em.) When pixels are use, IE users cant change
the font size to allow for easier reading. You may also want to increase
the line-height as it too, makes reading easier.
3. Text-align: center set to center the page in Internet Explorer 5.0
5.5
If you have an extra style sheet for IE (hidden using conditional
comments), you might want to put this hack there. Also, don't forget to
reset the alignment.
4. Margins must be set to 0 auto in order to center-align a
fixed-width layout in IE6, Firefox, Mozilla, Netscape and Opera.
You're right about setting left and right to auto, but there's no need
to set top and bottom to 0 (unless you want to).
5. Placing margin: 0 auto in the declaration block for the body rule
doesn't center-align the layout therefore this particluar declaration
must be placed inside an ID and applied to a wrapper or container
div.
Wrong; the setting goes in the body in order to center the container in
IE6.
HTH
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] style sheet set up
Hi Dave,
Quick question. Is there a reason for naming your selector div#top instead
of #top?
Please advise...
Kind regards,
Mario S. Cisneros
I tend to clear all the browser defaulted styles at the top in one large
grouped rule.
I then set out all the divisions with their ID's, in the order they
appear in the xhtml eg:
div#top {
}
div#middle {
}
div#bottom {
}
Underneath this I would work though all the rules focusing within one
specific division eg:
div#top h1 {
}
div#top p {
}
div#top ul {
}
div#top li {
}
It's a neat order, keeps the cascade flowing and easy to change the
visual layout of the page relatively quickly
--
Dave O'Brien
Venting my spleen at:
http://www.ventingspleen.co.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] style sheet set up
I completely concur Kornel.
Also, I prefer to use one master.css file to control my entire site, and
create additional stylesheets that based on a pages specific requirements
(i.e. print-friendly, forms, etc.).
In addition, I use comments in my master.css file extensively and divide
my master file into homepage rules and rules for interior pages.
Please see attached for review...
Respectfully sibmitted,
Mario S. Cisneros
On Sat, 28 May 2005 17:10:14 +0100, Bruce Gilbert [EMAIL PROTECTED]
wrote:
is there any standard way to set up the flow of a style sheet? I
usually try and use just one style sheet and start with global
elements such as body, p, table, li etc. followed by elements as they
flow on a page from header to footer. I use one stylesheet even though
with a large site, this can become quite large. Looking for
suggestions/thoughts on what others do such as multiple stylesheets
vs. one big one, layout of styles, etc.
Typical mistake is just to split that one huge stylesheet into several
by rules' function, not pages where they're used.
If you make separate stylesheets for: layout, colors, widgets, etc --
you'll have to attach all of them every time, so you won't save a bit
and clients will have even more files to download.
It's wiser to find minimal set of rules that are used on home page (and
maybe 1-2 other most used pages on your site) and make it main
stylesheet.
Then add secondary stylesheet(s) on pages, which need them (styles for
forms, gallery and alike).
Stylesheets compress wonderfully. Enable gzip transfer encoding for them
(but if you do it in PHP or alike, you'll have to send cache headers
and implement cache validators, otherwise clients will re-download
stylesheets).
--
regards, Kornel Lesiñski
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
/*STYLE RULES FOR HOME PAGE...*/
html
{height: 100%;
margin-bottom: 1px;}
body
{margin: 0 auto;
padding: 0;
text-align: center;
background: #DCD8CF;}
#container
{position: relative;
width: 760px;
margin: 0 auto;
font: normal 12px/14pt verdana, arial, sans-serif;
background: #fff;}
.grad-cap
{background-image: url(../images/grad-cap.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 120% 43%;}
/*global tab navigation bar*/
#tabnav
{font: bold 12px trebuchet ms, serif;
text-transform: uppercase;
text-align: center;
color: #7B012A;
background-color: #DCD8CF;
border-top: 1px #000 solid;
border-bottom: 1px #7B012A solid;
padding: 5px;
margin-top: -4px;
margin-bottom: 15px;}
#tabnav a:link, #tabnav a:visited
{color: #000;
text-decoration: underline;
padding: 5px;}
#tabnav a:hover
{color: #7B012A;
text-decoration: none;
padding: 5px;}
h1
{font: bold 14px helvetica, arial, sans-serif;
text-align: left;
text-transform: uppercase;
color: #7B012A;
border-bottom: 1px solid #000;
margin: 0;
padding: 0;}
/*2 column layout*/
#leftcolumn
{width: 150px;
float: left;
font-size: 10px;
background: #fff;
padding: 0px 5px;}
#rightcolumn
{width: 585px;
float: right;
text-align: justify;
padding: 0 5px;}
#clear
{clear: both;
height: 1px;
overflow: hidden;}
.img
{border: 1px solid #000;}
#article
{width: 140px;
border: 1px solid #000;
padding: 5px;
text-align: left;
margin-top: 5px;
background-color: #ddd;}
#article p
{margin: 5px 0 0 0;
padding: 0;}
/*bullet items in services section*/
.programs ul
{float: left;
text-align: left;
width: 260px;
height: 95px;
margin: 20px 0;
padding: 0 15px;
background: #EBE9E2;
border-left: 1px dashed #7B012A;
border-right: 1px dashed #7B012A;}
.programs ul li
{display: block;
list-style-type: square;
list-style-position: inside;}
a.programs:link {color: #000; background-color: transparent; font-weight: normal;}
a.programs:visited {color: #000; background-color: transparent; font-weight: normal;}
a.programs:hover {color: #00f; background-color: transparent; font-weight: normal; text-decoration: none;}
/*homepage footer*/
#footer
{font: normal 10px verdana, arial, helvetica, sans-serif;
text-transform: uppercase;
color: #fff;
margin-top: 15px;
padding: 5px 0px;
background: #7B012A;
width: 100%;}
a.footer:link { color: #fff; background-color: transparent; font-weight: normal;}
a.footer:visited { color: #fff; background-color: transparent; font-weight: normal;}
a.footer:hover { color: #DCD8CF; background-color: transparent; text-decoration: none; font-weight: normal; }
#webnet
{padding-left: 30%;}
/*STYLE RULES FOR INTERIOR PAGES...*/
#content
{margin: 10px;
text-align: justify;}
h2
{font: bold 14px trebuchet ms, serif;
text-align: left;
text-transform: uppercase;
color: #000;
margin: 0;
[WSG] FF Anomaly
Dear Group, Im experiencing a strange anomaly in FF, which seems to occur periodically. Im completing the re-design of a new clients current site, and the XHTML Strict and CSS validate. The problem Im noticing is that when I click on the links in the main navigation bar that generate a vertical scroll bar that the view port quickly pushes the browser to the right, and then back again: http://dev5.headclerk.net/index.htm Ive examined and re-examined my CSS file and markup and all appears to be coded correctly. Ive tested several other web standards sites, and some cause the same problem while others work perfectly. Im not sure if its a browser bug, or a design issue. The site renders correctly in IE, Netscape and Opera. Any advice is always appreciated! Respectfully yours, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Standards-based Hit Counter
Dear Group, I hope this is on-topic. I recently persuaded a client to convert their table-based design to a standards CSS-based design using XHTML Strict. The entire site validates. However, despite my strong oppisition they want to implement a Hit Counter, and I'm concerned that it will produce uncompliant results. Does anyone know of a hit Counter that produces accurate results that won't prevent the homepage from validating? Please reply to me directly. Thanks in advance! Respectfully yours, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
Good evening mates,
First, thanks to all for the excellent advice and direction!
I was successful in creating a table less form, albeit simple, that
renders perfectly in IE6 (hard to believe), and damn good in FF1 and
Opera7.4.
If interested, the page is located at the following URL:
http://www.waltermortgage.com/contactus.stm
Both the XHTML (transitional) and CSS validate with no errors or warnings
found! This particular client who is extremely computer literate
completely embraced the conversion to a standards-based site, and I wanted
it right.
Although Ive been designing for 7+ years and working with standards for
15 months I always consider my cup half-full therefore please do not
hesitate to let me know if I missed something.
Here's the CSS if interested:
#contactform
{width: 645px;
font: 12px verdana, helvetica, arial, sans-serif;
color: #000;
margin: 5% 0 2% 7.5%;}
#contactform fieldset
{border: 1px solid #090;
padding: 0 15px;}
#contactform legend
{font: bold 14px arial, helvetica, sans-serif;
color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 10px;
padding: 4px 8px;}
#contactform p
{clear: left;
margin: 0;
padding: 5px 0 10px 0;
font-weight: bold;}
#contactform p label
{float: left;
width: 30%;
font-weight: bold;}
.input
{background: #E8F2D7;}
.btn
{color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 5px;}
Very appreciatively yours,
Mario
G'day folks
Firstly, apologies to Chris for not noticing that he'd already referred
Mario to Cameron's article
Secondly, Drew's points:
It may make styling easier but incorporating form controls in labels
has a
different meaning than associating a label and a form control. For
one thing, it isn't usable for those choosing a table layout for
forms.
Nor is
it possible to use an incorporated form control with multiple labels.
Both very good points. Obviously incorporating form controls and labels
wouldn't make sense for a typical tabular form layout. On the other
hand, I don't know why you'd want to use tables for layout when you
could style the elements themselves
I guess there could be some cases where you NEED multiple inputs to be
associated with each other as tabular data - perhaps an editable data
grid or the like? In which case, not being able to assign multiple
labels to each input would also be an issue
I don't see standard web forms (ie detail-gathering for shopping,
membership registration, feedback etc) as requiring a table structure.
Those sort of forms inevitably have simpler internal relationships
Back to the multiple labels: Again, there are definitely scenarios (such
as the one above) where they could be put to good use. However, I've
never actually done it. Every time I've come across a potential use for
multiple labels, I've realised that my form simply needs better
specification
Obviously all of the above is completely subjective. Maybe I'm the only
one who has never needed to do either of the things Drew mentioned. As
he said:
Use what you want, but use it correctly.
For my money, incorporating form controls inside labels is my default
construction for form HTML. Occasionally, I've needed to consider other
options, but each time some creative CSS has produced the required
layout and saved me changing the HTML
Oh, and I still use the FOR attribute, regardless of implicit
associations
Cheers,
Lachlan
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Styling Forms
Good evening all, I know there's two schools of thought regarding forms where one uses a table and the other a definition list to style and layout the data fields. I have a simple form on a client's Contact Us page, and I wondered if there's a consensus as to which method is more semantically correct? Please advise... Kind regards, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
Well, it seems that styling the actual form elements is the way to go, and certainly appears to be ideal for simple forms. Thank you Chris, Bert and Darren for the quick response, advice and links! Yours respectfully, Mario G'day I know there's two schools of thought regarding forms where one uses a table and the other a definition list to style and layout the data fields. I have a simple form on a client's Contact Us page, and I wondered if there's a consensus as to which method is more semantically correct? Not sure about consensus, but I use labels with the form elements and style the labels to float left with a fixed width these days. No tables or definition lists needed. Use fieldset to group form elements. There is however some consensus about using tables for layout. There's also a small matter of accessibility... A quick scan of the webstandardsgroup.org resources section shows this link: http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/accessible-forms-1.shtml Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Two-column lists aligned side-by-side
Good evening all, I've tried researching this question online, and reviewing the following books in my library, Web Standards Solutions, and The CSS Anthology: 101 Essential Tips, Tricks and Hacks, but to no avail. Is there an accepted method of laying out two unordered lists, side-by-side (a two-column look), within the same content area? Any suggestions are always appreciated. Respectfully, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Two-column lists aligned side-by-side
Fantastic! Thank you David! I didn't even think of Google, but instead reviewed articles posted on some of my favorite standard's sites. The WSG members have been an enormous help, and I take my Stetson off to ya all! With much gratitude, Mario in Dallas Google search always brings up results on info you might need. Here's what I found: http://www.alistapart.com/articles/layeredfudge/ http://www.communitymx.com/content/article.cfm?cid=27F87print=true [EMAIL PROTECTED] wrote: Good evening all, I've tried researching this question online, and reviewing the following books in my library, Web Standards Solutions, and The CSS Anthology: 101 Essential Tips, Tricks and Hacks, but to no avail. Is there an accepted method of laying out two unordered lists, side-by-side (a two-column look), within the same content area? Any suggestions are always appreciated. Respectfully, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Main Content won't Center Align in IE
G'day Mates,
I've persuaded a client to convert their small web site to standards, and
I'm in the process of removing tables, and using CSS to control the layout
and design.
My problem is the main content area on the homepage is left justified in
IE, but center aligned in FF and Opera, which is correct. The following is
a snippet from my CSS file, which controls the main content area:
#container
{position: relative;
width: 760px;
margin: 15px auto;
font: 12px verdana, helvetica, arial, sans-serif;
text-align: justify;
line-height: 16pt;
color: #000;
padding: 10px;}
I want it to center align in IE too therefore what am I doing wrong?
Here's the URL for the test file: http://www.waltermortgage.com/index1.stm
Any advice is always appreciated!
Respectfully requested,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Main Content won't Center Align in IE
Chris,
I feel stupid! I completely forgot IE doesn't recognize margin: auto,
and I've inserted text-align: center in the CSS body rule in another
design.
Please forgive my temporary memory freeze :)
Again, I've just gotten started on the conversion, and do plan on removing
all table tags.
Thanks very much for the quick response, and my apologies for the post,
but sometimes it's the simple rules you forget.
Warm regards,
Mario
Hey Mario,
IE Doesnt understand margin: auto
You need to give the parent container text-align: center - then in the
child (#container) have: text-align: left to fix the centered text.
Simply add this to your body {} CSS:
text-align: center;
Because you already have: text-align: justify - there wont be any other
problems :)
aww and since your table is centered, that causes no problems either!
:)
Cheers
[EMAIL PROTECTED] wrote:
G'day Mates,
I've persuaded a client to convert their small web site to standards,
and I'm in the process of removing tables, and using CSS to control the
layout and design.
My problem is the main content area on the homepage is left justified
in IE, but center aligned in FF and Opera, which is correct. The
following is a snippet from my CSS file, which controls the main
content area:
#container
{position: relative;
width: 760px;
margin: 15px auto;
font: 12px verdana, helvetica, arial, sans-serif;
text-align: justify;
line-height: 16pt;
color: #000;
padding: 10px;}
I want it to center align in IE too therefore what am I doing wrong?
Here's the URL for the test file:
http://www.waltermortgage.com/index1.stm
Any advice is always appreciated!
Respectfully requested,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Chris Stratford
[EMAIL PROTECTED]
http://www.neester.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Site Review - coylemedical.com
Thank you Peter for the quick response and heads-up! I'm puzzled because I'm using Windows XP Home edition and checked the site in IE 6 and FF 1.0, and the logo isn't skewed. I'm using absolute positioning for the logo, therefore if any of the many WSG experts can provide some advice, or solution it would be greatly appreicated. Thanks again Peter. Kind regards, Mario [EMAIL PROTECTED] wrote: Good morning mates, I've just completed a re-design of a customer's site using web standards. My XHTML (strict) and CSS validate with no errors. I'm primarily interested in feedback pertaining to my code and how closely it adheres to proper semantic markup. In addition, any input regarding my CSS syntax and structure is also greatly appreciated. Of course, suggestions or comments on the site's design are always welcomed. Customer site: http://www.coylemedical.com/ I've been designing for 7 years, but studying web standards for about 15 months, and still consider myself a beginner. I did check the site in FF 1.0, Opera 7.4 and IE 6 with a few minor display differences. Please know that 78% of my visitors use IE based on my traffic report. Respectfully requested, Mario S. Cisneros This is my first post to the list. I'm a complete newbie. There appears to be a problem with the alignment of the logo in FF 1.0.1 - Win XP Pro. It also appears the same way on in IE 6. Screen shot here: http://maestropublishing.com/examples/coylemedical_logo_scrnprint.png I'm a system programmer and I'm pretty new to css (learning it on the side), so I'm not sure of the fix for this. -- Peter J. Farrell :: Maestro Publishing blog :: http://blog.maestropublishing.com email :: [EMAIL PROTECTED] C:\WINDOWS C:\WINDOWS\RUN C:\WINDOWS\RUN\AMUCK -- ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Site Review - coylemedical.com
Thanks Bert, but please know that I didn't make any assumptions about screen resolution, but simply failed to checked the site in 800X600. I always check my sites in different screen resolutions, but dropped the ball this time. Thanks for the reminder, and I'll fix the problem accordingly. Kind regards, Mario G'day I'm puzzled because I'm using Windows XP Home edition and checked the site in IE 6 and FF 1.0, and the logo isn't skewed. I'm using absolute positioning for the logo, therefore if any of the many WSG experts can provide some advice, or solution it would be greatly appreicated. I'd say you are assuming everybody has the same screen resolution as you (looks like it's built for 1024x768, not accounting for wider or narrower scrollbars, side panels, non maximised windows etc). At 800x600, the logo shifts to the right (over the top of other pictures) and at resolutions above 1024x768 it sticks out on the left. Stats vary, but this site will have the formatting problem for a sizeable portion of visitors (perhaps half), The absolute positioning you mentioned is the cause of your problem. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Site Review - coylemedical.com
Good morning mates, I've just completed a re-design of a customer's site using web standards. My XHTML (strict) and CSS validate with no errors. I'm primarily interested in feedback pertaining to my code and how closely it adheres to proper semantic markup. In addition, any input regarding my CSS syntax and structure is also greatly appreciated. Of course, suggestions or comments on the site's design are always welcomed. Customer site: http://www.coylemedical.com/ I've been designing for 7 years, but studying web standards for about 15 months, and still consider myself a beginner. I did check the site in FF 1.0, Opera 7.4 and IE 6 with a few minor display differences. Please know that 78% of my visitors use IE based on my traffic report. Respectfully requested, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] standards compliant tutorial
Alan, Here's another good resource: http://www.456bereastreet.com/lab/developing_with_web_standards/ Respectfully submitted, Mario S. Cisneros, President WebNet Design Studios, LLC I remember that when I was first writing web pages and going over the basic html tutorials a few months ago they taught me nothing about standards, doctypes, separation of style from content, and all that good stuff that makes my life so much easier now adays. My brother is tring to enter the land of web design now and as far as I know, he doesn't even now css exists. I'm familiar with w3schools, but I'm wondering if there are any better turtorials around for doing xhtml, css, ecmascript, and teach good web design habbits. -Alan Trick ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Is a list required for horizontal navigation?
Good morning mates, I have a navigation bar with four links that uses a style sheet to control it's placement and presentation at the top of my site, but I did not place them in a Unordered List because the links naturally align themselves horizontally. Therefore, I thought I'd ask if this is considered semantically correct? I've eliminated unnecessary markup, and used a style sheet to control the menu's presentation. The id controls the placement, and the class styles the links: div id=container a href=/index.htm class=topnavbar title=HomeHome/a img src=/Images/markers/bullet.gif width=8 height=8 alt= / a href=/press-room/press-room.htm class=topnavbar title=Press RoomPress Room/a img src=/Images/markers/bullet.gif width=8 height=8 alt= / a href=/sitemap.htm class=topnavbar title=Site MapSite Map/a img src=/Images/markers/bullet.gif width=8 height=8 alt= / a href=/contact.htm class=topnavbar title=Contact UsContact Us/a /div Respectfully, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] no more width and height?
Yes, but it takes longer to load if the width and height attributes are not included, which was my point. [EMAIL PROTECTED] wrote: Also, width and height attributes for images allow the image to load faster because the browser doesn't have to figure out the dimensions. News to me... the browser works out the dimensions of the image anyway. Including the width and height attributes has advantages, however... as it allows browsers to set out the dimensions of the page before the image loads, meaning that there's no more skew-wiff web-page layouts as the image loads. This shouldn't really affect us, the standards people, but it does affect those who still rely on the evil of: table TR backimage=sumtilinimage.imgtdimg src=spacer.gif///tr /TABLE ...Not that I'd ever write anything like that ;) -- -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Big Name Site Goes Standards
EDS converted their Internet site to a CSS based layout. Hello all, I may be a little late with this, so forgive me, but I just read here http://web-graphics.com/ that http://www.turner.com/ just relaunched using a standards-based layout/construction, etc. It's a very nice, clean and useable... blog... I mean... site. Anyone else see a design trend in standards-based sites? However, in the end, and most importantly, a big company like Turner caring about standards is great news. Tom Livingston Senior Multimedia Artist Media Logic mlinc.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] styling ordered and unordered lists
Hello Helen,
This might work:
ul
{ list-style: none;
list-style-image: url(../Images/Graphics/arrow.gif); }
Kind regards,
Mario
Hi
I am trying to have an unordered list that is styled nicely with an
arrow graphic, however now I get the arrow graphic in my ordered list as
well.
Could someone please have a look here:
http://learnline.cdu.edu.au/wip/css/liststest.html
and give me an idea of what I can do to get around this. The lists are
contained within a class called main left - assuming that this will
eventually become the left column.
Thanks very much
***
Helen Rysavy
Web Designer, Teaching Learning Development
Charles Darwin University, Northern Territory 0909
Tel: 8946 7779 Mobile: 0403 290 842
mailto:[EMAIL PROTECTED]
www.cdu.edu.au
CRICOS Provider No: 00300K
***
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] IE 5
Thank you all for your prompt responses and information! I will check out the previously submitted links, and weigh it against the input cited below. Very respectfully yours, Mario S. Cisneros In regards to the links ppl have given you to the 'Multiple Internet Explorer versions' downloads, you should be aware of the potential issues. There is no evidence either way that says this method is a true representation of older versions of IE and all inherent issues with Javascript, CSS, DOM, etc. Sure it's a great way to quickly check cross-browser compatibility across a few different version of IE, but never forget that the most comprehensive method of testing is to have a proper suite of OS's and browsers available to you, either via multiple PC's or one PC with Virtual OS's. If you have the time and the money then your final product should be put through a proper test suite before going to production, don't rely on 'hacks'. Mt. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Tuesday, 4 January 2005 9:11 AM To: wsg@webstandardsgroup.org Subject: [WSG] IE 5 Hi All, I hope this isn't OT, but I want to test my sites on various browsers and versions to ensure their compliancy, which I'm assuming is standards related. I currently have IE 6.0, NN 7.0, FF 1.0 and Mozilla 1.6 I downloaded IE version 5.0 from your Evolt's browser archive, and wanted to ensure that initiating the setup wouldn't cause problems with my current OS or browser configuration. I'm currently running Windows XP Home Edition, and I recieve the following message when I launch the setup application: The Windows Update: Internet Explorer and Internet Tools files on your computer are not the correct files for your operating system. Setup will download the correct files from the Internet. I know many of you are running IE 5, and wondered if you had encountered any problems running multiple versions? Any advice you can provide ragarding this matter would be greatly appreciated. Respectfully yours, Mario S. Cisneros, President WebNet Design Studios, LLC ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Web Design in 2005
Good evening all, I found an interesting article posted on a site, Forty Media that has posted their predictions on web design trends for the coming year. They suggested that the looks that are out, or dated are, ...Retro; Swiss/Euro; Minimal; that standards-compliant look, which I thought some of you might find an interesting read. http://www.fortymedia.com/2005-web-design-forecast.fhtml Respectfully submitted, Mario S. Cisneros, President WebNet Design Studios, LLC ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Why style to IE?
Good day all, I have to concur with Collin about designing for IE first and foremost. I run a design firm in Dallas, and the dominate browser is the US is certainly IE therefore it would be less then prudent or rational to design for FF/Opera/NN/Safari etc. I also understand and take advantage of JavaScript in conjunction with DOM where applicable. This is a powerful language and when used effectively can provide a host of functionality inline with standards-based technologies. The bottomline is that you have to pick your battles wisely, or risk becoming a hack :) Respectfully yours, Mario S. Cisneros, President WebNet Design Studios, LLC The point I was trying to make was that my audience primarily uses IE (as I dare say, so do most commercial web audiences). As such, I design my sites to work first and foremost *for* IE. The bashing of head against the proverbial brick wall comes from trying to make my standards-compliant sites work the same in FF/Opera/NN/Safari as they do in IE. All of my sites (save for I think 2), are done in XHTML 1.0 Strict, and I make sure each page validates, as well as the CSS. I first make sure the sites look and perform the way I want in both MSIE 5 and 6. After that is successful, I then start testing in the other browsers. For other sites (personal, concept, etc.), I worry about IE last, because most of my friends and colleagues use more standards compliant browsers. While I do know ECMA-262 (Javascript), I hate using it. I can develop much quicker just using a pure markup+css approach, and have no need for scripting. I hope that makes my original post clearer. In no way did I think Mordechai was suggesting an ignoring an IE, but was asking why style to IE specifically, and I was just giving the rationale for doing so. Cheers :) Collin Davis Web Architect Stromberg Architectural Products p 903.454.0904 f 903.454.3642 e [EMAIL PROTECTED] web www.strombergarchitectural.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Vicki Berry Sent: Monday, December 27, 2004 11:15 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Why style to IE? I don't believe Mordechai was suggesting anyone ignore IE -- rather that, instead of bashing our heads against the proverbial brick wall trying to make our standards-compliant sites work in IE, it may be a workable option to use an alternative to said head bashing and css hacks. His suggestion was to use Javascript. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Standards Macromedia Contribute
Hi All, I just launched a site for a client that is database driven and uses an external style sheet site to control the site's design. I granted my client permission to update only the content using Contribute for certain interior pages, which won't effect the page's layout. Also, I must admit I'm growing rather weary of all the negative remarks about Dreamweaver. From my humble perspective I use Dreamweaver MX 2004 and find it to be an extremely robust and well crafted authoring tool. Dreamweaver produces fairly good XHTML, and has a feature to Clean Up XHTML, and coupled with HomeSite's code sweeper you can produce clean, valid markup. All in addition to using the W3C's Code Validator, and being able to apply changes in Dreamweaver's code view I just don't see the down side. I use TopStyle for my CSS, but I can't imagine the amount of time it would have taken to create some of my more complex sites by hand coding them especially considering some of the hard deadlines my customers have imposed. Respectfully yours, Mario S. Cisneros, President WebNet Design Studios, LLC. Hi Sam Whilsts not completely off-topic, this is relevant: It depends on the complexity of the CSS code for layout Macromedia's Contribute uses the same page-render engine as Dreamweaver, and we all know what that's like to work with ;) Well, provided your design doesn't use floats, different display: properties, and relative positioning, you should be fine (with the latest version, of course) As for pre-written templates? Contribute wasn't built with pre-designed templates in mind, moreather, so satisfy pre-built websites by professional developers (read: us). Developing a working template for Contribute is trial and error, unfortunatly... not only do you have the issues I've described above to contend with, but also browser incompatibilities too. Untill Macromedia get their act together about standards-compliant rendering (preferably without bugs too), then Contribute can only really be considered for use with tabular layouts. Regards -David -- Original Message -- From: Sam Hutchinson [EMAIL PROTECTED] Reply-To: [EMAIL PROTECTED] Date: Wed, 15 Dec 2004 14:15:19 - Anyone out there got any experience of adding a fully devised compliant template to Contribute to let the content owners manage their own pages ? Is it simply a case of defining the editable regions or should you build the site and then define the content that can be changed? Was planning on implementing along with: http://www.sammyco.co.uk/acttrwebpre/company.php ...would be interested to hear of any results good and bad - off list of you feel your reply isn't wide enough for everyone to be interested... Cheers SH ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Site review - torresburriel.com
Very well done Senior Burriel!!! Excellent color scheme, layout, use of white space and navigation! My compliments, Mario S. Cisneros Hi all, I'd like you to review my personal site. All pages validate (I think) except the weblog section, under PMachine engine. http://www.torresburriel.com Thanks in advance! -- /* Daniel Torres Burriel - www.torresburriel.com /* Web design - Usability consulting - IT Press /* More info bio: www.torresburriel.com/perfil/ /* GPG key: 0x43DB2AB7 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Site critique please
Hi Lyn, I really like the color scheme and navigation! Excellent use of white space. My only suggestions would be to export what appears to be a backgound image as a jpg because it's a gradient and if you look close enough you'll notice that it's producing a banding effect (ripples), which detracts from it's appeal. Also, the Welcome text looks amateurish, and centering the first and last paragraphs under the Welcome text looks awkward. Nice Job! Respectfully yours, Mario Hi everyone Would very much appreciate feedback as to any problems or mistakes. Thank you. www.mwg.green.net.au/testpages/mwgindex.html Lyn ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] funky padding
Hi John, I've found if you delete the paragraph tags containing the first and last sentences that should do the trick. You have the middle paragraph contained within a set of paragraph and blockquote tags, which will retain your layout and formatting. Since div tags are considered block-level elements they automatically generate white space above and below adjacent elements. Kind regards, Mario Hi, folks. I'm having a bit of trouble ridding myself of some top and bottom padding inside a box. Can anybody assist, please? http://www.drzeus.net/redesign/cslewis/ The quote of the day box, to be specific. Thanks. -- ~john _ Dr. Zeus Web Development http://www.DrZeus.net content without clutter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Some links for light reading (17/11/04)
I just tested the site in Mozilla and it looks fine, but in Netscape 7.02 all the elements are pushed down when you mouseover the top level navbar. Maybe it's just me :) Looks good in netscape 7.1 On 11/17/2004 7:30:30 AM, [EMAIL PROTECTED] wrote: EDS has certainly gone with CSS, and the site is clean, simple, and engaging, but someone forgot to test the site in Netscape 7.02 because the navbar is producing a nasty effect. Mario EDS goes full CSS: http://www.eds.com/ More on EDS's launch: http://web-graphics.com/mtarchive/001457.php The Mobile Web: http://www.russellbeattie.com/notebook/1008162.html The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Chapter 2 - Text Styling and Other Basics: http://www.sitepoint.com/article/css-anthology-tips-tricks-2 Tableless forms: http://www.quirksmode.org/css/forms.html Well Styled - some interesting articles: http://www.wellstyled.com/archive.html Patrick Griffiths teaching XHTML and CSS in London: http://www.htmldog.com/ptg/archives/76.php f*** you markup purists (warning - swearing!): http://blog.vinniegarcia.com/oldstuff/2004/11/13/f-you-markup-purists/ Goodbye Yellow Right Double Angle Bracket: http://larsholst.info/blog/2004/11/16/goodbye-yellow-right-double-angle-brac ket/ Write great code. Get an iPod: http://scott.feeds ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] breaking long urls
Hi all Im having a bit of a problem with long urls in a 3 column web layout. I want the urls to be in my right column, but they are to long and wont wrap properly because they are a single word. I have found the following css rules, but the ie tag doesnt validate. Is there any way to force word wrap, even on single words such as urls in a valid cross browser friendly way? All help is appreciated! Flemming Hoffmeyer SmartPage webdesign Lavlandsvej 35 4400 Kalundborg Tlf.: 51966262 E-mail: [EMAIL PROTECTED]
RE: [WSG] Ok - Stupid Question
Note that this won't work i IE 5.x Here you have to set text-align: center; in the element containing the element you want to center. Flemming Hoffmeyer [EMAIL PROTECTED] www.smartpage.dk -Original Message- From: Chris Stratford [mailto:[EMAIL PROTECTED] Sent: 7. februar 2004 14:45 To: [EMAIL PROTECTED] Subject: RE: [WSG] Ok - Stupid Question Ahh thanks! Perfect! margin-left: auto; margin-right: auto; worked great! www.neester.com check it out now :D its my first shot at XHTML so im also learning more about CSS while im at it! :) margin-left: auto; margin-right: auto; seems a little dodgy though, its not a set result... I mean, Float: center would be a lot! Simpler! - Chris Stratford [EMAIL PROTECTED] www.neester.com - -Original Message- From: Lea de Groot [mailto:[EMAIL PROTECTED] Sent: Sunday, February 08, 2004 12:22 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Ok - Stupid Question On Sun, 8 Feb 2004 00:02:09 +1100, Chris Stratford wrote: so how the hell do I center the page?? There's a couple of methods. One is to use margin-left: auto; margin-right: auto; on the *parent* block. (Ummm... I'm sure I havent phrased that properly) Anyway, the Incutio CSS wiki has a full discussion: http://css-discuss.incutio.com/?page=CenteringBlockElement Float: center; would be nice, wouldnt it? :) HIH Lea ~ hi guys - first post :) -- Lea de Groot Elysian Systems Brisbane, Australia * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Wrapping text around images in a style .. possible?
One solution is to make the bg show at the top left using
Background-position: top left;
This doesn't make the following lines show directly under the image
though.
To do this you can float the image left like this:
img class='floatleft' src'youImage.gif' /
h1 This is h1 with a longer headline, so the text wraps onto a second
or perhaps even a third line, as would be the case in a big magazine
article heading/h1
css:
img.floatleft {float: left;}
That should do the trick
Flemming Hoffmeyer
[EMAIL PROTECTED]
Smartpage webdesign
www.smartpage.dk
Michael Kear wrote:
I'm using a small image in a style, and want to wrap the text around
the
image when it overflows on to a second line. Is this possible?
Here's an illustration of what I'm trying to do - the existing style
and a
mockup .gif image of what I'm trying to get to:
http://64.191.54.240/btcmsa/stylingexp.cfm
Cheers
Mike Kear
Windsor, NSW, Australia
AFP Webworks
http://afpwebworks.com
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
