5 replies [Last post]
York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 50 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

I've just added a feed icon to my page. It's a PNG file to maintain the transparency where the icon's corners are rounded.

I've added pngfix.js to the page so that IE6 will make use of the transparency, but this causes the feed icon's position to go awry, and the gray bar that should be displayed behind the feed icon disappears entirely.

The page displays correctly in Firefox.

Solution? Thank you.

My HTML:

Untitled Document

banner

My CSS:

/* global styling ----------------------------------------------- */ html { text-align: center; background-attachment: fixed; background-color: #353535; background-image: url(../images/backgroundGradient.png); background-repeat: repeat-x; color: #CCC; } body { width: 728px; margin: 0px auto; font: 10px Arial, Helvetica, sans-serif; line-height: 1.5em; text-align: left; } img.banner { position: absolute; top: 91px; } img.feedBar { position: absolute; top: 181px; } img.temp-banner { /*this is a temporary rule to place an element so that the page is scrollable, demonstrating the 'fixed' p7menubar.*/ position: absolute; top: 1200px; } .feed { position: relative; top: 186px; left: 707px; width: 16px; height: 16px; border: none; }

/* nav
----------------------------------------------- */
#p7menubar {
height: 91px;
width: 728px;
position: absolute;
z-index: 10;
font-size: 9px;
}
#p7menubar li {
width: 91px;
height: 91px;
text-indent: -9999px;
background-repeat: no-repeat;
}
#p7menubar li li { height: auto;
}
#p7menubar a:link, #p7menubar a:visited {
color: #CCC;
background-color: inherit;
}
#p7menubar a:hover, #p7menubar a:focus {
color: #FFF;
background-color: inherit;
}
body#indexPage li#index {
background-image: url(../images/nav/navIndexGray.jpg);
}
body#knowPage li#know {
background-image: url(../images/nav/navKnowColor.jpg);
}
body#learnPage li#learn {
background-image: url(../images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(../images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(../images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(../images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(../images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(../images/nav/navShopColor.jpg);
}
#index {
background-image: url(../images/nav/navIndexGray.jpg);
}
#know {
background-image: url(../images/nav/navKnowGray.jpg);
}
#learn {
background-image: url(../images/nav/navLearnGray.jpg);
}
#look {
background-image: url(../images/nav/navLookGray.jpg);
}
#play {
background-image: url(../images/nav/navPlayGray.jpg);
}
#read {
background-image: url(../images/nav/navReadGray.jpg);
}
#share {
background-image: url(../images/nav/navShareGray.jpg);
}
#shop {
background-image: url(../images/nav/navShopGray.jpg);
}
#index:hover a, #index:focus a, #index:active a, #index.p7hvr a {
background-image: url(../images/nav/navIndexColor.jpg);
}
#know:hover a, #know:focus a, #know:active a, #know.p7hvr a {
background-image: url(../images/nav/navKnowColor.jpg);
}
#learn:hover a, #learn:focus a, #learn:active a, #learn.p7hvr a {
background-image: url(../images/nav/navLearnColor.jpg);
}
#look:hover a, #look:focus a, #look:active a, #look.p7hvr a {
background-image: url(../images/nav/navLookColor.jpg);
}
#play:hover a, #play:focus a, #play:active a, #play.p7hvr a {
background-image: url(../images/nav/navPlayColor.jpg);
}
#read:hover a, #read:focus a, #read:active a, #read.p7hvr a {
background-image: url(../images/nav/navReadColor.jpg);
}
#share:hover a, #share:focus a, #share:active a, #share.p7hvr a {
background-image: url(../images/nav/navShareColor.jpg);
}
#shop:hover a, #shop:focus a, #shop:active a, #shop.p7hvr a {
background-image: url(../images/nav/navShopColor.jpg);
}
#p7menubar li:hover ul a, #p7menubar li:focus ul a, #p7menubar li:active ul a, #p7menubar li.p7hvr ul a {
background-image: url(../images/nav/navMenuGray.jpg);
}
#know ul li a:hover {
background-image: url(../images/nav/navMenuKnow.jpg);
}
#learn ul li a:hover {
background-image: url(../images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(../images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(../images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(../images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(../images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(../images/nav/navMenuShop.jpg);
}

/* PVII Menu CSS Express Drop-Down Menu by Project Seven Development (www.projectseven.com)
----------------------------------------------- */
/*Clears the floated menu items.
Assigned to a BR tag placed just before
menuwrapper's closing DIV tag*/
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
/*
p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
We set padding and margin to zero to eliminate all indentation, turn bullets off,
and set a font-family different from the global font-family declared for the
body element above. This sets font for just the menu. Do not add a font-size here.
*/
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
}
/*
Root-Level Links. Do not change the first two properties.
Adjust padding values to make the root links taller and to offset them
from the left and right edges of the link box. The border right creates a
separator between links. Font-size is set here and will apply to all menu levels.
Font color is set to light gray.
*/
#p7menubar a {
display: block;
width: 91px;
height: 91px;
}
/*
The Root-Level list items. Floating left allows
them to appear horizontally. Width is for IE5 Mac. The last rule in
this style sheet will set the width for this element to auto for all
other browsers - hiding it from IE5 Mac. The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text.
*/
#p7menubar li {
float: left;
}
/*
Sets width for Sub-Menu box and the List Items inside - in proportional em units.
This allows the sub-menu width to expand if users resize the text in their browsers.
*/
#p7menubar li ul, #p7menubar ul li {
width: 91px;
}
/*
The sub-menu links. We set color and turn off the right border, which
would otherwise be inherited from the root link rule. We set top and
bottom padding less than the root items and increas the left padding
to indent the sub-menu links a small amount in from the root links.
*/
#p7menubar ul li a {
line-height: 2em;
height: 2em;
text-align: right;
padding-right: 9px;
width: 82px;
text-decoration: none;
}
/*
Sub-Menu Unordered Lists describes each dropdown sub-menu grouping.
Positioned Absolutely to allow them to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background Color must be set or problems will be encountered in MSIE.
Right and bottom borders are set to simulate a raised look.
A gradient background image is assigned.
*/
#p7menubar li ul {
position: relative;
display: none;
color: inherit;
background-color: #FFFFFF;
}
/*
Set the Sub-Menu UL to be visible when its associated
Root-Level link is moused over. The second selector is
assigned to IE5 and IE6 via the P7_ExpMenu script.
*/
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
#p7menubar li {
width: auto;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

