Email conversation
| From | Hank |
|---|
| To | Me |
|---|
| Subject | questions |
|---|
| Date | 23 March 2007 18:03 |
|---|
Hi Mark,
Someone gave me a tip to present my problem to you. It's about this page:
[URL]
It has these problems:
[1] The bullets don't align to the top of the list item
[2] In MSIE the list item text does not align to the same left margin
[3] Using the scrollbar makes the navigation menu and the title at the top
disappear
Basic structure:
|<table class="wrapper" ...>
|
|<table class="scrolling" ...>
</table>
|
|</table>|
Obviously, I want the scrollbar to apply to the inner table only.
Thanks in advance for your reply,
Hank
| From | Me |
|---|
| To | Hank |
|---|
| Subject | Re: questions |
|---|
| Date | 24 March 2007 14:43 |
|---|
Hank,
> [1] The bullets don't align to the top of the list item
I assume you refer to a problem in IE and Firefox. The problem is not
present in Opera.
This is because you are using a fieldset and legend. IE and Firefox always
align the bullet with the first line of content in the fieldset, but not the
legend. Many browsers have problems with styling the fieldset and legend
element, so this is not surprising.
The use of a fieldset is not appropriate there anyway, since fieldsets are
supposed to be used for grouping form controls, which is not what you are
using them for:
<li><fieldset class="faq"><legend>Question<i>?</i></legend>
<p>Answer</p></fieldset></li>
If you use more appropriate HTML, such as a heading, it will work properly:
<li class="faq"><h3>Question<i>?</i></h3>
<p>Answer</p></li>
> [2] In MSIE the list item text does not align to the same left margin
In IE, I see all of the questions and answers lined up perfectly. In Opera
and Firefox, the answers are indented. Neither response is wrong, since CSS
does not describe how a browser should style those elements. If you replace
them with the markup I suggested above, you can style the paragraphs to have
a margin-left using CSS to create whatever effect you want. This produces
approximately the same effect as I see in Opera with your current markup
(which I assume is the effect you want):
li.faq h3 { font-size: 1em; font-weight: normal; margin: 0; }
li.faq p { margin: 0 0 0 0.5em; }
> [3] Using the scrollbar makes the navigation menu and the title at the top
> disappear
> Obviously, I want the scrollbar to apply to the inner table only.
OK, so you want a framing effect without using framesets. This is one of the
tricky parts of CSS, and I have discussed it in detail here:
http://www.howtocreate.co.uk/emails/TeetKalm.html
Note though that tables cannot have scrollbars (there are ways of making
them have scrollbars, but for the sake of simplicity, assume that they
cannot). Instead, scrollbars can be applied to - for example - a DIV around
the table.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Hank |
|---|
| To | Me |
|---|
| Subject | Mémoire |
|---|
| Date | 26 March 2007 08:15 |
|---|
Hello Mark,
Thanks for your input. [URL] looks almost the way I intended.
There's one thing to fix though. In MSIE the scrollbar is displayed slightly
to the left of the right side of the window while in Firefox it's positioned
properly.
Replacing div.scrolling {.... width: 80%; ....} with div.scrolling {....
width: 100%; ....} fixes this but then the scrollbar disappears in Firefox.
Meanwhile I managed to set things up in such a way that the HTML is
reasonably editable with Composer or FrontPage.
In the CSS file you will notice the repetition of "color: #FF3333;".
Also, you will notice "@page customsize {size: 210mm 297mm; margin: 20mm;}".
Is it possible to define "@something basecolour {color: #FF3333;}" and use
this a a means to create a single point of definition for the basic colour
of the elements?
Effectivly, in programming terms, this would mean a simulation of a
constant.
I know you test with other browsers besides MSIE & Firefox. Do you test on
Apple MacIntosh OS-X as well?
Regards,
Hank
| From | Me |
|---|
| To | Hank |
|---|
| Subject | Re: Mémoire |
|---|
| Date | 27 March 2007 13:59 |
|---|
> In MSIE the scrollbar is displayed slightly to the left of the right
> side of the window while in Firefox it's positioned properly.
And in opera, it does not work at all (please give results for Opera in all
future communication: <http://www.opera.com/download/>).
The problems are due to a few mistakes that you have made, and your reliance
on parts of CSS that are not yet standardised.
1. You should use overflow:auto; not overflow-y:auto;
overflow-x and overflow-y will be part of CSS 3 but are not very well
supported yet, as the spec is not yet ready for use. Normal overflow is in
CSS 2 and is supported by all current browsers.
2. You use position:fixed; even though you do not need to. You are not
allowing the viewport to have a scrollbar, so that has no special effect.
You should use position:absolute; instead.
3. You are falling over an IE bug known as shrinkwrap:
http://www.howtocreate.co.uk/wrongWithIE/?chapter=ShrinkWrap
You need to use a DOCTYPE that triggers standards rendering in IE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Note that this bug cannot be cleanly fixed in IE 6.
> Is it possible to define "@something basecolour {color:
> #FF3333;}"
No. CSS does not support variables.
Aside from that, your use of the page rule is somewhat confused, since it
applies only to paged media (such as printed or projection), and yet your
stylesheet applies only to screen media, which is not paged.
> I know you test with other browsers besides MSIE & Firefox. Do you
> test on Apple MacIntosh OS-X as well?
Absolutely :) And Unix/Linux. However, we cannot expect all Web developers
to have access to these systems, especially the private individual, but the
best that can be done is for them to test all the main browsers on the
systems that they do have, such as:
Opera, Firefox, IE on Windows.
Opera, Firefox, Konqueror on Unix/Linux.
Opera, Firefox, Safari, iCab on Mac.
We are all free to test other browsers if we want, but imho, those browsers
are currently the minimum for responsible Web development on the given
system.
| From | Hank |
|---|
| To | Me |
|---|
| Subject | Mémoire - again |
|---|
| Date | 28 March 2007 15:02 |
|---|
Hello Mark,
The DOCTYPE line was magic! Until now I thought the 'loose'
interpretation was default when a DOCTYPE is absent. Boy, was I mistaken!
Next hurdle: viewing the pages on a PDA. You forgot to mention this in
your list. More and more we find that visitors use this type of
equipment to surf the Internet. Do you have a link for me about this?
Thanks for your advice,
Hank
| From | Me |
|---|
| To | Hank |
|---|
| Subject | Re: Mémoire - again |
|---|
| Date | 29 March 2007 10:00 |
|---|
Hank,
> The DOCTYPE line was magic! Until now I thought the 'loose'
> interpretation was default when a DOCTYPE is absent.
It is. But that relates to HTML only, not CSS. (CSS itself has nothing to do
with DOCTYPEs, it's just the browsers decide to change their CSS support
based on DOCTYPEs in order to cope with older pages on the Web).
http://hsivonen.iki.fi/doctype/
> Next hurdle: viewing the pages on a PDA. You forgot to mention this in
> your list.
I mentioned Opera, which is both a desktop and the most popular device
browser.
> Do you have a link for me about this?
In general, the easiest advice for device browsers is; leave them alone, and
with any luck, they can reformat your page to make it work somehow. Many
attempts to make device-friendly pages end up doing the opposite, such as
making a stylesheet for mobiles that forces the page to be 500 pixels wide,
even if the device does not have a screen that big. Still, if you think it
is worth making a special layout for handhelds, see this page:
http://www.howtocreate.co.uk/tutorials/css/mediatypes#specialhandheld
As for testing, Opera is currently the most widespread PDA/mobile browser.
The desktop version allows you to use 'View - Small Screen' to test what it
will look like on a PDA. It highlights some problematic parts of your
design, such as the use of background images instead of <img> tags in your
gallery.
| From | Hank |
|---|
| To | Me |
|---|
| Subject | Re: Mémoire - again |
|---|
| Date | 29 March 2007 17:03 |
|---|
Hi Mark,
I've one more question for you: Why does the line
|<meta http-equiv="Page-Enter" content="blendtrans(duration=3.0)">|
have NO effect in MSIE on [URL] ?
I found one page where it does work fine:
[URL]
Documentation (poor):
http://msdn.microsoft.com/workshop/author/filter/reference/filters/blendtrans.asp
Regards,
Hank
PS I'm aware that this effect only works in MSIE and compatible browsers.
| From | Me |
|---|
| To | Hank |
|---|
| Subject | Re: Mémoire - again |
|---|
| Date | 30 March 2007 09:28 |
|---|
Hank,
> <meta http-equiv="Page-Enter" content="blendtrans(duration=3.0)">
Apparently, this line needs to be in the page source _before_ any
stylesheets. No idea why.
| From | Hank |
|---|
| To | Me |
|---|
| Subject | Re: Mémoire - again |
|---|
| Date | 30 March 2007 15:42 |
|---|
Apparantly, there's very good reason why this is the case. But you only get
this when you meet all of the criteria below:
* Lack good knowledge of HTML and CSS
* Your highest level of education is kindergarten
* Drink some bottles of tequilla
* Employed by Microsoft
[Ed. Yeah, that gave me a good laugh.]
Regards,
Hank