Problems with position: fixed; layout

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Eric Lindsay - 27 Dec 2005 06:58 GMT

I have been trying to do a CSS liquid layout imitating a frame, using
position: fixed for header, footer, and side navigation, and a fixed
background image. Page is valid HTML 4.01 Strict, and is at
http://www.ericlindsay.com/palmtop/palmnote.htm and the CSS is valid
(with colour warnings but no errors) at
http://www.ericlindsay.com/palmtop/palmtoptest.css
All the other pages in that directory use my four year old stylesheet
(so don't worry about them).

I am having some problems with Firefox 1.0.7 on Macintosh. In the
header and the footer, I am trying to confine the material to one line.
This works with Safari and Opera (Macintosh). However Firefox shows the
material at the right hand side as somewhat lower than the first
material in the header and footer. I can't really see what I am doing
wrong. Thanks.

In the header, the links are in an ordered list, and use display:
inline. The item to the right hand side is one of the list items pulled
out of the normal list position with a float: right The only unusual
thing is that I am displaying my pipe characters, and my angle brackets
from CSS with #header li:before { }

In the footer the bread crumbs are an ol, and the other links are in the
address tag. I am pretty sure they stayed in line when I had the bread
crumbs in the header div and didn't use a list.

P.S. I know this won't work in IE6 and earlier. Plan to worry about an
IE stylesheet after I get standards based ones working. However if
anyone is running an IE7 beta and cares to check? Or is anyone is using
a PocketPC browser?

Signature

http://www.ericlindsay.com

Reply to this Message

Jim Moe - 27 Dec 2005 07:30 GMT

> I am having some problems with Firefox 1.0.7 on Macintosh. In the
> header and the footer, I am trying to confine the material to one line.
> This works with Safari and Opera (Macintosh). However Firefox shows the
> material at the right hand side as somewhat lower than the first
> material in the header and footer. I can't really see what I am doing
> wrong. Thanks.

You are welcome.

In the header one of the list items, "palmtop," has an ID of "folder"
which is floated right. You must list that one separately and physically
place it before the <ol>.
The same applies to <address> in the footer.

"Web Developer" is a very useful extension for Firefox and Mozilla. One
of its many features is "Outline Block Level Elements."
<http://chrispederick.com/work/webdeveloper/>

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Eric Lindsay - 27 Dec 2005 11:39 GMT

> > I am having some problems with Firefox 1.0.7 on Macintosh. In the
> > header and the footer, I am trying to confine the material to one line.
[quoted text clipped - 9 lines]
> place it before the <ol>.
> The same applies to <address> in the footer.

Thanks Jim,

Well, I guess you are right about that being why Firefox is treating the
Folder and the address as being a separate block level element. However
as I am declaring Folder and Address (and their containers) as display:
inline; I think I should get the presentation I wanted. Doesn't exactly
explain why both Safari and Opera picked up on display: inline; and
displayed the way I hoped.

However the trouble is that I did the HTML that way deliberately, in an
attempt to have the site follow a logical structure, rather than lay out
the HTML in presentational order, which would be much easier to style.

You probably noticed my HTML is laid out with main content, navigation,
header, footer, and not the more visually oriented header, main,
navigation, footer. That is mostly for search engine positioning, and
also to get content up front for anyone using accessibility technology.

The current folder is part of the list of site folders, therefore
logically it goes in order in the list of site folders. That list
should be a constant through the entire site. The whole idea of using
an ID on the current location was so I could have a content management
system add an ID to whatever is the current folder, and then have the
CSS pull it out of the regular presentation order.

Likewise, I could just avoid using Address, however it seems to me that
the semantics of the page indicate that Contact details should be in
Address, and not just in a Footer div (OK, including the link to the
problems page - when I write it - could be a straight error on my part).

> "Web Developer" is a very useful extension for Firefox and Mozilla. One
> of its many features is "Outline Block Level Elements."

D'oh! I really blew that. I have the Web Developer extension, but
don't use Firefox very often. I was looking at Display Topographic
Information (which I find hard to see), and totally forgot to look in
Outline. Again, notice that Folder isn't a separate division, although
it has been pulled out of the list block. I don't believe it should be
pulled out of the list block.

I would guess I could get the presentation lined up if I were to drop
the idea of using lists for the menus (and just have links inside a
div). However logically they are a list of links, therefore list is
appropriate.

> <http://chrispederick.com/work/webdeveloper/>

It is a great resource. I hadn't really realised how handy Firefox
could be. Thank you for your comments.

Signature

http://www.ericlindsay.com

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2005

Problems with position: fixed; layout