PNG fixes have side-effects.

PNG fixes have side-effects. If you are positioning the icon over a background that will be the same all the time, you may as well merge the two together into a non-png image (or a png without alpha-transparency).

York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 50 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

If I merge the two images,

If I merge the two images, can I use CSS to define the clickable area as just the size and position of the feed icon? If so, how? Thanks for your help, Chris.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You can. Place the image

You can.

Place the image as part of the background of one element. Nest a link inside that element and use absolute positioning to locate it in the correct spot.

Or, create one image and cut out the clickable portion into a second image. Place that image inside a link element and position the link absolutely to locate it at the correct position on the background.

York
York's picture
Offline
Regular
Los Angeles
Last seen: 12 years 50 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Thanks for the ideas,

Thanks for the ideas, Chris.

Once a posted problem has been resolved, should I reply as such, so a moderator can mark the post as [solved]? What's the proper forum etiquette for this?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

York wrote:Thanks for the

York wrote:
Thanks for the ideas, Chris.

Once a posted problem has been resolved, should I reply as such, so a moderator can mark the post as [solved]? What's the proper forum etiquette for this?

It's up to you. You can edit your first post yourself to add [Solved] to the title, or just post a reply (as you have done) saying the topic is finished, and one of us will come along, notice it, and edit the topic.

I'll edit it for you now Smile

Verschwindende wrote:
  • CSS doesn't make pies