CSS problem (IE, Safari)

Hi,

I have a page which renders correctly in Firefox, but not in IE or Safari.

The CSS is validated.

I'm wondering if you can help solve the box shifting to the right in IE and Safari.

Thanks,
Josh

HTML:
<div id="right-border">
<div id="menu-right">
<!--
<div style="text-align: center; width:360px; height:250px; line-height:250px; margin-left: auto; background: #58585a;"><div id="swf2e9f1">This movie requires Flash Player 9</div></div>
<script type="text/javascript">
	swfobject.embedSWF("/Wordpress/wp-content/uploads/SampleSlides/home_slides.swf", "swf2e9f1", "360", "250", "9.0.0", "", {}, {wmode: "window", menu: "false", quality: "high", bgcolor: "#58585a"}, {});
</script>
-->
			<li class="widget widget_text" id="text-333168321">						<div class="textwidget"/>
		</li>
<!-- change flash movie code http://www.javascriptpost.com/javascript/how-dynamically-change-flash-movie-t11936.html -->
<object height="250" width="360" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="flashMov1">
<param value="/Wordpress/wp-content/galleries/f1.swf" name="movie"/>
<param value="high" name="quality"/>
 
<embed height="250" width="360" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" src="/Wordpress/wp-content/galleries/f1.swf" name="flashMov2"/>
 
</object>
 
<!-- end change movie code -->
</div>
</div>
 
CSS:
acronym, abbr {
cursor : help;
}
blockquote {
border-left : 3px solid #fdba31;
margin-left : 15px;
padding-left : 5px;
}
body {
background : #404041 none repeat-x scroll center top;
color : #ffffff;
font-size : 62.5%;
font-family : 'Lucida Grande', Verdana, Arial, Sans-Serif;
margin : 0 auto;
padding : 0;
text-align : center;
}
body a, a:visited, a:hover, a:visited:hover, a:active {
text-decoration : none;
color : #fdba31;
}
a:visited {
color : #fdba31;
text-decoration : underline;
}
a:hover {
color : #fdba31;
}
a:active {
color : #fdba31;
}
cite {
font-size : 90%;
font-style : normal;
}
h1 {
color : #fdba31;
font-family : arial;
font-size : 14px;
font-weight : normal;
text-transform : uppercase;
}
h2 {
background-color : #b8b9bd;
color : #58585a;
font-size : 13px;
font-weight : normal;
margin : 8px -94px 0 0;
padding : 2px 1px 0 22px;
text-align : center;
text-transform : uppercase;
}
h2 a, h2 a:visited, h2 a:hover, h2 a:visited:hover {
text-decoration : none;
color : #fbf1ea;
}
h3 {
font-size : 120%;
margin-top : 0;
}
img {
padding : 3px;
border : 1px solid #630100;
}
img.alignleft {
float : left;
margin : 3px 3px 3px 0;
}
img.alignright {
float : right;
margin : 0 3px 3px 3px;
}
li {
margin : 0;
padding : 0;
list-style-type : none;
}
ol#comments li p {
font-size : 100%;
}
ul {
margin : 0;
padding : 0;
}
#credit {
color : #333;
font-size : 11px;
width : 868px;
text-align : center;
margin : 0 auto;
padding : 5px 0 5px 0;
clear : both;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:visited:hover {
color : #b5913b;
}
.feedback {
color : #be0000;
text-align : right;
padding-bottom : 15px;
clear : both;
text-transform : lowercase;
}
.feedback a, .feedback a:visited {
color : #be0000;
text-decoration : none;
}
.feedback a:hover, .feedback a:visited:hover {
text-decoration : underline;
}
.meta {
font-size : 0.9em;
}
.meta li, ul.post-meta li {
display : inline;
}
.meta ul {
display : inline;
list-style : none;
margin : 0;
padding : 0;
}
.meta a {
color : #630100;
text-transform : lowercase;
text-decoration : none;
}
.meta a:hover {
color : #630100;
text-transform : lowercase;
text-decoration : underline;
}
.meta {
color : #be0000;
font-weight : normal;
letter-spacing : 0;
}
.storycontent {
font-size : 115%;
margin-top : 20px;
margin-left : 20px;
}
#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
background : #fefefe;
border : 1px solid #630100;
color : #630100;
}
#commentform textarea {
width : 95%;
}
#commentlist li ul {
border-left : 1px solid #ddd;
font-size : 110%;
}
ol#commentlist li {
list-style : decimal;
}
#content {
display : inline;
float : left;
margin : 5px 15px 20px 0;
padding-left : 20px;
text-align : left;
width : 400px;
}
#contentcolumn {
margin-right : 200px;
}
#rightcolumn {
float : left;
width : 200px;
margin-left : -200px;
background : #fde95e;
}
#content ol li {
list-style : decimal;
}
#content ul {
margin-top : 10px;
margin-left : 35px;
}
#content ul li {
list-style-image : none;
}
#content-big {
float : left;
width : 603px;
margin : 5px 15px 20px 0;
padding-left : 8px;
display : inline;
text-align : justify;
border-left : 1px dotted #630100;
}
.post ul li {
list-style-type : square;
padding-top : 2px;
margin-left : 20px;
}
#header {
background : transparent url(images/header.gif) repeat scroll 0 0;
font-family : Verdana;
font-size : 26px;
font-weight : bold;
height : 140px;
margin : 0 auto;
padding : 0;
text-decoration : none;
width : 899px;
}
.header-title {
font-family : Verdana;
color : #fffef9;
font-size : 26px;
padding : 105px 0 0 400px;
text-align : left;
font-weight : bold;
}
.header-title a {
color : #fffef9;
text-decoration : none;
border-bottom : none;
font-weight : bold;
}
.header-title a:hover {
color : #fffef9;
text-decoration : none;
border-bottom : none;
}
.header-description {
color : #fffef9;
font-size : 11px;
padding : 3px 0 0 400px;
text-align : left;
font-weight : normal;
}
#footer {
width : 900px;
height : 20px;
margin-left : auto;
margin-right : auto;
width : 90em;
color : #58585a;
background : #b8b9bd none repeat scroll 0 0;
margin-top : -10px;
border-left : 1px solid #b8b9bd;
border-right : 1px solid #b8b9bd;
}
#footer p {
margin-top : -8px;
color : #58585a;
font-weight : normal;
text-decoration : none;
}
#footer p.left {
color : #b8b9bd;
margin-top : 10px;
text-align : left;
width : 461px;
}
#footer p.right {
color : #b8b9bd;
margin-top : -22px;
text-align : right;
width : 901px;
}
#footer a {
color : #fdba31;
text-decoration : none;
}
#footer a:hover {
color : #630100;
text-decoration : none;
}
#footer a:visited {
color : #630100;
text-decoration : none;
}
#footer a:visited:hover {
color : #630100;
text-decoration : none;
}
#right-border {
display : inline;
float : right;
width : 20px;
background-image : url(http://www.bcradvertising.com/Wordpress/wp-content/themes/Praggio/images/BCR-Right-Gradient.gif);
background-repeat : repeat-y;
}
#menu-right {
display : inline;
float : right;
font-size : 11px;
padding : 5px 83px 19px 25px;
width : 285px;
background-color : #58585a;
margin-right : 25px;
margin-top : 20px;
}
#menu-right a, #menu-right a:visited {
text-transform : lowercase;
text-decoration : none;
color : #58585a;
}
#menu-right a:hover, #menu-right a:visited:hover {
color : #58585a;
text-decoration : none;
text-transform : lowercase;
}
#menu-right ul ul {
padding-bottom : 10px;
margin-left : 13px;
}
#menu-right ul ul li {
list-style-image : url("images/icon.gif");
}
.ad200 {
text-align : center;
margin-bottom : 10px;
}
input#s {
width : 158px;
border : 1px solid #630100;
color : #630100;
}
#background {
width : 100%;
background-color : #404041;
}
#foreground {
background-image : url(http://www.bcradvertising.com/Wordpress/wp-content/themes/Praggio/images/BCR-Left-Gradient.gif);
background-repeat : repeat-y;
background-color : #58585a;
border-left : 1px solid #b8b9bd;
border-right : 1px solid #b8b9bd;
margin-left : auto;
margin-right : auto;
width : 900px;
}
#rap {
width : 900px;
margin : 0 auto;
text-align : left;
}
#searchbutton {
margin-top : 2px;
}
div#main {
width : 100%;
}
div#right {
width : 15%;
background : transparent;
float : right;
border : solid;
border-color : #666666;
border-width : 0 1px 0 0;
text-align : right;
}
div#right a {
display : block;
margin-right : 4px;
}
div#right {
width : 82%;
background : transparent;
float : right;
}
div#right p#para {
margin : 10px;
}

