SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Chester
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Ridiculously irritating safari bug

    My site looks pretty good on IE and Firefox. I assumed that Safari would, like any upright CSS-compliant browser, read it properly. Unfortunately, as I've learned recently, Safari doesn't get the concept of divs inheriting widths. For instance, you put a div with no width into a div of 300px, and somehow the inner div will pop out to 400px or more.

    I just don't get it. And I don't have a Mac handy, so I'm hoping that the Mac gurus here can help me out with my problems. The site is here - http://workingidea.com/ .

    Thank you.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For instance, you put a div with no width into a div of 300px, and somehow the inner div will pop out to 400px or more.
    I've never had that problem with Safari despite using inherited widths since day 1.
    The width 'inherits' just fine, defaulting to the '100% of the parent element' just as it should.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<title>Untitled</title>
    	<style type="text/css">
    
    	#parent {
    	width: 300px;
    	border: 1px solid #333;
    	}
    
    	#child {
    	height: 400px;
    	border: 1px dashed #999;
    	}
    
    	</style>
    </head>
    <body>
    
    <div id="parent">parent. width: 300px;
    
    	<div id="child">child. no width declared.
    	</div>
    
    </div>
    
    </body>
    </html>
    Your layout does appear to be going wrong in Safari though, but I doubt it's Safari inheritance that's causing the problem.
    I'll take a glimpse at your code later, though I imagine it will be some element within the 'article' divs forcing them to become wider than their 'right' parent div.
    Check padding and margins and also that you haven't explicitly declared width: 100%; *and* a margin (and/or padding) together for the same block element.

    Not sure if the array of hacks you have in your css are helping keep things simple.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Chester
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your layout does appear to be going wrong in Safari though, but I doubt it's Safari inheritance that's causing the problem.
    It might not be, but Safari is the only browser with these problems so far.

    Check padding and margins and also that you haven't explicitly declared width: 100%; *and* a margin (and/or padding) together for the same block element.
    I haven't used percentage widths in any part of the site i can recall.

    Not sure if the array of hacks you have in your css are helping keep things simple.
    Uh, the only hack I used was the simple Box-Model hack, and with a floated layout, it's pretty much essential for things to work in IE.

    I'll try to put together a simple example of how things are going awry.

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems that when I remove the linked color.css from the markup, it appears correctly in Safari.
    color.css doesn't exist at the prescribed url, so maybe Safari's tripping up the dead link.

    So, either make the link point to the right location or remove it.
    Either option should prevent Safari from tripping up.

    Safari's native handling of inherited width is correct, but appears to have become a casualty of a different problem.

    -

    Fwiw, it *is* entirely possible to build a floated layout without having to resort to using the box model hack.
    The layout of my own NPA site (see sig) is built with floated modules and appears consistent x-browser without using the bmh.
    It's just a matter of avoiding the use of width and padding and/or margin on any block elements.

    I do have the bmh in my css, but it's used only as part of an image replacement technique that I use on my headings (which I'm too lazy to change for a better technique).
    It has no bearing on the layout itself.


    Additionally, I recommend that you check the validator report as it's pointed out some unclosed list elements that could well create problems in some browsers.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

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