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; |
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; |