Open in new window

safari-error.png
firefox.png
Josh FialkoffFounder/CEO Asked:
Who is Participating?
 
Josh FialkoffConnect With a Mentor Founder/CEO Author Commented:
Update:

I moved the right-border DIV inside the menu-right DIV and added a margin-right : -395px; to the right-border.

This solved the problem in Safari, but not in IE.

Thanks,
Josh

Here is the relevant CSS:
 
#right-border {
display : inline;
float : right;
width : 20px;
margin-right : -395px;
min-height : 400px;
background-image : url(http://www.bcradvertising.com/Wordpress/wp-content/themes/Praggio/images/BCR-Right-Gradient.gif);
background-repeat : repeat-y;
}
#menu-right {
display : inline;
float : right;
font-size : 11px;
background-color : #58585a;
margin-right : 25px;
margin-top : 20px;
width : 370px;
clear: left;
}
 
Here is the relevant HTML:
<!-- begin sidebar -->
<div id='menu-right'>
<!-- change flash movie code http://www.javascriptpost.com/javascript/how-dynamically-change-flash-movie-t11936.html -->
<object id=flashMov1
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="360" height="250">
<param name="movie" value="/Wordpress/wp-content/galleries/f1.swf">
<param name="quality" value="high">
 
<EMBED name=flashMov2 src="/Wordpress/wp-content/galleries/f1.swf" quality=high
WIDTH="360" HEIGHT="250"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</object>
 
<!-- end change movie code -->
</div>
<div id='right-border'>
</div>
<!-- end sidebar -->

Open in new window

0
 
LZ1Commented:
Can you post a live lnk for us?
0
 
Josh FialkoffFounder/CEO Author Commented:
Yes, here it is.

http://019d900.netsolhost.com/Wordpress/

Thanks,
Josh
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.