By rhildebr on
My site is www.rmhwellnesscenter.com, using Drupal 6 based on the Forest Floor theme. I've nearly got my site completed, but have recently noticed that my site is not consistent in appearance across browsers. I'm unsure of how to correct this. Any help would be much appreciated so that I can wrap this project up. Thanks!
Comments
_
Some details on what the inconsistencies actually are would definitely help wrap this up...
What I've been noticing are
What I've been noticing are mostly on the home page with the three blocks, announcements, events, etc. The text seems to get bumped down and overflow the background graphic that I created. Another thing I've noticed is with the search box (top right) the search field and the search submit button are staggered in Firefox. In IE6 these issues just listed as well as the right nav/column get bumped below the main content instead of appearing on the right side of the page.
Each browser seems to do something a little different with my site and I'm having no luck solving the issues so far. Your help is greatly appreciated!
_
For Firefox, Firebug is definitely your friend for troubleshooting stuff like this.
In line 13 of style.css, you only define a bottom margin for h1, h2, etc. Set a margin on h2 for the other three sides (margin: 2px 0 0.5em 2px) will fix the text layout in the 3 blocks.
Similar margin settings will also fix your search box layout.
The IE6 issue will most likely be due to padding and widths of floated objects. IE6 doubles up the width calculations and things get pushed down. So reduce your column widths/padding a little - often a case of trial and error. Then you can create a conditional comment to load an IE6 only style if need be.