Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Relative move of sidebar not working in Firefox (Works in IE8) (http://forum.bytesforall.com/showthread.php?t=11605)

flieg Dec 8, 2010 03:07 PM

Relative move of sidebar not working in Firefox (Works in IE8)
 
Atahualpa 3.4.9
WP 3.0.2
site page showing problem: http://charleft.net/archives/41

I have been trying for some time to get an effect of full-height sidebars around the header image, and started my modifying the sidebars to be positioned absolute (together with their backgrounds). This looked fine in Firefox, but in IE8 for some reason it caused the main body to disappear under the left sidebar (and be only 200 px wide).

So I tried positioning the left sidebar with position: relative; top -250px; in ATO > Style and configure sidebars.

This now gives exactly the effect that I wanted when I view with IE8, but when I view with Firefox the sidebar is NOT moved up 250 px (checked with Firebug). What I desire, of course, is to have it look as close the the same as possible in both browsers.

Note that the right sidebar has different coding than the left... it is similar to the coding I had for the left when it looked correct in Firefox.


Code for the styling is given below:
Left:
Quote:

padding-right: 10px;
padding-left: 10px;
padding-top: 300px;
width: 200px;
height: 1000px;
position:relative;
top: -250px;
z-index:2;
background: #ddd;
background-image: url(http://charleft.net/wp-content/theme...debar_left.jpg) ;
background-repeat: no-repeat;
background-position: 7.5% 0%;
background-attachment:fixed;
and Right:
Quote:

padding-right: 10px;
padding-left: 10px;
padding-top: 300px;
z-index:2;

width: 200px;
height: 1000px;
background: #ddd;
position:absolute;
right: 7.5%;
top:0;
background-image: url(http://charleft.net/wp-content/theme...ebar_right.jpg) ;
background-repeat: no-repeat;
background-position: 92.5% 0%;
background-attachment:fixed;
(P.S. I have tried using the "opacity" divs of the header to get the same effect. They work fine in Firefox, but cannot be convinced to show the widgets in the sidebar when using IE8, even though FF works fine.)

lmilesw Dec 8, 2010 06:12 PM

You could put a three celled widget area in the Configure Header Area box with the widths of the outside widget areas the same as the sidebars.

flieg Dec 8, 2010 06:25 PM

Thanks --

I presume you mean your answer to be used in conjunction with using the "opacity" divs to give me the "tall sidebar" look that I want.

I guess that could be a workaround, but I'd really rather figure out why the movement of the sidebars doesn't work in Firefox when it works perfectly in IE8. Anyone have any ideas why that isn't working?

lmilesw Dec 8, 2010 06:54 PM

I was just thinking of have three areas that could give the illusion of a tall sidebar. The "opacity divs" would not work in this scenario. Atahualpa is build with tables. The layout is as follows
  • full width header
  • sidebar center sidebar
  • full width footer
When you are applying css to some elements withing this kind of a structure browsers handle the code differently. IE is not fully standard compliant so the positioning your are getting in IE that looks correct is probably not correct according to css standards.


All times are GMT -6. The time now is 07:39 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.