Re: [WSG] Page causes win IE4 to crash
Neerav wrote: OK Ive narrowed down the code which makes IE4 crash to the 2nd box floated on the right hand side (currently commented out from line 221 - line 235) of http://www.bhatt.id.au/test.php Basically the 2nd lower box sample article is formatted the same way as the sample site box above it, however to get both to float right and be one above each other I had to add a container div called container_of_samples, the problem lies somewhere there, but I cant tell where ... any thoughts? It might be the underscores in container_of_samples, since that isn't a legal value for a class. From the CSS2 spec: # In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier BW? may be written as B\W\? or B\26 W\3F. Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]). * 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] Feedback on site
Cheryl Perkins wrote: I was asked to create and maintain a website. I wanted to try out CSS, although I eventually resorted to tables for layout. I'm a beginner at this sort of thing, learning on my own. Anyway, the site's been up for a while, and I'm thinking that it's time to make improvements. It's at http://www.med.mun.ca/surgery/ You should get rid of the width: 100%; on the body element. In conjunction with the margin-left: 5%; it produces horizontal scroll bars on both IE6 and Firefox 0.8. 100% width to the body element is the width of the viewport. In both the W3C and the Microsoft box model margins don't count towards the width. So when you also stick margins in with a 100% width, you are requesting that the browser display more than a viewport worth horizontally, thereby producing a scroll bar. * 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 doesn't like my positioning
Barbara Dozetos wrote: Hello all -- This is probably a really simple thing, but I'm growing incapacitated by my frustration. Working on the layout with dummy text and it looks great in Firefox, but IE says ut-uh. Can someone take a look and tell me what stupid mistake I've made? http://www.pcc.com/clients/uc/welcometest.html thanks, Barb This specific problem is caused by the nobr tag at the end of your div with an id of div3. Since you don't close that tag and IE is operating in quirks mode, it happily applies it to the rest of the page. Plenty of other problems to fix after that. It may actually be easier to start this site over from scratch rather than try to fix all the problems. But if you want to fix it in place I'd recommend as a first step looking at the validator (http://validator.w3.org/check?verbose=1uri=http%3A//www.pcc.com/clients/uc/welcometest.html). Good luck, Robert * 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] Background image
theGrafixGuy wrote:
Is there anyway to center the background image on a page withoiut
resorting to a div?
body {
background-image: url(yourimage.jpg);
background-position: center;
}
Should do it.
*
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] slightly OT web page analyser service
Neerav blurted out: This maybe OT, but should be useful to all web developers on the list, because a site ight well be standards compliant but if it takes 30 seconds to load than its still failing ... I wouldn't say it was offtopic. Something like this could be used to demonstrate the advantages of using CSS vs table layout. After doing a redesign the new version can be tested head to head with the old. Doing so might even reassure those designers on the fence that there is a reason beyond buzzword compliance to the whole CSS thing. * 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] A kinda Simplequiz
Jackie Reid blurted out: Manuel Gonzlez Noriega wrote: b) doesn't work well for multi-paragraph questions or answers. scuse my ignorance but is it not ok to this: dldtfirst bit/dt dtnext bit/dt ddfirst bit/dd ddnext bit/dd ddand another bit/dd/dl While that would be fine, I personally would prefer: dl dt pfirst bit/p pnext bit/p /dt dd pfirst bit/p pnext bit/p pand another bit/p /dd /dl I prefer this because doing it in the form of multiple dts or dds in a row loses a bit of the cohesiveness of the back-and-forth nature of a conversation. Mostly it is a matter of taste. I also really liked the way that Lea mentioned. I didn't think about doing it that way, but it seems really natural. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Definition list wish
Tonico Strasser blurted out: Robert Moser wrote: Then you could have something like this: dl dli dtAlbatross/dt ddA sea bird/dd ddA tasty snack at the movies/dd /dli dli dtSwallow/dt ddCoconut delivery system/dd /dli /dl What about: dl dtAlbatross/dt ddA sea bird/dd ddA tasty snack at the movies/dd /dl dl dtSwallow/dt ddCoconut delivery system/dd /dl The semantic meaning of the two examples are different. With the way I had it, the meaning was: a single list of definitions with two items, the first item having two descriptions for a single term, and the second with a single description. This meaning is the same as what it would be without the additional dli elements. The additional elements just serve to explicitly link the dt and dd elements together. The second way is two lists of definitions, each with a single item, the item in the first list consists of a single term with two descriptions, and the item in the second list consists of a single term with a single item. The second way lacks a single container to house everything. It would of course be possible to wrap it in a div, but that is a somewhat generic way of imposing additional meaning. You could just as well make the whole thing out of divs and spans. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] effect of css background repeat-x at high res
Neerav blurted out: I was looking at http://www.alistapart.com/d/customcorners2/step2.4.html on my 1024x768 monitor and wondered what would the gradient used for the background using : background: #d3d7e0 url(../images/bg.jpg) repeat-x; look like at a really high resolution because bg.jpg is 1 px wide x 800 high eg: 1600x1200 ? would the bottom horizontal portion of the screen fade to #d3d7e0? a screenshot would be appreciated. You can see for yourself by making your browser really narrow, then scrolling down. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] turning back to the dark side...
Paul Ross wrote: If anyone wants to see the finished version check out: http://www.books24x7.net.au - just don't view source on the New Releases page Why is there a script after the closing /html? Does that script (a statistics collector) even work in that location? * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Problem with footer
Kim Kruse wrote: I would really appreciate if someone has the time to explain this to me. (I've been looking at way too many tutorials and my brain is close to a total meltdown) I know you've read a lot of tutorials, but this one seems to be right on target: http://www.alistapart.com/articles/footers/ It has CSS only footers and also javascript/DOM ones. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Table style definition lists
Mark Stanton blurted out:
Sorry James - my point wasn't too clear.
I'm not concerned about the wrapping - sometimes things have to wrap. I just
want to make sure that each definition lines up vertically with its term.
This works in Firefox, but no IE.
Cheers
Mark
Here's a simple demo page for this (which doesn't use a DL). The
problem is that IE stacks up the right side boxes with no gap between
them, while Firefox aligns the tops of the right side boxes with those
of the left. I don't have a fix for it, I'm just trying to help
illustrate the problem.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleMisalignment/title
style
div {
float: left;
width: 40%
}
.div1 {
height: 2em;
background-color: blue;
border: thin solid black;
clear: both;
}
.div2 {
height: 1em;
background-color: red;
border: thin solid green;
}
/style
body
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
/body
/html
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] IE6 and 3 pixel out --- WARNING
Peter Firminger blurted out: Windows users with low security setting should be aware that the page below has links to load some stuff you really don't want to know about. Be aware... Hopefully this was out of Paul's hands and can be fixed immediately. Paul? The first page isn't too bad, although the IFRAME prevents it from validating, and the style attributes on the images to float them right should probably be moved into the style section. The forced-action.com site though (linked in through that 1x1 IFRAME) is just terrible. It uses frames to put a navigation menu on the left (although the use of frames is understandible since the right frame is to yet another site). That nav menu doesn't even have a doctype. And then it uses tables for layout, a tiny bit of CSS to style the link text, font tags to style the other text, center tag to center the table, and bgcolor and text attributes on the body tag. Definitely a before site. I'd wait until they've gotten a bit further in their standards conversion before visiting. Oh yeah, I forgot to mention the javascript and 1x1 iframe to another page on their site where the possibly nasty javascript lies (I don't know, I didn't look at the tool.html page before the site became unavailable). Cheers, Robert * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Mozilla problem
Kim Kruse wrote: So apart from using JavaScript to calculate the height of #wrapper content, is there a fix for this? I have no problem in Opera, Safari e.t.c so I assume this is a Mozilla bug of some description. You should be able to add a #clearer div after the #footer div, but still within the #wrapper div. I believe that it can even be empty, it just needs a style of clear: both; This lets Mozilla do the height calculation. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Dodging CSS Hacks Tutorial
[EMAIL PROTECTED] blurted out:
Hey, this is my first attempt at making up a tutorial. By all means correct me
on anything that's wrong :) ... this goes out to all you CSS Hack gripers on
here heh. Enjoy.
http://web.theward.net/dodgingcsshacks.html
You might want to make sample pages for each of the examples.
Your method 2 doesn't work in Firebird 0.7 (I'm waiting on extensions
before I move to Firefox), and probably not in any of the browsers with
working box models.
Plus it is flawed in and of itself, since neither of the boxes are
floating, so they just stack vertically. And you left off the # in the
background color of the second box.
You can compensate a bit by adding negative margin to offset the border
+ padding, but that makes the IE version shrink to the left.
Alteratively, you can not set the width of the second box at all, which
results in a 50/50 split in IE, and one that is off by either 10 or 20
pixels (I don't have the eye to tell) in Firebird.
Here's the CSS (for just the boxes) for that strategy:
#box_a {
width: 50%;
padding: 10px;
background: #eee;
float: left;
}
#box_b {
background: #bbb;
padding: 10px;
}
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Dodging CSS Hacks Tutorial
Ryan Christie blurted out: Box A's background becomes the border when you make a 5px margin on Box B ... I believe I used the word appear... It's sort of faking a border, if you will. When built you'll see what I mean (and why it can only be solid) If the background for box A is an image (say a checkerboard pattern that repeats both ways), then the border won't be solid. * The discussion list for http://webstandardsgroup.org/ *
[WSG] Getting to the bottom of things
Say I have a header where I have the main text big and bold and in the
usual top left position. Now in addition I have a little catch-phrase
that I'd like to stick in the bottom right. How do I style the
catch-phrase so that it stays in the bottom right even with the user
changing the font size?
Here's the markup and a little style:
html
head
titleBottom Right?/title
style type=text/css media=screen
#header {
background-color : #03c;
height: 55px;
}
#header #logo {
/* The following would be for Image Replacement of the logo */
/*background: url(logo.png);
font-size: 0;*/
font-size: 40px;
width: 250px;
height: 50px;
float: left;
}
#header #subscript {
color: #fff;
text-align: right;
padding-right: 0.2em;
margin-left: 250px;
}
/style
/head
body
div id=header
div id=logoLogo Text/div
div id=subscriptCatch Phrase/div
/div!-- header --
div id=contentblah blah blah/div
/body
/html
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Getting to the bottom of things
That definitely does the trick. I was driving myself crazy fiddling with line-height, padding-top, and position: relative on the subscript. The best I could manage was min-height on the header and padding-top on the subscript. The dual positions is so much nicer. Thanks, Robert russ weakley blurted out: Hi Robert, What you need to do is set the container (in your case the header div) to position: relative, and then subscript to position: absolute - and make it sit in the bottom right edge of the container. Like this: http://www.maxdesign.com.au/jobs/css/moser.htm No matter how it is scaled up or down, the text will still sit in the same position relative to the bottom of the div. The container has to be set to position: relative in order for the item inside to be positioned correctly. This can be seen in the link below where the first container has no positioning set - the box inside will ignore it and position itself relative to the initial containing box. http://www.maxdesign.com.au/jobs/absolute.htm Russ Say I have a header where I have the main text big and bold and in the usual top left position. Now in addition I have a little catch-phrase that I'd like to stick in the bottom right. How do I style the catch-phrase so that it stays in the bottom right even with the user changing the font size? * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] What Causes Selection Problems In IE.
Chris Stratford blurted out:
A really!
Thats what it was, ok thanks!
That fixed the head problem, now I know why...
Can I get around that?
Anyway possible?
It needs to be absolute - because of the table look it has now...
Thanks!
Couldn't you do that portion like a three column layout, something like
this:
html
headtitleThree column header/title
style
#header {
text-align: center;
}
#header_left {
float: left;
text-align: left;
width: 20%;
}
#header_right {
float: right;
text-align: right;
width: 20%;
}
.clearer {
clear: both;
}
/style
/head
body
div id=header
div id=header_leftTITLE/div
div id=header_rightLOGOUT LINK/div
LOGININFO
/div
div class=clearernbsp;/div
div class=contentYour selectable content here/div
/body
/html
*
The discussion list for http://webstandardsgroup.org/
*
[WSG] Image Gallery alternative
I was searching the web for a good way to do a thumbnail gallery and
came across the discussion on this list between Russ Weakley and Justin
French. I came up with this alternative to the ways that they wrote
about (Russ - each image in its own DL, Justing - each image in its own
DIV).
What I did was to make it a plain UL with the gallery class applied to
the UL, and the image and description being in a LI, which is floated.
It looks to me like less markup in the HTML portion, but a little more
in the CSS.
Here's the code (using the same content as used by them):
style type=text/css media=screen
body
{
margin: 20px;
padding: 0;
font: 90% arial, sans-serif;
background-color: #fff;
}
ul.gallery
{
list-style: none;
margin-left: 0;
padding-left: 0;
}
.gallery li
{
border: 1px solid #000;
background-color: #ddd;
width: 102px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}
li img
{
display: block;
border: 1px solid #000;
width: 100px;
height: 100px;
}
li a
{
display: block;
font-weight: bold;
margin: 5px 0 3px 0;
}
/style
/head
body
h1Unordered list for image gallery/h1
ul class=gallery
li
img src=flower.jpg alt=
a href=#Title here/a
Description here
/li
li
img src=flower.jpg alt=
a href=#Title here/a
Description here
/li
li class=gallery
img src=flower.jpg alt=
a href=#Title here/a
Description here
/li
/ul
/body
*
The discussion list for http://webstandardsgroup.org/
*
