473,224 Members | 1,736 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

Problems with position: fixed; layout

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?

--
http://www.ericlindsay.com
Dec 27 '05 #1
2 2374
Eric Lindsay wrote:

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/>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 27 '05 #2
In article <M4******************************@giganews.com>,
Jim Moe <jm***************@sohnen-moe.com> wrote:
Eric Lindsay wrote:

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.


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.

--
http://www.ericlindsay.com
Dec 27 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: CJM | last post by:
I'm developing a site for a charity which I am aiming to make standards-compliant, accessible and cross-browser compatible. I'm doing OK so far and have the workings of a respectable site, but I...
7
by: Matt Kruse | last post by:
This is a typical layout, but I have specific requirements. I'm trying to figure out a) if it's possible to meet the requirements and b) if so, how. +---------------+ | header |...
3
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...
12
by: news | last post by:
I'm having a heck of a time, and I'm hoping someone can take a quick look and see if they can recognize what might be the problem and point me the right direction. My blog page:...
7
by: Patrick.O.Ige | last post by:
Can i use Frameset in ASP.NET?What are other options I have a question :- I have an asp.net page and i'm using TreeView control as links The links are on the left side of the page inside a iframe!...
3
by: Ali Sahin | last post by:
Hi there, I'd like to transform a XML-File to PDF. The XML-File ist build like followed: <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <?xml-stylesheet type="text/xsl"...
19
by: derelicten | last post by:
hello , I have an issue positionating some pics I want to anchor to an existing table cell but I cant just place regular position on the cell because the background is fixed height and the set of...
2
by: soulmach | last post by:
Hello forum friends. I performed a search on this topic, but I couldn't find anything useful. I wasn't really sure what to search. First I'll state what I am trying to do. I recently agreed to...
3
by: KimberlyM | last post by:
This has been driving me crazy. I hope someone can help. The site displays perfectly in FF but all div's do not show in IE. Please help me find the problem! Thanks! Here is my css. ...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.