Safari Position:relative problem
-
I figured it out. I hadn’t specified a width on one of my container div’s. It automatically adjusted in IE6 and Firefox but was cutting off content in Safari, causing div’s to jump to the next line rather than resizing.
__________________________________________
I’m building a custom wordpress theme off of the “blank2r” framework https://www.refueled.net/blank-themes/ …
Anyway I’ve spent many hours getting it to work perfect on IE 6 and Firefox, and in the mean time forgot to check whether it was working in Safari v3.2. Well, it doesn’t. I’m pretty sure this is due to a positioning bug– Safari definitely does not interpret “position:relative” correctly. Can anyone who has had similar issues advise?
Can anyone give me some suggestions based on my CSS alone? I’m running wordpress on my localserver and haven’t uploaded to the web yet.
I will paste first the few div’s in question that are not aligning correctly, then paste the rest of my CSS in its entirety. Thanks alot!
I’m additionally using 960.gs css framework.
newsContent {
min-height:500px;
height:auto !important;
height:500px;
float:left;
position:relative;
left:-70px;
padding-top:10px;
overflow: hidden;
}.newspost {
float:left;
position:relative;
left:32px;
line-height:25px;
margin-bottom:70px;
font-size:16px;
border:1px solid red;
display:inline;
}.postdate{
height:auto;
float:left;
position:relative;
top:-5px;
width:115px;
font-size:18px;
}.entry {
position:relative;
float:left;
/* border:1px solid green;*/
}/*
Theme Name: Blank 2 Column – Right Sidebar
Theme URI: https://refueled.net/blank-themes/
Description: A Blank WordPress theme with left sidebar.
Author: refueled
Author URI: https://refueled.net
version: 2.0
Tags: two-column, widget-ready,blank
*//* basics */
*{margin:0; padding:0;}
body {
background:url(images/bodybg.png) top center no-repeat;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size: 10pt;
margin:20px;
}p {
line-height:2em;
}h1 {font-size: 18pt;}
h2 {font-size: 14pt;}
h3 {font-size: 10pt;}
h4 {font-size: 9pt;}img{ border: none; padding:0; }
img a{border:none;}img.left{ float: left; border: none; padding: 6px 0 0 0; }
img.right{ float: right; border: none; padding: 0 0 0 6px; }blockquote{
border-left:1px solid #A5ABAB;
margin:15px;
padding:0 12px 0 12px;
}code{
font-family:”Courier New”, Courier, monospace;
}/* links */
a{
color:#213629;
text-decoration:none;
}a:hover{text-decoration: underline;}
/* container */
#wrapper {
margin-left:5px;
/* border:1px solid orange;*/
}/* header */
#header {
position:relative;
top:-20px;
right:-46px;
margin-left:-2px;
background:url(images/header.jpg) top center no-repeat;
height: 234px;
/* border:1px solid green;*/
}#header h1{
font:normal 20pt georgia, times;
padding:20px 0 0 16px;
margin:0;
}#header h1 a{color: #404040; text-decoration: none;}
#header h1 a:hover{color: #666; text-decoration: none;}#header h2{
font:normal 10pt georgia, times;
color:#333;
padding: 0 0 0 18px;
margin:0;
}/* main menu */
#menu {
height:67px;
position:relative;
top:-22px;
right:-86px;
margin-left:-2px;
margin-bottom:40px;
background:url(images/menu.jpg) no-repeat center;
font-family:Georgia, “Times New Roman”, Times, serif;overflow:hidden;
/* border:1px solid red;*/
}#menu ul {
margin:0;
padding:0;}
#menu .current_page_item,
#menu .current-cat {
background:url(images/tab.jpg) no-repeat;
}
#menu ul li {
width:140px;
height:57px;float:left;
padding: 0;
margin-right:9px;
position:relative;
top:15px;list-style-type: none;
text-align:center;
font-family: Georgia, serif;
font-style: normal;
font-weight:bold;
letter-spacing: normal;
/* border:1px solid purple;*/}
#menu .cat-item {
margin-left:12px;
}#menu ul li a {
width:140px;
height:57px;
padding-top:10px;
font-size:13pt;
text-align:center;
color: #000;
display:block;
text-decoration:none;
/* border:1px solid orange;*/}
#menu ul li a:hover {
text-decoration:none;}
/* content */
#content {
min-height:500px;
height:auto !important;
height:500px;
position:relative;
left:96px;
float:left;
overflow: hidden;
}#newsContent {
min-height:500px;
height:auto !important;
height:500px;
float:left;
position:relative;
left:-70px;
padding-top:10px;
/* border:1px solid black;*/
overflow: hidden;
}.post {
float:left;
display:inline;
position:relative;
left:18px;
line-height:25px;
margin-bottom:70px;
/* border:1px solid yellow;*/
}.newspost {
float:left;
position:relative;
left:32px;
line-height:25px;
margin-bottom:70px;
/* border:1px solid yellow;*/
font-size:16px;
border:1px solid red;
display:inline;}
.postdate{
height:auto;
float:left;
position:relative;
top:-5px;
width:115px;
font-size:18px;
/* border:1px solid green;*/
}.day {
position:relative;
left:-3px;
}.postdate IMG {
float:right;
}
.pagetitle {
padding-left:20px;
padding-bottom:16px;
margin-top:30px;}
.post h2 {
margin-bottom:4px;
}
.post h2 a{
color: #213629;
text-decoration: none;
}.post h2 a:hover{
color: #777;
text-decoration: none;
}.newspost h3,
.post h2,
.pagetitle {
float:left;
font-size:18pt;
font-weight:bold;
letter-spacing:-1px;
color:#213629;}
.post ul {}
.post li {}
.entry {
position:relative;
float:left;
/* border:1px solid green;*/
}.entry p{margin:12px 0;}
.postmetadata{
clear: both;
background:transparent;
padding:6px;
margin: 20px 0;
}.navigation {
font-size:8pt;
width:100%;
float:left;
margin:0;
padding:0;
overflow:hidden;
}.alignleft a{float:left; margin:25px 0;}
.alignright a{float:right; margin:25px 0;}/* sidebar */
#sidebar {
font-family: verdana, arial, tahoma;
font-size:8pt;
width:190px;
float:right;
margin:0;
padding: 0;
border-left: 1px solid #ddd;
}#sidebar h2{
font:normal 11pt arial, georgia, times;
color: #000;
margin: 0;
padding: 0;
}#sidebar label{
font:normal 11pt arial, georgia, times;
color: #000;
margin: 0;
padding: 0;
}#sidebar p {margin:0; padding: 0 6px 0 12px;}
#sidebar img {padding: 0; margin: 0;}
#sidebar ul {
margin:12px;
padding:0;
}#sidebar ul li {
margin: 0;
padding: 0;
line-height: 14pt;
list-style-type: none;
}#sidebar ul ul {
margin:14px 0;
padding:0;
}#sidebar ul ul li {
list-style-type: none;
}#sidebar ul ul ul{
margin: 0;
padding: 0;
}#sidebar ul ul ul li{
padding: 0 0 0 15px;
list-style-type: square;
color: #898989;
}/* comments */
#commentform{
background:#fff;
margin:0;
padding:0;
}#commentform p{
color: #000;
}#commentform a{color: #000; text-decoration: none; border-bottom: 1px dotted #465D71;line-height: 14pt;}
#commentform h3{
font-family: georgia, times, verdana;
font-size: 10pt;
font-weight: 300;
color: #000;
margin:0;
padding:0;
}#comment{
width:80%;
}#author, #email, #url, #comment, #submit{
background: #fff;
font-family: verdana, arial, times;
font-size: 8pt;
margin:5px 5px 0 0;
padding:0;
border: 1px solid #000;
}#submit{margin:5px 5px 0 0;}
#comments{margin:0; padding:0}
ol.commentlist {list-style-type: none; margin:0; padding:0;}
.avatar{float:left; margin:0 12px 0 0;}
ol.commentlist li {
background: #fff;
margin:10px 0;
padding:5px 0 5px 10px;
list-style-type:none;
}ol.commentlist li.alt {background: #eee;}
ol.commentlist li p {margin: 6px 0 6px 0; padding: 0 12px 0 0; line-height: 14pt;}ol.commentlist a {color:#000;}
cite {
font-family: arial, verdana, tahoma;
font-size: 9pt;
font-weight: bold;
font-style: normal;
}cite a{color: #000; text-decoration: none; border-bottom: 1px dotted #465D71;}
/* search */
#searchform{
padding:0;
margin:14px 0;
}#searchform input#s{
margin:0;
padding:2px;
border:1px solid #000;
}#searchform input#searchsubmit{
border:none;
background:#333;
color:#fff;
text-transform:lowercase;
}/* misc */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}.alignright {
float: right;
}.alignleft {
float: left
}.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}/* footer */
#footer {
clear: both;
width: 100%;
}#footer p{padding:14px 0;margin: 0; color: #000; text-align:center;}
#footer a{color: #BCBCBC;text-decoration: none;}
#footer a:hover{color: #5D5D5D;text-decoration: underline;}
- The topic ‘Safari Position:relative problem’ is closed to new replies.