Entry

Mar02

Bookmark Post - or Relative Positioning in Safari

Just a small little post to bookmark a page - I need to get to it from work.

Multiple IEs in one computer

Actually, there was one more site that I needed to get to - and spent a great amount of productive time looking for it:

Anybrowser.com

When I come back home, I might add a little more comments to this post

Later additions…

Anyways, I have a certain redesign task at work. A couple of the pages are a little bit of a mess and in an effort to try to move the site to a standards base more dynamic system were doing changes here there. Regardless, I was coding away all morning, checking my css in my favorite browser - firefox - and my second least favorite - ie - when I was just about done with that certain page. It was time to check out how the concotion would look like on Safari and IE 5 for mac (we have an iMac for such a thing, though it really has a tough time running OS X). I was actually surprised how well the page came up in both browsers, most of the information was there. Just a couple of easy fixes mostly for IE 5 for Mac.

Actually, what was really surprising is how the page had come out in Safari. I had actually thought it would be as good as my trusty firefox. But, it wasn’t the case. It took me a while to figure out how to fix the problem because to my mind, there shouldn’t have been one.

In trying to set up format that had what looked like three columns with something akin to the following:

/* set a new position scheme */
.container{
     position:relative
}
/* image that will look like left col */
.container img.leftcol{
     position:absolute;
     top:0px;
     left:0px;
}
/* content goes in the middle */
.container .contentcol{
     margin:0px 0px 0px 200px;
}
/* stuff for right col not important */

This worked alright in all browsers. The container rendered with an image on the left, followed by a column of content and another column after that. Except, Safari refused to see that layout for me - it wanted to put all the images at the top left of the page, instead of the top left of the container. I was perplexed, and that lead me to a search that took some of my time.

One of the things that almost all websites say about absolute position in css, is that it’s absolute in respect to its parent element. But what those websites fail to mention, and what even the CSS docs fail to mention, is what really is the parent element. The parent element can be the page, this is the top parent element in respect to positioning. The parent element in positioning is not the actual parent element, like in the case below.

<div class="parent">
     <div class="child"></div>
</div>

The parent element in CSS positioning is just the first parent that has its positioning set. I usually do this by setting position to relative as this works well in firefox and IE. This apperantly doesn’t work that well in Safari. But since the parent element is only decided if position is set, it doesn’t matter what type of positioning (other then static). I changed it to absolute, Safari seemed to like that.

Of course, it wasn’t that easy, firefox prefered the relative positioning, and so did IE. So there was a little more fudging to with CSS Hacks. Which are probably more interesting then just my single note on how Safari doesn’t like relative positioning.

March 2, 2005 01:44 PM HTML and CSS

Comments

Leave a comment of your own

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

Use of HTML for comments is not available.

In an effort to combat spam, you will be able to post your comment after you preview.





Powered by Movable Type 3.2 Creative Commons License: Some Rights Reserved © 2000-2005

Site feeds. Hofully valid XHTML and CSS. No kitties were harmed in the making of this website.