[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS problem (IE, Safari)

Posted on 2009-02-18
3
Medium Priority
?
1,292 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:Josh Fialkoff
  • 2
3 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 23674494
Can you post a live lnk for us?
0
 

Author Comment

by:Josh Fialkoff
ID: 23674507
Yes, here it is.

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

Thanks,
Josh
0
 

Accepted Solution

by:
Josh Fialkoff earned 0 total points
ID: 23674598
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Suggested Courses
Course of the Month19 days, 18 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question