Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Relative move of sidebar not working in Firefox (Works in IE8)


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 8, 2010, 03:07 PM
flieg
 
21 posts · Aug 2010
California
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.)
  #2  
Old Dec 8, 2010, 06:12 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Dec 8, 2010, 06:25 PM
flieg
 
21 posts · Aug 2010
California
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?
  #4  
Old Dec 8, 2010, 06:54 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Table works fine in all browsers except Firefox. Please help! Nolie Center area post/pages 1 Nov 15, 2010 11:23 AM
[SOLVED] Firefox-Widget Areas Not Showing Content Yet IE8 Is? Craig Mattice Sidebars & Widgets 3 Mar 29, 2010 11:03 AM
Right sidebar renders incorrectly on homepage in IE8, Firefox OK Alexi Sidebars & Widgets 1 Jan 25, 2010 05:30 AM
Right sidebar renders incorrectly on homepage in IE8, Firefox OK Alexi Center area post/pages 0 Jan 19, 2010 07:16 AM
[SOLVED] Firefox works perfect but Internet Explorer not reonardo Installing & running WordPress 1 Dec 10, 2009 08:17 AM


All times are GMT -6. The time now is 06:38 PM.


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