[Product-Developers] Need Help with PloneCustom.css and IE7

David Bain david.bain at alteroo.com
Mon Mar 31 14:21:18 UTC 2008


Mark,
Place normal code in your ploneCustom.css (remember IE is NOT normal,
it is very disobedient).

Then place the IE specific code in IEFixes.css.

also remember I had suggested creating a new stylesheet just for IE7
(IE7Fixes.css).
 <!-- Internet Explorer CSS Fixes -->
     <!--[if IE 7]>

         <style type="text/css" media="all">@import
 url(http://plone.org/IE7Fixes.css);</style>
 <![endif]-->

If there is something IE7 specific, put it in the IE7Fixes.css.

I'm cc-ing the product developers list in case others may find this helpful.

On Sun, Mar 30, 2008 at 8:24 PM, Mark Phillips
<mark at phillipsmarketing.biz> wrote:
> David,
>
>  I found, through trial and error, a way to fix the problem, but I don't
>  know how to make the solution work for both IE and non-IE browsers. This
>  is what I found. (Note: the logo image is 128 px high)
>
>  I have the following css:
>
>  #portal-top
>  {
>     background: #6F8EC4 top left url(<dtml-var portal_url>/clouds.jpg)
>  no-repeat;
>  }
>
>  #portal-logo
>  {
>     background: none;
>     padding: 0;
>     margin: 0;
>     height: 128px;
>     width: 100%;
>     border-bottom: 1px solid #FFFFFF;
>  }
>
>  This gives the extra blue border between the logo image and the tabs
>  only for IE browsers. Other browsers are correct.
>
>  If I change the height in #portal-logo to 85px, then the blue border
>  goes away in IE, but the other browsers are messed up. The tabs encroach
>  into the logo image area.
>
>  How do I make this height conditional depending on the browser type?
>
>  I read the following, http://www.javascriptkit.com/howto/cc2.shtml, and
>  tried putting in two #portal-logo blocks, one like this:
>
>  <!--[if IE]>
>  #portal-logo {....}
>  <[endif]-->
>
>  and a height of 85px, and the other with
>
>  <![if !IE]>
>  #portal-logo {....}
>  <![endif]>
>
>  and a height of 128px, but both browser displays have the tabs
>  encroaching on the logo image.
>
>  Thanks for any suggestions you have!
>
>  Mark
>
>
>
>  On Sun, 2008-03-30 at 17:31 -0400, David Bain wrote:
>  > Yes... you'll want to use firebug (a firefox add-on) it can help you
>  > to isolate the exact css that affects that section. Then you can add a
>  > custom version of it for IE where appropriate.
>  >
>  > On Sun, Mar 30, 2008 at 4:23 PM, Mark Phillips
>  > <mark at phillipsmarketing.biz> wrote:
>  > >
>  > >
>  > >
>  > > David,
>  > >
>  > >  No luck finding the root cause. Does my explanation and the screen
>  > shots
>  > > give you any ideas?
>  > >
>  > >  Thanks,
>  > >
>  > >  Mark
>  > >
>  > >
>  > >
>  > >  ----- Original Message -----
>  > >  From: pigeonflight at gmail.com <pigeonflight at gmail.com>
>  > >  To: Mark Phillips
>  > >  Sent: Sun Mar 30 16:49:06 2008
>  > >  Subject: Re: [Product-Developers] Need Help with PloneCustom.css
>  > and IE7
>  > >
>  > >  Mark,
>  > >  Haven't been on my email much over the weekend. How is the css
>  > issue going?
>  > >
>  > >  On Sun, Mar 30, 2008 at 8:14 AM, Mark Phillips
>  > >  <mark at phillipsmarketing.biz> wrote:
>  > >  > David,
>  > >  >
>  > >  >
>  > >  >  If you compare MSIE6 with any of the other screen shots you
>  > requested at
>  > >  >  browsershots.org, you can also see the problem. There is an
>  > extra blue
>  > >  >  band under the logo image and above the tabs. This band is not
>  > present
>  > >  >  in the other screen shots. MSIE5.5 does not show the problem.
>  > >  >
>  > >  >  Yes, I have installed firebug. I have not been able to find the
>  > source
>  > >  >  of the problem. I must admit, I am not a CSS guru nor a plone
>  > skins
>  > >  >  guru, so I am also struggling with where to look/how to debug
>  > this
>  > >  >  problem. But I keep learning more and more from experts on the
>  > plone
>  > >  >  lists!! :-)
>  > >  >
>  > >  >  I did not know about browsershots.org. A really cool tool.
>  > Thanks for
>  > >  >  that tip!! I am happy to see that this problem only shows up on
>  > IE6 and
>  > >  >  IE7.
>  > >  >
>  > >  >  Mark
>  > >  >
>  > >  >  On Fri, 2008-03-28 at 11:10 -0400, David Bain wrote:
>  > >  >
>  > >  >
>  > >  > > Mark,
>  > >  >  > It is difficult to understand the differences you describe at
>  > the
>  > >  >  > moment, so I've requested some screenshots at browsershots.org
>  > (very
>  > >  >  > useful tool).
>  > >  >  >
>  > >  >  > http://browsershots.org/http://arcadialittleleague.com/
>  > >  >  >
>  > >  >  > BTW. Have you tried using the firefox add-on firebug?
>  > >  >  >
>  > >  >  >
>  > >  >  > On Fri, Mar 28, 2008 at 8:35 AM, Mark Phillips
>  > >  >  > <mark at phillipsmarketing.biz> wrote:
>  > >  >  > >
>  > >  >  > >
>  > >  >  > >
>  > >  >  > > David,
>  > >  >  > >
>  > >  >  > >  Thanks for the good idea. Separating out various css
>  > modules is a
>  > >  >  > great
>  > >  >  > >  programming technique.
>  > >  >  > >
>  > >  >  >
>  > >  >  > Yes, this technique is the best approach. Generally most other
>  > >  >  > browsers will work with standard css, but IE tends to be
>  > quirky and
>  > >  >  > unfortunately the different versions of IE can often be quirky
>  > in
>  > >  >  > different ways, hence the suggestion for an IE 7 specific
>  > stylesheet.
>  > >  >  >
>  > >  >  >
>  > >  >  > >  I have found that none of the IE fixes added to my css
>  > impact the
>  > >  >  > site
>  > >  >  > >  in other browsers. So, I just add them to plonecustom.css
>  > at the
>  > >  >  > top.
>  > >  >  > >
>  > >  >  > >  Any thoughts on how to fix the size of the logo in IE for
>  > my site?
>  > >  >  > >
>  > >  >  > >  Thanks again,
>  > >  >  > >
>  > >  >  > >  Mark
>  > >  >  > >
>  > >  >  > >
>  > >  >  > >
>  > >  >  > >  On Wed, 2008-03-26 at 21:16 -0400, David Bain wrote:
>  > >  >  > >  > Try using a conditional statement that selects for IE7
>  > >  >  > >  > Include an IE7Fixes.css and put adjustments there.
>  > >  >  > >  > <!-- Internet Explorer CSS Fixes -->
>  > >  >  > >  >     <!--[if IE 7]>
>  > >  >  > >  >
>  > >  >  > >  >         <style type="text/css" media="all">@import
>  > >  >  > > url(http://plone.org/IE7Fixes.css);</style>
>  > >  >  > >  >     <![endif]-->
>  > >  >  > >  >
>  > >  >  > >  > see:
>  > >  >  > >  > http://www.javascriptkit.com/howto/cc2.shtml
>  > >  >  > >  > for details.
>  > >  >  > >  >
>  > >  >  > >  > On Wed, Mar 26, 2008 at 1:47 PM, Mark Phillips
>  > >  >  > >  > <mark at phillipsmarketing.biz> wrote:
>  > >  >  > >  >         I have a site up and running (www.arcadiall.com)
>  > that
>  > >  >  > uses
>  > >  >  > >  >         PloneSkins.org as a skin template. It looks great
>  > in
>  > >  >  > firefox,
>  > >  >  > >  >         mozilla,
>  > >  >  > >  >         epiphany, etc on both windows and Linux. However,
>  > IE7 is
>  > >  >  > >  >         causing my hair
>  > >  >  > >  >         to fall out.
>  > >  >  > >  >
>  > >  >  > >  >         The logo image has a color fill behind it. On all
>  > the
>  > >  >  > "good"
>  > >  >  > >  >         browsers,
>  > >  >  > >  >         the portal top is the size of the portal logo
>  > image,
>  > >  >  > which
>  > >  >  > >  >         sits very
>  > >  >  > >  >         nicely on top of the tabs. In IE7, there is a
>  > large band
>  > >  >  > of
>  > >  >  > >  >         background
>  > >  >  > >  >         color between the logo image and the tabs. I
>  > can't seem
>  > >  >  > to
>  > >  >  > >  >         remove it,
>  > >  >  > >  >         and I don't know why it is there.
>  > >  >  > >  >
>  > >  >  > >  >         I tried the latest info on the plone site
>  > >  >  > >  >
>  > >  >  > (http://plone.org/documentation/how-to/plone-ie7-updates), but
>  > >  >  > >  >         those
>  > >  >  > >  >         fixes for IE7 do not help.
>  > >  >  > >  >
>  > >  >  > >  >         Any assistance will be greatly appreciated!!
>  > >  >  > >  >
>  > >  >  > >  >         Thanks,
>  > >  >  > >  >
>  > >  >  > >  >         Mark
>  > >  >  > >  >
>  > >  >  > >  >
>  > >  >  > >  >
>  > >  >  > >  >         _______________________________________________
>  > >  >  > >  >         Product-Developers mailing list
>  > >  >  > >  >         Product-Developers at lists.plone.org
>  > >  >  > >  >
>  > >  >  > http://lists.plone.org/mailman/listinfo/product-developers
>  > >  >  > >  >
>  > >  >  > >
>  > >  >  >
>  > >  >  >
>  > >  >
>  > >  >  _______________________________________________
>  > >  >  Product-Developers mailing list
>  > >  >  Product-Developers at lists.plone.org
>  > >  >  http://lists.plone.org/mailman/listinfo/product-developers
>  > >  >
>  > >
>  >
>  >
>




More information about the Product-Developers mailing list