Browser Compatibility --- CCS ? [#354708]

THANKS
Hat’s off to John on a brilliant theme. The overall design and layout was a critical decision into our choice to select the Atlantis theme for use with two newly installed Drupal blogs.

PROBLEM
We have modified the design of the base Atlantis theme for two blogs.

However, the appearance/interface is displaying completely different depending on the browser being used by the viewer.

BACKGROUND
We have modified the design to fit our two corporate identities. Most of the image files have been modified and replaced in the same directory with the same file names. The two sites are below

www.newdefmedia.tv/blog
www.primaxx.com/blog

As such, we have made the changes to the CSS and appropriate graphic files as directed. Colors, text style, etc. have all been mostly modified.

In addition, the files have been placed according to drupal instructions…

newdef/blog/sites/all/themes/a3_atlantis
primaxx/blog/sites/all/themes/a3_atlantis

Note that these are loaded into two separate Atlantis directories.

PROBLEM REPLICATION
The “appearance” test has been run on several computers and several browsers.

The file “FireFox_NewDef_allOK” is the “correct” appearance. As you can see, when displayed on the IE browser, much of the graphics are not displaying correctly (see file “IE_NewDef_No_Background_darkdark_colors”)

Similarly, the file “FireFox_Primaxx_BlueHeader_only” only displays a “blue” stripe across the location instead of the image similar to John’s “world map”.

On the IE browser, the “blue” stripe is not present and “nothing” displays (see image (IE_Primaxx_No_Background_colors_ok”)

Suggestions…..?

Comment	File	Size	Author
#3	IE_NewDef_No_Background_colors_ok_rightcolumn_wrap.jpg	303.87 KB	newdefdrupal
#3	IE_NewDef_No_Background_colors_ok_rightcolumn_wrap_bottomscreen.jpg	295.85 KB	newdefdrupal
#3	IE_NewDef_Correct_Background_colors_ok_NoWrap.jpg	565.89 KB	newdefdrupal
	IE_Primaxx_No_Background_colors_ok.jpg	291.32 KB	newdefdrupal
	IE_NewDef_No_Background_darkdark_colors.jpg	302.76 KB	newdefdrupal
	FireFox_Primaxx_BlueHeader_only.jpg	191.93 KB	newdefdrupal
	FireFox_NewDef_allOK.jpg	554.26 KB	newdefdrupal

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

JohnForsythe CreditAttribution: JohnForsythe commented 5 January 2009 at 21:20

There seems to be an error in your modified css file.

Take a look at this line in your style.css:

.wide-page #main /* ??? Background image - but no change? */ { background: url(main-bg-single.png)url('(EmptyReference!)') repeat-y; }

You've got two URLs mashed together. Specifically, the "url('(EmptyReference!)')" part probably shouldn't be there.

Comment #2

JohnForsythe CreditAttribution: JohnForsythe commented 7 January 2009 at 04:49

Status:

Active

» Closed (fixed)

Comment #3

newdefdrupal CreditAttribution: newdefdrupal commented 18 January 2009 at 03:31

Title:	Browser Compatibility --- CCS ? --- Updated request to John	» Browser Compatibility --- CCS ?
Status:	Closed (fixed)	» Postponed (maintainer needs more info)

File	Size
IE_NewDef_Correct_Background_colors_ok_NoWrap.jpg	565.89 KB
IE_NewDef_No_Background_colors_ok_rightcolumn_wrap_bottomscreen.jpg	295.85 KB
IE_NewDef_No_Background_colors_ok_rightcolumn_wrap.jpg	303.87 KB

John,

The offending code was corrected, however, only returned the www. .com/blog site to its cross-browser functionality...

The www.new media.tv/blog site is still problematic.

www.new media.tv/blog now "wraps" the right column at the bottom of the page "only on some pages"...on IE browsers...

The Firefox browser still displays correctly.

IE browser summary shots::

--- IE screenshot "IE_NewDef_No_Background_colors_ok_rightcolumn_wrap.jpg" shows the absence of the "background".
--- IE screenshot "IE_NewDef_No_Background_colors_ok_rightcolumn_wrap_bottomscreen.jpg" shows how the "right column" block is placed at the very bottom of the screen
--- IE screenshot "IE_NewDef_Correct_Background_colors_ok_NoWrap" shows the same browser, navigated through an admin page with everything correctly laid out.

Thanks

Comment #4

JohnForsythe CreditAttribution: JohnForsythe commented 8 January 2009 at 06:08

That problem is actually being caused by your right sidebar being too wide. In the original code, the width is set to 180px. In your style.css, the width has been changed to 380px:

#sidebar-top {
  float: left;
  width: 380px;
  padding-left: 10px;
}

None of the other widths were adjusted to match, so IE6 breaks. Firefox and IE7 deal with the problem a little more gracefully. Anyway, changing it back to 180px seems to solve the problem.

Since these problems are due to modifications, and not the original code, this issue queue isn't really the appropriate place to get support.

If you need more help with your customizations, I do offer Drupal consulting services :)

Comment #5

newdefdrupal CreditAttribution: newdefdrupal commented 18 January 2009 at 03:30

Status:

Postponed (maintainer needs more info)

» Closed (fixed)

John,

The offending code was returned to its original values from the base theme that you had contributed. Unfortunately, the error has not corrected itself and the IE interface is still not displaying correctly on an intermittent basis for the newdef blog (www.newdefmedia.tv/blog)...

As a side note, during the programmer's debugging process, he had changed the values in an effort to better understand what the offending issue might be...When I posted my last note, he had not changed it back to the original code.

As the two sites currently sit, I am told that the code should be exactly the same, however, the images are obviously different as well as the relevant text information (colors and such) contained in the css. What remains odd is that the newdef blog displays correctly when viewing certain pages...

John, please check your blamcast emails...to your offer, I had sent an email on 12/5/08 to your address that is posted on your website...I don't show any response from you from our original inquiry...

Thanks