CSS Drive forums | Safari breaking with multiple column layout!

Safari breaking with multiple column layout!

worked

Posted: 02 February 2007 03:35 PM

[ Ignore ]

Newbie

Total Posts: 2

Joined 2007-02-02

Hey Forum- Question for you.

I’m developing a muti-column layout and for some reason Safari 2 breaks (text no longer wraps in left sidebar) when using CSS. No issues with any other browser on any platform (minus IE5 MAC/Windows which we all know bites).

Please take a look at this very basic example:

http://www.work-ed.com/multicolumn/column_study_withoutpadding.html

Any suggestions would be greatly appreciated! THANKS!

Here’s the code:

<html>
<head>
<title>HELP!</title>
<style type="text/css">




#wrapper {
    height: 1000px;
    width: 800px;
}

#sidebar {
    background-color: #ECECEC;
    height: 100px;
    width: 250px;
    margin: 0px;
    padding: 10px;
    border: 0px;
    position: absolute;
    max-width: 250px;
}

#frame_nav {
    position: absolute;
    background-color: #CCC;
    height: 900px;
    width: 250px;
    margin-top: 100px;
    padding: 10px;
    border: 0px;
    max-width: 250px;
}

#content {
    position: relative;
    float: right;
    background-color: #999;
    margin: 0px;
    height: 1000px;
    width: 550px;
    padding: 10px;
    border: 0px;
    max-width: 550px;
}


/* this allows zilla to render boxs like IE. (padding applied to inside of box)*/
div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>

<div id="wrapper">
  <div id="sidebar">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</div> 
  <!--sidebarLeft-->
  <div id="frame_nav">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</div> 
  <!--frame_nav-->
  <div id="content">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</div>
</div> <!--wrapper-->

</body>
</html> 

Profile

worked

Posted: 05 March 2007 04:39 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 2

Joined 2007-02-02

If anyone is interested, I fixed the issue by wrapping each of the frames in seperate div tags. This allows the “blank” div tag to controll the padding and border for each of my frames. Hence fixing the wrap issue for Safari and every other browser. Everywhere /* this hack forces Safari to play nice (box-model padding)*/ is used, is the fix.

body {
    background-color: #FFFFFF;
    background-image:  url(/rotate/bg_images/rotate.php);
    background-repeat: repeat;
    margin-top: 100px;
    margin-left: 30px;

}

#logo {
    margin: 0px;
    padding: 0px;
    border: 0px;
    spacing: 0px;
    position: absolute;
    visibility: visible;
    z-index: 10;
    left: 70px;
    top: 7px;
    
}

#header {
    background-color: #999;
    margin: 0px;
    height: 100px;
    width: 800px;
    padding: 0px;
    border: 0px;
    filter: alpha(opacity=60); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
    -moz-opacity: 0.60;
    opacity: 0.6;
}

#wrapper {
    height: 1000px;
    width: 800px;
}

/* this hack forces Safari to play nice (box-model padding)*/
#wrapper div {
    padding: 0px;
    border: 0px;
}


/* not used */
#sidebarRight {
    float: right;
    background-color: #CECECE;
    height: 800px;
    width: 100px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    position: relative;
    
}

#sidebar {
    background-color: #CECECE;
    height: 100px;
    width: 250px;
    margin: 0px;
    position: absolute;
    
}

/* this hack forces Safari to play nice (box-model padding)*/
#sidebar div {
    padding: 0px;
    border: 0px;
}


#frame_nav {
    position: absolute;
    height: 900px;
    width: 250px;
    margin-top: 100px;

}

/* this hack forces Safari to play nice (box-model padding)*/
#frame_nav div {
    padding: 0px;
    border: 0px;

}

#content {
    float: right;
    margin: 0px;
    height: 1000px;
    width: 550px;
    border: 0px;
    background-color: #999;
    position: relative;

}

/* this hack forces Safari to play nice (box-model padding)*/
#content div {
    padding: 10px;
    border: 0px;

}


#footer {
    background-color: #999;
    margin: 0px;
    height: 50px;
    width: 800px;
    padding: 0px;
    border: 0px;
    filter: alpha(opacity=60); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
    -moz-opacity: 0.60;
    opacity: 0.6;

}

div {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} 

Profile

‹‹ vertical centre problem div 100% height issue ››