Hi Folks --
I'm hoping someone familiar with the 'Front Page' Drupal module can offer a suggestion. We are using Front Page to provide a custom formatted splash page for our library users. The problem is that code designed to display text inside a green column next to an iframe with Google Calendar centered between an left and right column of standard themed blocks is rendered differently on IE (all versions) than Firefox / Safari / Chrome. I'm using the following initial code:
|<HTML> <HEAD> <TITLE>Lane Memorial Library, Hampton, NH</TITLE> </head> <STYLE type="text/css"> div#c1 { float:left; width:260px; height:800px; background-color:#b3e0b8; border:2px solid #dce7d5; color:black; padding:10px; }
div#c2 { float:right; } |
In Firefox / Safari / Chrome text following an initial <div id="c1"> is properly contained and displayed in a green box, and the Google Calendar is just to the right according to the div#c2 "float:right" column designation. In IE, the green background is missing, the text fills all available space, and the calendar winds up below the text. (I have followed the first column code with <div style="clear:both;">)
This is an experimental site hosted on an in-house server, but I would be happy to supply an 'outside' link for anyone kind enough to help me find a solution.
Thanks in advance ...
Darrell Eifert Lane Memorial Library Hampton, NH
Comments
On Thu, May 24, 2012 at 9:45 AM, Darrell Eifert deifert@hampton.lib.nh.us wrote:
<HTML> <HEAD> <TITLE>Lane Memorial Library, Hampton, NH</TITLE> </head> <STYLE type="text/css"> div#c1 { float:left; width:260px; height:800px; background-color:#b3e0b8; border:2px solid #dce7d5; color:black; padding:10px; }
div#c2 { float:right; }
The style tag belongs as a child of the head tag. Does it help if you move it to the proper place?
Hi Ernie --
Thanks for the note -- I enclosed the <style> declaration within the <HEAD>, but there is no change -
<HTML> <HEAD> <TITLE>Lane Memorial Library, Hampton, NH</TITLE> <STYLE type="text/css">
div#c1 { float:left; width:260px; height:800px; background-color:#b3e0b8; border:2px solid #dce7d5; color:black; padding:10px; }
div#c2 { float:right; }
</STYLE> </HEAD>
You can see the front page at: http://216.177.17.149. I've disabled the Drupal cache so that changes will hopefully be displayed correctly.
Again, thanks for the help.
-- Darrell
On 5/24/2012 10:31 AM, Earnie Boyd wrote:
On Thu, May 24, 2012 at 9:45 AM, Darrell Eifert deifert@hampton.lib.nh.us wrote:
<HTML> <HEAD> <TITLE>Lane Memorial Library, Hampton, NH</TITLE> </head> <STYLE type="text/css"> div#c1 { float:left; width:260px; height:800px; background-color:#b3e0b8; border:2px solid #dce7d5; color:black; padding:10px; }
div#c2 { float:right; }
The style tag belongs as a child of the head tag. Does it help if you move it to the proper place?
Il 24/05/2012 15:45, Darrell Eifert ha scritto:
Hi Folks --
I'm hoping someone familiar with the 'Front Page' Drupal module can offer a suggestion. We are using Front Page to provide a custom formatted splash page for our library users. The problem is that code designed to display text inside a green column next to an iframe with Google Calendar centered between an left and right column of standard themed blocks is rendered differently on IE (all versions) than Firefox / Safari / Chrome. I'm using the following initial code:
|<HTML>
<HEAD> <TITLE>Lane Memorial Library, Hampton, NH</TITLE> </head> <STYLE type="text/css"> div#c1 { float:left; width:260px; height:800px; background-color:#b3e0b8; border:2px solid #dce7d5; color:black; padding:10px; }
div#c2 { float:right; } |
I think it is rendered in quirks mode, try to validate the code first: validator.w3.org/
Hello Luca --
Thank you for the suggestion -- I attempted to force IE into 'quirks' mode with an appropriate doctype declaration, but again, there seemed to be no change in the rendering. I should also mention that outside of the Front Page module, the code renders correctly in both IE and Firefox as a stand-alone web page. validator.w3.org/ does return errors, but I'm not sure how much is due to incorrect code and how much is due to an odd synergy between the raw code and Drupal / Front Page, which is set to 'themed' mode so that I can make use of the header, footer, and blocks available from the master CTI-Flex / Zen theme.
-- Darrell
On 5/24/2012 12:30 PM, luca capra wrote:
Il 24/05/2012 15:45, Darrell Eifert ha scritto:
Hi Folks --
I'm hoping someone familiar with the 'Front Page' Drupal module can offer a suggestion. We are using Front Page to provide a custom formatted splash page for our library users. The problem is that code designed to display text inside a green column next to an iframe with Google Calendar centered between an left and right column of standard themed blocks is rendered differently on IE (all versions) than Firefox / Safari / Chrome. I'm using the following initial code:
|<HTML>
<HEAD> <TITLE>Lane Memorial Library, Hampton, NH</TITLE> </head> <STYLE type="text/css"> div#c1 { float:left; width:260px; height:800px; background-color:#b3e0b8; border:2px solid #dce7d5; color:black; padding:10px; }
div#c2 { float:right; } |
I think it is rendered in quirks mode, try to validate the code first: validator.w3.org/
Hello all --
After some research, I tried enabled "Optimize CSS Files" in the Performance section of Drupal 6. Apparently that aggregates all of the stylesheets under IE (http://john.albin.net/css/ie-stylesheets-not-loading), and solves several IE-based CSS problems. Worked like the proverbial charm.
Thanks again to all who offered suggestions.
-- Darrell
On 5/24/2012 4:28 PM, Darrell Eifert wrote:
Hello Luca --
Thank you for the suggestion -- I attempted to force IE into 'quirks' mode with an appropriate doctype declaration, but again, there seemed to be no change in the rendering. I should also mention that outside of the Front Page module, the code renders correctly in both IE and Firefox as a stand-alone web page. validator.w3.org/ does return errors, but I'm not sure how much is due to incorrect code and how much is due to an odd synergy between the raw code and Drupal / Front Page, which is set to 'themed' mode so that I can make use of the header, footer, and blocks available from the master CTI-Flex / Zen theme.
-- Darrell
On 5/24/2012 12:30 PM, luca capra wrote:
Il 24/05/2012 15:45, Darrell Eifert ha scritto:
Hi Folks --
I'm hoping someone familiar with the 'Front Page' Drupal module can offer a suggestion. We are using Front Page to provide a custom formatted splash page for our library users. The problem is that code designed to display text inside a green column next to an iframe with Google Calendar centered between an left and right column of standard themed blocks is rendered differently on IE (all versions) than Firefox / Safari / Chrome. I'm using the following initial code:
|<HTML>
<HEAD> <TITLE>Lane Memorial Library, Hampton, NH</TITLE> </head> <STYLE type="text/css"> div#c1 { float:left; width:260px; height:800px; background-color:#b3e0b8; border:2px solid #dce7d5; color:black; padding:10px; }
div#c2 { float:right; } |
I think it is rendered in quirks mode, try to validate the code first: validator.w3.org/
-
Darrell Eifert -
Earnie Boyd -
luca capra