View Full Version : Absolute Positioning

05-10-2007, 08:03 PM
REF: http://www.moderntimes.com/tmp/

Why would absolute positioning be different across platforms? Example, I have a page that displays properly in Mac browsers, FF, Opera, Safari, and even fairly well in IE5 for the Mac. But in FF, and IE7 for Windows the logo which is absolute positioned does not show up at all?


05-10-2007, 08:35 PM
Iím looking at your page in Firefox 2 on a Mac and donít see any logo. Do you mean the ďMidnight RambleĒ text? I can see it when I remove the left margin, though.

For one you shouldnít use an empty element (<div id="logo"></div>) in your HTML. This is far from semantic because it doesnít have any meaning. Use the elements youíve got and put your logo there. For example Iím missing a page title when I switch off stylesÖ This would be an element (h1 in the header) that would have a meaning and that you can use to place your logo.

Oh and I just found out why your logo isnít showing up: Itís behind the page. Maybe a z-index of 2 will help?

05-10-2007, 08:57 PM
Thanks Stephan,

The z-index displays the 'logo' all right, but the positioning in the Windows browsers is all over the place? I'll probably have to get rid of the 'logo' altogether, as I have not a clue how to specifically doctor the code for each of the individual Windows browsers.

However, I would like to know about the empty element? You don't mean, do you, that I should put the h1 in the header before the <body> do you?



05-10-2007, 09:35 PM
OK, you convinced me to have a closer look at your page. :)

#1) No, I donít want you to put any element into the head section of your document. Usually websites have a header where the logo, title, and navigation reside. Thatís a section you specify by using a div (<div id="header"></div>). That section is within your wrapper at the top, before the actual content starts. And in that header goes the h1 and a sub title or whatever. So if a user canít view the page with styles (e.g. screen readers or mobile phones) he/she will at least know right away what the page is about. Switch off your styles in Firefox and look at it. With no title (primary headline) it doesnít mak much sense.
The next step would be putting the links in a list. But I wonít cover this for now as this is about the logo.

#2) Your problem shows how tricky absolute positioning is. If you use it you should also use the values left, right, top, bottom (e.g. left: 20px;) to position it explicitly because, as you see, just with margins it screws up in different browsers (because they probably interpret the default (starting) position differently).

The important thing is that the absolute position is based on the position of the parent element if that one is relatively positioned. Since your logo div only has the body as parent it would be positioned according to the position of that one (or the html element since the body has no relative or absolute position). That means left: 0; will position that div at the absolute left of the viewport. Your wrapper and outer div are positioned relative so if you put the logo div inside one of these you will see that left: 0; now places the logo at the left edge of the parent. Then you can use left: -20px; to move it further to the left.

In a nutshell:

Place the logo div inside the wrapper.
Apply top and left properties to the logo div.
Enjoy the beauty in differnt browsers. :)

Important reading: http://brainstormsandraves.com/articles/semantics/structure/

And by the way: Thatís an interesting topic on that site. :)

05-10-2007, 10:14 PM

I hate to keep bothering you, but there's so much I don't know! How do you keep the <header> text from displaying on your page? I added a <header>, but the text shows up. It works great when I turn off the Styles. :confused:

05-10-2007, 11:04 PM
Stephen more. . .

Thanks for the link, I did not see it earlier, too frustrated, and thanks for the complement about the topic of my page. :)

Who were your influences? I like JJ, and Kai, George Bohannon, especially his work with Chico Hamilton, and Bob Brookmeyer when he was with Gerry Mulligan.

Thanks again,


05-10-2007, 11:50 PM
Hey Michael,

I canít believe you know all those trombonists? :) Yeah, Kai and J.J. are kind of an influence for any jazz trombone player. Iím really into Carl Fontana and Frank Rosolino (although they arenít well known to the average people), and Bob Brookmeyer is another one of the guys you canít ignore. I also like him for his compositions. And I actually coded his website. :D (well, before you complain: that was in the very beginning of my web career when I used to code the table based way.)

Now back to your problem: Youíve implemented the code correctly and now the structure makes sense: Headline/Page topic on top, content below. To hide the regular text now you would use one of the numerous CSS image relpacement (http://www.mezzoblue.com/tests/revised-image-replacement/) techniques. Iím usually applying text-indent: -999em; to the h1.

05-11-2007, 12:09 AM
Your right! I should have remembered the -999em; trick. You've been a great help, and I do appreciate it. :thumbsup:

More on the good stuff, I love Frank Rosolino. At one time I think he and Carl Fontana were joined by a third trombone player in a small group, very unusual? I have a great collection of West Coast Jazz, I love Jazz, real Jazz! Where can I sample some of your work?


05-11-2007, 01:38 AM
As much as Iíd love to discuss this in public Iím gonna keep the off-topic stuff out of here and send you a PM. If anybody would like to join this discussion PM me and Iíll open a new thread in the active member lounge - or open your own new topic. ;)

05-11-2007, 02:00 AM
Iím usually applying text-indent: -999em; to the h1.One problem with this is that it doesnít work for sighted users when images fail to load. You end up not having a title display in such case. I think a better approach would be to use an actual image with alternative text:

<h1><img alt="Midnight Ramble" width="74" height="355" src="image/bg.png"></h1>Now, people that arenít visually impaired still get header information in the absence of an image.

If interested, you can check this example (http://www.jsgp.us/demos/CF113809.html) for how Iíd say a header image should degrade gracefully. If you have the Firefox Web Developer extension, try using ďReplace Images With Alt AttributesĒ on the ďImagesĒ menu.

05-11-2007, 02:12 AM
One problem with this is that it doesnít work for sighted users when images fail to load.

Yes I know, all techniques have a drawback. The image with alt text works well but with such an image (vertical text) it would look kinda strange without styles but with images on.
Itís a matter of choice/preference, I guess.

05-11-2007, 02:49 AM
it would look kinda strange without styles but with images on.The stylishness of a document without CSS applied shouldnít matter. Itís not like the header, as an image, would be unreadable either.

05-11-2007, 03:03 AM
One problem with this is that it doesnít work for sighted users when images fail to load. You end up not having a title display in such case. I think a better approach would be to use an actual image with alternative text.
yeah, I think you are right. Sacrificing accessibility should be a serious concern.

Another, perhaps minor, drawback is that text-indent: -999em may push the left edge of the outline border to the left by 999em. At least this is the case for Firefox. When this technique is used for links, this may mean that when a link is focused or clicked on, one sees the dotted outline extend all the way to the left edge of the viewport and not surrounding the border of the element.