Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Safari Behaivor (position bug?)

    I have noticed some very odd Safari behaivor. Usually, when you have a parent element with position:relative and a child position:absolute The child element will align itself to the parent element. However, I have run into a bit of an issue.

    It happens when I have another element, a relative positioned float left next to the element in question.

    Code:
    #main {
    	position:relative;
    	width:785px;
    	margin:35px auto;
    }
    
    #cont {
    	position:relative;
    	width:564px;
    	padding:0 10px;
    	margin:0 auto;
    }
    
    #subnav {
    	position:relative;
    	width:138px;
    	padding:0 5px;
    	margin-right:50px;
    	float:left;
    }
    
    #subnav .top, #cont .top {
    	position:absolute;
    	top:-21px;
    	left:0px;
    }
    
    #subnav .bottom, #cont .bottom {
    	position:absolute;
    	bottom:-21px;
    	left:0px;
    }
    Code:
    <div id="main">
      <div id="subnav">
         <img src="img/sn-top.jpg" class="top" />
         Subnav.
         <img src="img/sn-bot.jpg" class="bottom" />
      </div>
      <div id="cont">
         <img src="img/top.jpg" class="top" />
         Content. The two images are incorrectly positioned ONTOP of #subnav.
         <img src="img/sn-bot.jpg" class="bottom" />
      </div>
    </div>
    Anyone know of a possible solution, or cause of this problem?
    CSS/ HTML simplified for example. Actual page you can see this problem:
    http://www.camdenrose.com/catalog/

    Thanks Much.

    Using Safari v85 (1.0) for MAC OS 10.2.8

  • #2
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Safari 1.0 is crazy... Honest... That bug (and about 50,000 others) were fixed in 1.2.

  • #3
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Giving the absolutely positioned elements a left:192px; I was able to get them to align properly in Safari, but seeing as how I don't know of any CSS comment bugs that target Safari 1.0 only, I was forced to browser sniff for that Safari <= v85 and if #subnav was present (thanks to some clever forward thinking on my part, #subnav is included when necessary by assigning a variable ($subnav) to the location of the include file, then checking if $subnav is set in the header file.

    A little bit mote complicated and dangerous than I would have liked, but it works and does not effect other browsers.

    By the way, if anyone knows of a comment bug/hack that will only effect Safari =< 1.0 It would be greatly apprieciated.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do as it goes - the mixed-case @media hack (or CSS Hack 53c to use Mark Pilgrim's colorful terminology), which used to hide rules from Safari, but now it doesn't:
    Code:
    @media ScReEn {
        property:value;
        }
    I'm not sure if that was fixed in 1.1 or 1.2, but imo you don't need to consider 1.1: Safari comes as an update to the OS, and the version/support split is between OS10.2 and 10.3, so all 1.1 users can easily upgrade; since Safari is the default browser in OSX, I would imagine that most, if not all, have upgraded; or if not, that's because they don't use it. Okay that's not bulletproof logic, but it's a very strong balance of likelihoods.

    (Btw - Opera 7 for Mac is much better to actually use - not noticeably faster as it is when compared with Firefox, but it is more CSS compliant, more advanced in its DOM support, and infinitely more customisable).

    But your original bug only happens when the parent container is floated - if you can find a way of doing without the float on #subnav that would have avoid having to use a hack.
    Last edited by brothercake; 10-06-2004 at 11:15 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately, there really isn't another solution as #content needs to be centered when #subnav is not present, and when #subnav is, their sum width needs to be centered, this works in all other browsers and I can't think of any other solution other than inline style, which defeats the purpose.

    I'm just upset they left Safari for 10.2.8 so broken.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •