I hope I'm posting this in the right place, and I hope David reads the forums fairly often.
[quote]For a long time now, I have been saying that incorporating
a native webmail interface into Mercury is my highest priority,
and this is still true. Unfortunately, the process has proven
to be much less simple than I thought (and I was not being
over-optimistic). The problem is not the mail management,
but the HTML: designing a usable, attractive HTML-based
interface that will work with a wide range of browsers is
staggeringly complicated, and frankly, it's beyond the scope
of my personal skill set at this point.[/quote]
Just saw that when reading about the new Mercury. I've done a lot of work with HTML and getting it to work across many browsers, and may be able to help.
First, some tips:
- Put Internet Explorer into standards mode. Quirks mode makes cross-browser compatibility much harder.
- Code for standards first, adjust for IE later. Generally, most browsers behave when using standards compliant code, with IE being the one that is different. Worst case, create a separate style sheet for IE as indicated below.
- Learn CSS. It's a much cleaner, more compatible way of laying out and styling your data. It also keeps the HTML clean.
- Learn the box model, and be aware that IE (especially IE6 in quirks mode) is very broken in this area.
- Learning IDs, Classes, and selectors can help keep the HTML clean and simple.
- Note that support for selectors varies between browsers [:(].
- Try to code what you mean first in the HTML - Let your lists use <ul> for unordered lists, <h1> for headers, etc. Afterwords, make it look correct in the CSS. This makes it easy for you to remember what your code does if you come back to it later.
- Note that navigation bars can be considered lists, and should therefore use the <ul> element. There are some good tutorials online that can help make good-looking navigation bars using CSS.
- If IE requires different styles, use a conditional comment and place them in a different style sheet. Do not attempt to use hacks (sometimes called "filters") to detect browsers.
- Using hacks is an easy way to create a lot of headaches and break your code when a new browser is released.
- A lot of web page authors found themselves completely rewriting their code when IE7 came out and broke their hacks! Pages created without hacks needed little to no modification for new browsers.
- This is another reason to learn CSS: If you use CSS and conditional comments for IE6 and IE7, then overcoming the differences between the browsers is a lot easier.
- Using tables for layout is discouraged, as they require a lot of HTML to work and they make the code messy - and very difficult to maintain. CSS can be used most of the time for layout, by taking <div>s and floating them. There are a few tutotials for tableless layouts floating around the web.
Actually, if you want more hands on help, you can show me an example of what you want the interface to look like, and I could come up with the HTML and CSS to match it. I can guarantee it'll work in IE7, Firefox, and Opera. I can guarantee it'll work in IE6 if I can find somebody who has IE6 to help with the testing.
If you want AJAX support, though, you may need more help from somebody else - AJAX is on my TODO list to learn, but I haven't gotten around to learning it yet.
<p>I hope I'm posting this in the right place, and I hope David reads the forums fairly often.</p>
<p>[quote]For a long time now, I have been saying that incorporating
a native webmail interface into Mercury is my highest priority,
and this is still true. Unfortunately, the process has proven
to be much less simple than I thought (and I was not being
over-optimistic). The problem is not the mail management,
but the HTML: designing a usable, attractive HTML-based
interface that will work with a wide range of browsers is
staggeringly complicated, and frankly, it's beyond the scope
of my personal skill set at this point.[/quote]</p>
<p>&nbsp;Just saw that when reading about the new&nbsp; Mercury. I've done a lot of work with HTML and getting it to work across many browsers, and may be able to help.</p>
<p>&nbsp;
First, some tips:</p>
<ul>
<li>Put Internet Explorer into standards mode. <a href="http://www.quirksmode.org/css/quirksmode.html" title="Quirks Mode" mce_href="http://www.quirksmode.org/css/quirksmode.html">Quirks mode</a> makes cross-browser compatibility much harder.</li>
<li>Code for standards first, adjust for IE later. Generally, most browsers behave when using standards compliant code, with IE being the one that is different. Worst case, create a separate style sheet for IE as indicated below.
</li>
<li>Learn CSS. It's a much cleaner, more compatible way of laying out and styling your data. It also keeps the HTML clean.</li>
<ul>
<li>Learn the box model, and be aware that IE (especially IE6 in quirks mode) is very broken in this area.</li>
<li>Learning IDs, Classes, and selectors can help keep the HTML clean and simple.</li>
<li>Note that support for selectors varies between browsers [:(].</li>
</ul>
<li>Try to code what you mean first in the HTML - Let your lists use &lt;ul&gt; for unordered lists, &lt;h1&gt; for headers, etc. Afterwords, make it look correct in the CSS. This makes it easy for you to remember what your code does if you come back to it later.</li>
<ul>
<li>Note that navigation bars can be considered lists, and should therefore use the &lt;ul&gt; element. There are some <a href="http://css.maxdesign.com.au/index.htm" mce_href="http://css.maxdesign.com.au/index.htm">good tutorials</a> online that can help make good-looking navigation bars using CSS.
</li>
</ul>
<li>If IE requires different styles, use a <a href="http://msdn2.microsoft.com/en-us/library/ms537512.aspx" mce_href="http://msdn2.microsoft.com/en-us/library/ms537512.aspx">conditional comment</a> and place them in a different style sheet. Do <span style="font-style: italic;">not</span> attempt to use hacks (sometimes called "filters") to detect browsers.</li>
<ul>
<li>Using hacks is an easy way to create a lot of headaches and break your code when a new browser is released.</li>
<li>A <span style="font-style: italic;">lot</span> of web page authors found themselves completely rewriting their code when IE7 came out and broke their hacks! Pages created without hacks needed little to no modification for new browsers.</li>
<li>This is another reason to learn CSS: If you use CSS and conditional comments for IE6 and IE7, then overcoming the differences between the browsers is a lot easier.</li>
</ul>
<li>Using tables for layout is discouraged, as they require a lot of HTML to work and they make the code messy - and very difficult to maintain. CSS can be used most of the time for layout, by taking &lt;div&gt;s and floating them. There are a few tutotials for tableless layouts floating around the web.
</li>
</ul>
<p>Actually, if you want more hands on help, you can show me an example of what you want the interface to look like, and I could come up with the HTML and CSS to match it. I can guarantee it'll work in IE7, Firefox, and Opera. I can guarantee it'll work in IE6 if I can find somebody who has IE6 to help with the testing.</p>
<p>&nbsp;If you want AJAX support, though, you may need more help from somebody else - AJAX is on my TODO list to learn, but I haven't gotten around to learning it yet.
&nbsp;</p>
