[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