css layout - mac IE

[Robert Koberg <ro...@koberg.com>]

Hi,

I was a bit short the other day with my reply on fixing the CSS layout at
forrest.iguanacharlie.com.

The fix is to not use 'em' for sizes in CSS. Use '%' and multiply the 'em'
values by 100.

Also, on usability, the left column nav is an accepted layout. But it is
accepted because it has become common. A right column nav is better for western
readers because the left column starts the content - easier on the eyes to
read - better usability.

thank you for your time :)
-Rob

p.s. amazing job! on getting all this together, Jeff.

RE: css layout - mac IE

[Robert Koberg <ro...@koberg.com>]

Hey again,

I just remembered about <br clear="all">. Everything seems to work (I just
grabbed the html source & css) if you just simply stick the <br clear=all> under
the form containing the banner.

best,
-Rob

>> >
> > On the Mac IE 5 front, the oreillynet.com article -- specifically the
> > fake comment endings -- has been my game plan.  For some strange reason,
> > it's quite difficult to debug Mac rendering issues when you don't own a
> > Mac  ;-).  Unfortunately I haven't had access to my friends' Macs long
> > enough to fix the problems yet.  :(
> >
> > - Miles
> >
> >
>
>

RE: css layout - mac IE

[Robert Koberg <ro...@koberg.com>]

Hi Miles,

I just had a closer look at the layout/css. The problem is in the #search
defintition. If I comment out float:right then the content lays out properly in
mac IE. So if you use the techniques from the oreilly article you should be
fine. Perhaps something like:

.inline {disply:inline}

<div id="mainheader">
<!-- style attr for example only -->
  <div id="groupLogoCol" class="inline">
  <a id="grouplogolink" href="http://xml.apache.org/"><img
     id="grouplogo" src="images/group-logo.gif"
     width="220" height="65" alt="Group Logo"/></a>
  <span class="textonly"> - </span>
  </div>
  <div id="projectLogoCol" class="inline">
  <a id="projectlogolink" href="http://xml.apache.org/"><img
     id="projectlogo" src="images/project-logo.gif"
     width="220" height="65" alt="Project Logo"/></a>
  <span class="textonly"> - </span>
  </div>
  <div id="searchCol" class="inline">
  <div id="search">
    <div class="input"><input class="query" name="as_q" type="text"/> <input
type="submit" value="Search"/></div>
    <input type="hidden" name="as_sitesearch" value="xml.apache.org"/>
    <div class="label">the Apache XML site</div>
  </div>
  </div>
</div>

if you need to check your tweaks, I will be here working most of the day.

Sorry about the em red-herring...

best,
-Rob

> -----Original Message-----
> From: Miles Elam [mailto:miles@geekspeak.org]
> Sent: Saturday, November 16, 2002 7:01 PM
> To: forrest-dev@xml.apache.org
> Subject: Re: css layout - mac IE
>
>
> Robert Koberg wrote:
>
> >The fix is to not use 'em' for sizes in CSS. Use '%' and multiply the 'em'
> >values by 100.
> >
> The font values were already specified in percentages.  The ems were for
> nav widths, content margins, etc.  Percentage widths don't really apply
> in this case unfortunately.  What may end up happening is a Mac version
> that isn't quite so resilient to font sizing or with some noticeable
> layout differences.
>
> >Also, on usability, the left column nav is an accepted layout. But it is
> >accepted because it has become common. A right column nav is better
> for western
> >readers because the left column starts the content - easier on the eyes to
> >read - better usability.
> >
> How's this?
>     http://forrest.iguanacharlie.com/
>
> In Mozilla or newer iterations of Netscape, select "View"->"Use
> Style"->"Nav on Right"
>
> For all other browsers, go to:
>     http://forrest.iguanacharlie.com/rightnav.html
>
> They are the same XHTML.  Just different CSS.  I honestly have no
> opinion on the topic, but here are the candidates.
>
> --------------
>
> On the Mac IE 5 front, the oreillynet.com article -- specifically the
> fake comment endings -- has been my game plan.  For some strange reason,
> it's quite difficult to debug Mac rendering issues when you don't own a
> Mac  ;-).  Unfortunately I haven't had access to my friends' Macs long
> enough to fix the problems yet.  :(
>
> - Miles
>
>

Re: css layout - mac IE

[Miles Elam <mi...@geekspeak.org>]

Robert Koberg wrote:

>The fix is to not use 'em' for sizes in CSS. Use '%' and multiply the 'em'
>values by 100.
>
The font values were already specified in percentages.  The ems were for 
nav widths, content margins, etc.  Percentage widths don't really apply 
in this case unfortunately.  What may end up happening is a Mac version 
that isn't quite so resilient to font sizing or with some noticeable 
layout differences.

>Also, on usability, the left column nav is an accepted layout. But it is
>accepted because it has become common. A right column nav is better for western
>readers because the left column starts the content - easier on the eyes to
>read - better usability.
>
How's this?
    http://forrest.iguanacharlie.com/

In Mozilla or newer iterations of Netscape, select "View"->"Use 
Style"->"Nav on Right"

For all other browsers, go to:
    http://forrest.iguanacharlie.com/rightnav.html

They are the same XHTML.  Just different CSS.  I honestly have no 
opinion on the topic, but here are the candidates.

--------------

On the Mac IE 5 front, the oreillynet.com article -- specifically the 
fake comment endings -- has been my game plan.  For some strange reason, 
it's quite difficult to debug Mac rendering issues when you don't own a 
Mac  ;-).  Unfortunately I haven't had access to my friends' Macs long 
enough to fix the problems yet.  :(

- Miles

RE: css layout - mac IE

[Robert Koberg <ro...@koberg.com>]

Hi again,

Loading the images without sizes a pixel shift when then are download. Perhaps
go with common entities? Or add sizes to avoid the shift.

best,
-Rob