[css-d] IE gives my nav more pixels

[Max Lynch]

Hey everyone.


I have a horizontal menu displayed about 97px from the top of the browser
window. Above this are two divs, the left one displays an image and is
displayed Inline, the right one displays another image and a small form. My
navigation menu is a  and its position is relative.

What im seeing in IE is my navigation is off by a couple pixels on the top
like there is a margin, but FireFox displays it fine.

I've removed the left  above the menu and everything is displayed fine,
however, the  doesn't contain any padding or magins or borders and is
just a simple  inside an . Where are these extra pixels comming
from?

-here is a link to the site: http://www.markeyforcongress.com/drupal/
-here is the CSS for the nav menu:
#navMain { width: 800px; height: 29px; margin: 0px; margin-left: 10px;
position: relative; top: 0px; left: 0px; border: 1px solid black;}
/*#navMain { background-color: yellow; width: 800px; height: 29px; margin:
0px; margin-left: 10px; position: relative; top: 97; left: 235; border: 1px
solid black;}*/
 #nav ul { padding: 0px; margin: 0px; list-style: none; }
 #nav a { display: block; color: #404B55; font-weight: bold;
text-decoration: none; padding: 0px 10px; }
 #nav li { float: left; padding: 0px; margin: 0px; font: normal 14px/29px
Arial, Helvetica, Sans-Serif; }
 #nav li#Donate a { color: #fff; background: #C63B1C; }
 #nav li#Donate a:hover { color: #C63B1C; background: #DFEBF6;}
 #nav li a:hover { color: #404B55; background: #DFEBF6; }

I've left a border so its easier to see whats happening. I can't figure out
this problem. I simply don't have enought knowledge of CSS yet to understand
whats happening.

Thanks for your help everyone.

-- 
Maxl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 6 site check needed

[Terry Hamel]

PositionIsEverything has a 2006 article on PNG's in web browsers.

http://www.positioniseverything.net/articles/dropshadows.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css-d Digest, Vol 56, Issue 10

[dan]

Hello, thanks for your message but I'm on holiday now until the 16th July. 

If its urgent, please contact me on my mobile otherwise I'll get back to you on 
my return.

Kindest Regards
Dan.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] blue border around image links.

[Mark Henderson]

Christopher Blake wrote:
> Hi Pepl,
> 
> How do I remove the blue border from my image links?? They only  
> appear in IE6.

Did you even read my reply to your previous thread ([css-d] images won't 
align in IE) where I answered this and your question about png 
transparency, along with a working IE solution for your image alignment 
issues?

Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've still got a problem...

[John Lockerbie]

Holly,

Thank you for the suggestions. I've been working to clear the problem
and have been successful on Mac - but only by making my markup
worse...

I'm going to try to simplify it. Think I'm trying to run before I can
walk. This may take a little time...

With kind regards
John

On 06/07/07, Holly Bergevin <[EMAIL PROTECTED]> wrote:
> From: "John Lockerbie" <[EMAIL PROTECTED]>
>
> >http://www.catnaps.org/newlayout/index.html
>
> >The lower menu sits on top of the footer and I can't separate them.
> >The css is: http://www.catnaps.org/newlayout/islamic2.css
>
> In your lower menu, the three ULs are absolutely positioned (AP). So even 
> though you've cleared the footer, the floated #contentcolnav2 isn't really 
> taking up much space, and the AP lists are hanging out of it, overlapping the 
> following content (the footer).
>
> You can see this by adding background colors to the four elements and noting 
> that #contentcolnav2 does not expand to hold the three lists. The heading is 
> the only thing taking up any space.
>
> Try the following changes to your CSS and see if they help. Tested in FF only.
>
> #contentcolnav2 {
> /*width: 408px; - remove the width */ position:relative; float: left; left: 
> 10px; margin-top: 0px;
> }
> /* float these instead of AP - left/top aren't needed */
> #navcol4 {
> float: left; list-style:none; width: 33%;
> }
> #navcol5 {
> float: left; list-style:none; width: 33%;
> }
> #navcol6 {
> float: right; list-style:none; width: 33%;
> }
>
> This seems to hold up under a couple of text resizings. You might consider 
> changing the top one in the same fashion, as it does not hold up under text 
> resizing.
>
> I hope that helps,
>
> ~holly
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've still got a problem...

[Holly Bergevin]

From: "John Lockerbie" <[EMAIL PROTECTED]>

>http://www.catnaps.org/newlayout/index.html 

>The lower menu sits on top of the footer and I can't separate them.
>The css is: http://www.catnaps.org/newlayout/islamic2.css

In your lower menu, the three ULs are absolutely positioned (AP). So even 
though you've cleared the footer, the floated #contentcolnav2 isn't really 
taking up much space, and the AP lists are hanging out of it, overlapping the 
following content (the footer). 

You can see this by adding background colors to the four elements and noting 
that #contentcolnav2 does not expand to hold the three lists. The heading is 
the only thing taking up any space.

Try the following changes to your CSS and see if they help. Tested in FF only.

#contentcolnav2 {
/*width: 408px; - remove the width */ position:relative; float: left; left: 
10px; margin-top: 0px; 
}
/* float these instead of AP - left/top aren't needed */
#navcol4 { 
float: left; list-style:none; width: 33%;
}
#navcol5 {
float: left; list-style:none; width: 33%;
}
#navcol6 {
float: right; list-style:none; width: 33%;
}

This seems to hold up under a couple of text resizings. You might consider 
changing the top one in the same fashion, as it does not hold up under text 
resizing.

I hope that helps,

~holly 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've still got a problem...

[John Lockerbie]

Alan

That's really good of you to point me in the right direction. The
good/bad news is that I seem to have resolved it on the Mac platform,
but only by making the problem you describe, worse.

I'll have to start over and see what I can sort out.

Thank you again.

With kind regards
John

On 06/07/07, Alan Gresley <[EMAIL PROTECTED]> wrote:
> John Lockerbie wrote:
>
> > I'm still unable to solve a problem with a new site I'm developing.
> >
> > http://www.catnaps.org/newlayout/index.html is a revision to my
> vexisting site - http://catnaps.org/islamic/design.html - which has now
> > got some very long pages.
> >
> > My intention is to shorten the pages by having an additional menu top
> > and bottom - illustrated on:
> > http://www.catnaps.org/newlayout/islamimages/layout.jpg - the 3. menu
> > item on the diagram.
> >
> > The lower menu sits on top of the footer and I can't separate them.
> > The css is: http://www.catnaps.org/newlayout/islamic2.css
> >
> > All suggestions will be gratefully received...
>
> Hi John
>
> You have your #contentcolnav2 floated and your #navcol4, #navcol4, #navcol4 
> are absolutely positioned which removes these elements from the flow. This is 
> why the footer rises up. I have only tested in FF but the below style should 
> work with other browsers.
>
> #contentcolnav2 {
>  margin-bottom: 100px;
>  padding-bottom: 4em;
>  }
>
> I see that you have many styles and a few selectors repeated. The below 
> styles you have repeated in places, style which are inherited to the 
> descendant elements.
>
> font-style:normal; font-family: verdana, helvetica, helvetica neue, arial, 
> sans-serif; list-style-type: none; font-style: normal; font-size: 11px;
>
> You can also group selectors with the same property and values as.
>
> p.marker, tr.marker, ul.marker, dd.marker {
>   background-color:#fff0dc;
>
> Cutting back on what is not needed will help you understand your CSS better.
>
> Kind Regards, Alan
> http://css-class.com/
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've still got a problem...

[Alan Gresley]

John Lockerbie wrote:

> I'm still unable to solve a problem with a new site I'm developing.
>
> http://www.catnaps.org/newlayout/index.html is a revision to my
vexisting site - http://catnaps.org/islamic/design.html - which has now
> got some very long pages.
>
> My intention is to shorten the pages by having an additional menu top
> and bottom - illustrated on:
> http://www.catnaps.org/newlayout/islamimages/layout.jpg - the 3. menu
> item on the diagram.
>
> The lower menu sits on top of the footer and I can't separate them.
> The css is: http://www.catnaps.org/newlayout/islamic2.css
>
> All suggestions will be gratefully received...

Hi John

You have your #contentcolnav2 floated and your #navcol4, #navcol4, #navcol4 are 
absolutely positioned which removes these elements from the flow. This is why 
the footer rises up. I have only tested in FF but the below style should work 
with other browsers.

#contentcolnav2 {
 margin-bottom: 100px;
 padding-bottom: 4em;
 }

I see that you have many styles and a few selectors repeated. The below styles 
you have repeated in places, style which are inherited to the descendant 
elements.

font-style:normal; font-family: verdana, helvetica, helvetica neue, arial, 
sans-serif; list-style-type: none; font-style: normal; font-size: 11px;

You can also group selectors with the same property and values as.

p.marker, tr.marker, ul.marker, dd.marker {
  background-color:#fff0dc;

Cutting back on what is not needed will help you understand your CSS better.

Kind Regards, Alan
http://css-class.com/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE Float Clearing w/ Faux Columns

[Josue Martinez]

On 7/5/07, Kenny Graham <[EMAIL PROTECTED]> wrote:
>
> Why won't IE extend my faux columns background all the way down?  And
> how do I fix it?  Works in FF.  Please help?  Thanks.
>
> http://www.trademarkads.org/BPS


I think we need to see the CSS to see how you're handling the floats. A faux
column idea is to have a background image that has the column colors in it
already and repeat-y it in a div that holds the three floats. That way you
don't have to worry about lining up the floats at the bottom.

In order to get an idea of whether you had declared explicit heights for the
divs, I increased the size of the text, and found that the layout broke with
just one resize up (the menu bar went down). If I resize it three times, the
menu bar breaks into two lines.

Josue
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've still got a problem...

[John Lockerbie]

Christopher,

Thank you for the advice. I like the look of your fixed heading menu
solution. I had a solution that used fixed side menus but my problem
is that there are likely to be a large number of sub-page headings as
I develop my notes. I believe that having a menu top and bottom of the
content for my third level of headings would be the most useful for
readers and am relatively happy with what I have - except I can't get
it to work...

John


On 06/07/07, Christopher Blake <[EMAIL PROTECTED]> wrote:
>  HI John,
>
> Alternatives to the method you are using could be to have a menu fixed to
> the browser. I am using one for my blog
> site: http://www.3pointdesign.com/three/collage/collage.html
> - scroll down to see fix.
>
> Nw my first ever site has a fixed left menu, however I have since learnt
> that because of screen res and browsers (IE!!!) this is a complicated
> process unless it is quite small:
> http://www.neilparishmep.org.uk/ - again scroll to see effect. I have also
> used fixed / absolute positioning for items in the header. minimise browser
> to see left and right effect.
>
> Dunno if that is any help, but alternative. What I have seen with some other
> sites is a menu fixed to the bottom of the page - this looked nice. They
> even had pop up boxes so that it worked like a drop down menu - just not on
> rollover.
>
> Hope it has helped.
>
> C
>
>  Chris Blake: Visit my Website at 3 Point
>  contact | [EMAIL PROTECTED] - 07816163420 | aim - blakeybounce | msn
> - [EMAIL PROTECTED]
>
> On 6 Jul 2007, at 16:23, John Lockerbie wrote:
>
> I'm still unable to solve a problem with a new site I'm developing.
>
> http://www.catnaps.org/newlayout/index.html is a revision
> to my
> existing site - http://catnaps.org/islamic/design.html -
> which has now
> got some very long pages.
>
> My intention is to shorten the pages by having an additional menu top
> and bottom - illustrated on:
> http://www.catnaps.org/newlayout/islamimages/layout.jpg -
> the 3. menu
> item on the diagram.
>
> The lower menu sits on top of the footer and I can't separate them.
> The css is: http://www.catnaps.org/newlayout/islamic2.css
>
> All suggestions will be gratefully received...
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org --
> http://www.evolt.org/help_support_evolt/
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] blue border vs. Transparent png - SOLVED

[Christopher Blake]

Thanks to ELLI I noticed that, having moved my pngfix.htc around I  
had not specified the correct path in the css.

To quote a wise man, "DOH!"

Thanks ELLi and all those that helped.

Christopher Blake
[EMAIL PROTECTED]



On 6 Jul 2007, at 16:15, Christopher Blake wrote:

> Hi all,
>
> This is getting a bit complicated.
>
> http://www.3pointdesign.com/websites2.html - you can only see the
> problem in IE6.
>
> I have used this fix ( http://www.twinhelix.com/css/iepngfix/ ) so
> that IE6, and 5.5+ I believe, can handle transparent png. The problem
> is that it also adds a blue border around the image. The images are
> links so I wonder whether this is anything to do with it. But to add
> text-decoration: none; to an image link?? Anyway by adding border:
> 0px; to img has cleared the border, but stopped the png fix from
> working.
>
> I guess for this post to be on topic I was wondering whether there
> were any other solutions to say no border e.g. border: none; or if
> anyone else has any ides of what IE6 is doing this time.
>
> Don't know if people have ran into this combination of transparency
> for image links before??
>
> Thanks, Chris
>
> Christopher Blake
> [EMAIL PROTECTED]
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE fails to put border on one link...

[Ann Randall]

>>> "Richard Grevers" <[EMAIL PROTECTED]> 7/5/2007 10:12 PM
>>>
On http://www.paen.net/en/live-interpreting.mv, links are styled with
a dashed bottom border.
<= = = snip = = =>

Notes on validity: The page has four validation errors. Three of them
are because the email munging javascripts are not contained in  blocks.

<= = = snip = = =>
One of your validation errors may be because your email javascript
lacks a backslash in the . Try <\/a> and see if that helps.
--
AnnR


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I've still got a problem...

[Christopher Blake]

HI John,

Alternatives to the method you are using could be to have a menu  
fixed to the browser. I am using one for my blog site: http://www. 
3pointdesign.com/three/collage/collage.html - scroll down to see fix.

Nw my first ever site has a fixed left menu, however I have since  
learnt that because of screen res and browsers (IE!!!) this is a  
complicated process unless it is quite small:
http://www.neilparishmep.org.uk/ - again scroll to see effect. I have  
also used fixed / absolute positioning for items in the header.  
minimise browser to see left and right effect.

Dunno if that is any help, but alternative. What I have seen with  
some other sites is a menu fixed to the bottom of the page - this  
looked nice. They even had pop up boxes so that it worked like a drop  
down menu - just not on rollover.

Hope it has helped.

C
Chris Blake: Visit my Website at 3 Point
contact | [EMAIL PROTECTED] - 07816163420 | aim - blakeybounce  
| msn - [EMAIL PROTECTED]

On 6 Jul 2007, at 16:23, John Lockerbie wrote:

> I'm still unable to solve a problem with a new site I'm developing.
>
> http://www.catnaps.org/newlayout/index.html is a revision to my
> existing site - http://catnaps.org/islamic/design.html - which has now
> got some very long pages.
>
> My intention is to shorten the pages by having an additional menu top
> and bottom - illustrated on:
> http://www.catnaps.org/newlayout/islamimages/layout.jpg - the 3. menu
> item on the diagram.
>
> The lower menu sits on top of the footer and I can't separate them.
> The css is: http://www.catnaps.org/newlayout/islamic2.css
>
> All suggestions will be gratefully received...
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] blue border around image links.

[Elli Vizcaino]

--- Christopher Blake <[EMAIL PROTECTED]>
wrote:

> Hi,
> 
> I just did that and although it has put the images
> back in the right  
> place it has messed up the png fix and still got the
> blue border. I  
> think that the problem is that the images are seen
> as links (which  
> they are) but adding text decoration: none; to an
> image??
> 
> Same page:
> http://www.3pointdesign.com/websites2.html - problem
> is  
> IE6 only
> 
> Thanks
> Chris Blake: Visit my Website at 3 Point
> contact | [EMAIL PROTECTED] - 07816163420 |
> aim - blakeybounce  
> | msn - [EMAIL PROTECTED]
> 

Chris,

Are you sure the path to your iepngfix.htc file is
correct? In your CSS you have: img, div { behavior:
url(iepngfix.htc)} - so is this file sitting in your
root directory? If so, I believe the path to this file
 should be: img, div { behavior: url(../iepngfix.htc)}
because your CSS is in its own directory and not at
the root. 

Elli 


   

Boardwalk for $500? In 2007? Ha! Play Monopoly Here and Now (it's updated for 
today's economy) at Yahoo! Games.
http://get.games.yahoo.com/proddesc?gamekey=monopolyherenow  
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] I've still got a problem...

[John Lockerbie]

I'm still unable to solve a problem with a new site I'm developing.

http://www.catnaps.org/newlayout/index.html is a revision to my
existing site - http://catnaps.org/islamic/design.html - which has now
got some very long pages.

My intention is to shorten the pages by having an additional menu top
and bottom - illustrated on:
http://www.catnaps.org/newlayout/islamimages/layout.jpg - the 3. menu
item on the diagram.

The lower menu sits on top of the footer and I can't separate them.
The css is: http://www.catnaps.org/newlayout/islamic2.css

All suggestions will be gratefully received...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] blue border vs. Transparent png

[Christopher Blake]

Hi all,

This is getting a bit complicated.

http://www.3pointdesign.com/websites2.html - you can only see the  
problem in IE6.

I have used this fix ( http://www.twinhelix.com/css/iepngfix/ ) so  
that IE6, and 5.5+ I believe, can handle transparent png. The problem  
is that it also adds a blue border around the image. The images are  
links so I wonder whether this is anything to do with it. But to add  
text-decoration: none; to an image link?? Anyway by adding border:  
0px; to img has cleared the border, but stopped the png fix from  
working.

I guess for this post to be on topic I was wondering whether there  
were any other solutions to say no border e.g. border: none; or if  
anyone else has any ides of what IE6 is doing this time.

Don't know if people have ran into this combination of transparency  
for image links before??

Thanks, Chris

Christopher Blake
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] blue border around image links.

[Christopher Blake]

Hi Jon,

It has worked, but has stopped the png transparency fix ( http:// 
www.twinhelix.com/css/iepngfix/ ). Any ideas??

http://www.3pointdesign.com/websites2.html

Thanks, Chris


Christopher Blake
[EMAIL PROTECTED]



On 6 Jul 2007, at 15:55, Jon Hughes wrote:

>
>
>> -Original Message-
>> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED]
>> discuss.org] On Behalf Of Jon Hughes
>> so...
>>
>> img, div {
>> border:0;
>> }
>> _ 
>> _
>
>
> On second thought, that may have undesired effects, incase you want to
> have a border on a div (although it should override it, but
> nevertheless)
>
> So just make it:
>
> Img {
> Border: 0;
> }
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] blue border around image links.

[Christopher Blake]

Hi,

I just did that and although it has put the images back in the right  
place it has messed up the png fix and still got the blue border. I  
think that the problem is that the images are seen as links (which  
they are) but adding text decoration: none; to an image??

Same page: http://www.3pointdesign.com/websites2.html - problem is  
IE6 only

Thanks
Chris Blake: Visit my Website at 3 Point
contact | [EMAIL PROTECTED] - 07816163420 | aim - blakeybounce  
| msn - [EMAIL PROTECTED]

On 6 Jul 2007, at 15:53, Jon Hughes wrote:

>> -Original Message-
>> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED]
>> discuss.org] On Behalf Of Christopher Blake
>
>
>> How do I remove the blue border from my image links?? They only
>> appear in IE6.
>
>
> You already have:
>
> img, div {
> }
>
> Just add:
>
> border:0;
>
> between the { and }
>
> so...
>
> img, div {
> border:0;
> }
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] blue border around image links.

[Jon Hughes]

> -Original Message-
> From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]
> discuss.org] On Behalf Of Jon Hughes
> so...
> 
> img, div {
> border:0;
> }
> __


On second thought, that may have undesired effects, incase you want to
have a border on a div (although it should override it, but
nevertheless)

So just make it:

Img {
Border: 0;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] blue border around image links.

[Jon Hughes]

> -Original Message-
> From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]
> discuss.org] On Behalf Of Christopher Blake


> How do I remove the blue border from my image links?? They only
> appear in IE6.


You already have:

img, div {
}

Just add:

border:0;

between the { and }

so...

img, div {
border:0;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] blue border around image links.

[Christopher Blake]

Hi Pepl,

How do I remove the blue border from my image links?? They only  
appear in IE6.

http://www.3pointdesign.com/websites2.html

Cheers, Chris

Christopher Blake
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Getting the z-index right in my css

[ron zisman]

On Jul 6, 2007, at 8:55 AM, Ian Piper wrote:
>
> Interesting - that seems at a stroke to have sorted out the behaviour
> for everything except IE6. IE6 doesn't show the thumbnail or popup
> images. I do have a set of styles that are supposed to be for IE6 -
> do I have to do something with those styles?

I can't play with - or debug - your IE styles at the moment, as I  
don't have all the tools available where I am now. It is however to  
be expected that IE6 creates layering problems - making elements  
invisible, and it may also need some debugging for float-margins. IE6  
does however tend to present such cases rather well once we have  
killed a few of its bugs. Others may be able to help you with that.

> I'm curious about the technique you have described here - what is the
> purpose of applying those large negative right and bottom margins?
> Presumably these only apply to the descendant styles (in this case,
> just the popups)?

Yes, and the idea is to make those floats take up no space when they  
come into view - as if they are absolute positioned but still acting  
and positioning themselves as floats.

The method is presented and described here...



... and on previous pages in that short series on floats. It's all  
according to CSS standards, and IE behaves relatively well - after  
debugging. I use this method all the time, to create "impossible"  
line-ups, overlapping and layering, without losing track of  
positioning when dealing with multi-column layouts across browser-land.

regards
Georg
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] alignment using CSS

[ross]

That to me looks like  tabular data. Why not...use tables.


- Original Message - 
From: "Sarah Atkinson" <[EMAIL PROTECTED]>
To: 
Sent: Friday, July 06, 2007 3:05 PM
Subject: [css-d] alignment using CSS


> Dear Oh Most Helpful List,
> 
> I have a list of hours
> 
> Monday - Friday  9:00 AM - 9:00 PM  
> Saturday 9:00 AM - 7:00 PM 
> Sunday Closed
> 
> 
> I want the times to be aligned on one side and the days aligned. Any
> idea on how to do this?  All I can find is hack using tables. There's
> got to be a better way.
> 
> I'm thinking code similar to this
> 
> 
> .hours{
> list-style:none;
> text-align:left;
> }
> 
> .time{
> text-align:right;
> position:absolute;
> left: 400px;
> }
> 
> 
> 
> Monday - Friday9:00 AM - 9:00 PM  
> Saturday9:00 AM - 7:00 PM 
> SundayClosed
> 
> 
> 
> Now this will work however if I Stick this in a div then start moving
> the div around the absolute positioning will kind of mess things up
> right? This will position it absolutely to the page not the div. I'd
> also like to have something a little flexible for future updates.
> 
> Any suggestions?
> 
> Sarah
> 
> 
> 
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] alignment using CSS

[Joel D Canfield]

> I have a list of hours
> 
> Monday - Friday9:00 AM - 9:00 PM  
> Saturday  9:00 AM - 7:00 PM   
> SundayClosed

the fact that you don't explicitly include the headings 'Days' and
'Hours' doesn't stop it being a table. it's tabular data; I'd consider
using pure CSS to be the krufty way, and tables a heroic stab and
semantic perfection.

or some such nonsense :)

joel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] alignment using CSS

[Sarah Atkinson]

Dear Oh Most Helpful List,

I have a list of hours

Monday - Friday  9:00 AM - 9:00 PM  
Saturday9:00 AM - 7:00 PM   
Sunday  Closed


I want the times to be aligned on one side and the days aligned. Any
idea on how to do this?  All I can find is hack using tables. There's
got to be a better way.

I'm thinking code similar to this


.hours{
list-style:none;
text-align:left;
}

.time{
text-align:right;
position:absolute;
left: 400px;
}



Monday - Friday9:00 AM - 9:00 PM 
Saturday9:00 AM - 7:00 PM
SundayClosed



Now this will work however if I Stick this in a div then start moving
the div around the absolute positioning will kind of mess things up
right? This will position it absolutely to the page not the div. I'd
also like to have something a little flexible for future updates.

Any suggestions?

Sarah



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css-d Digest, Vol 56, Issue 9

[dan]

Hello, thanks for your message but I'm on holiday now until the 16th July. 

If its urgent, please contact me on my mobile otherwise I'll get back to you on 
my return.

Kindest Regards
Dan.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] transparent pngs don't show transparent in IE6

[Rob Wilmshurst]

[EMAIL PROTECTED] wrote:
> Before I go delving into these. Do any of them validate. If no then I can't 
> use them.

They're both the same solution; the blog post I mentioned links to 
Rick's twinhelix.com site.
 
The stylesheet won't validate due to the nonstandard 'behaviour' 
property used (it's yet another proprietary IE thing) -- but this can be 
avoided by applying the 'behaviour' property via javascript or inside 
conditional comments (which aren't standards, but will validate).
A javascript example is in the demonstration source code at 
http://www.twinhelix.com/css/iepngfix/demo/.

-Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] transparent pngs don't show transparent in IE6

[ross]

Before I go delving into these. Do any of them validate. If no then I can't 
use them.

thanks,

R.
- Original Message - 
From: "Rick Faircloth" <[EMAIL PROTECTED]>
To: "'Christopher Blake'" <[EMAIL PROTECTED]>; "'css-d'" 

Sent: Friday, July 06, 2007 2:30 PM
Subject: Re: [css-d] transparent pngs don't show transparent in IE6


> Hi, Chris...
>
> I'm using a script from TwinHelix.com, called "IE PNG Fix v1.0 RC4"...
> that's
> the current version.  It uses a CSS behavior modification to allow png's 
> to
> work in IE 5.5 & IE 6.
>
> It's working perfectly...
>
> Go to www.TwinHelix.com and mouse-over CSS in the menu and you'll see the
> link.
>
> Check it out and let me know if you need some help implementing it.  Once
> it's
> working you'll never know it's there and you'll never want to leave home
> without it! :o)
>
> Rick
>
> (PS - Works on img's and background img's, too.  However, a limitation of 
> IE
> 6 won't
> allow the IE PNG Fix solution to react to positional attributes when an
> image is used
> as a background image of a div... but you can work around that...)
>
>
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Christopher 
> Blake
> Sent: Friday, July 06, 2007 7:01 AM
> To: css-d
> Subject: [css-d] transparent pngs don't show transparent in IE6
>
> HI,
>
> Hopefully if you check this page in any browser it should work ok.
> http://www.3pointdesign.com/websites2.html
> However in IE6 the transparency of the pngs does not work. I can go
> back and add the right background colour to all the images but would
> rather know if there was a fix, or whether that is the only option.
>
> Thanks
>
> Christopher Blake
> [EMAIL PROTECTED]
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] transparent pngs don't show transparent in IE6

[Rick Faircloth]

Hi, Chris...

I'm using a script from TwinHelix.com, called "IE PNG Fix v1.0 RC4"...
that's
the current version.  It uses a CSS behavior modification to allow png's to
work in IE 5.5 & IE 6.

It's working perfectly...

Go to www.TwinHelix.com and mouse-over CSS in the menu and you'll see the
link.

Check it out and let me know if you need some help implementing it.  Once
it's
working you'll never know it's there and you'll never want to leave home
without it! :o)

Rick

(PS - Works on img's and background img's, too.  However, a limitation of IE
6 won't
allow the IE PNG Fix solution to react to positional attributes when an
image is used
as a background image of a div... but you can work around that...)


-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christopher Blake
Sent: Friday, July 06, 2007 7:01 AM
To: css-d
Subject: [css-d] transparent pngs don't show transparent in IE6

HI,

Hopefully if you check this page in any browser it should work ok.
http://www.3pointdesign.com/websites2.html
However in IE6 the transparency of the pngs does not work. I can go  
back and add the right background colour to all the images but would  
rather know if there was a fix, or whether that is the only option.

Thanks

Christopher Blake
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] transparent pngs don't show transparent in IE6

[Ross]

Thats is one ugly fix. Does it validate?

http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] mozilla and opera bug?

[Luc]

Good morning Naja, 
It was foretold that on 5/7/2007 @ 01:49:50 GMT+0200 (which was
20:49:50 where I live) Naja Melan would write:

> i only see the outline when i just clicked the link, which is probably what
> you want, but if other browsers don 't do that (im using FF), try onclick="
> this.blur();"

Tnx for the suggestion Naja but unfortunately that doesn't do the
trick.

 
-- 
Best regards,
 Luc
_

Powered by The Bat! version 3.99.3 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.

"The world belongs to the enthusiast who keeps cool." - William McFee. 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] images won't align in IE

[Mark Henderson]

Christopher Blake wrote:
>>> Please help, I am clueless as to why it isn't working. Also I hate  
>>> the fact that if I
>>> try things I do not know whether they have worked - I will  
>>> upgrading to intel-mac soon
>>> and run parallels and windows as soon as I have the money!

Since money is an issue (and I hear you on that one) you can use the 
following free service to help:


It's not ideal, but definitely better than nothing. There is also 
browsercam.com but it isn't free.

> I have heard that things are looking ok in firefox and IE7. However  
> browser shots tell a different story in IE6.
> 
> First 2 pages I looked at:
> 
> http://www.3pointdesign.com/websites.html

Your problem is partly due to the fact that you haven't overridden the 
default border on links (hence the blue line around each image in IE). 
You have set the width of each of the divs 
(.web_left,web_middle,web_right) to be exactly the same as the image 
width, but with the additional border it allows the text to float up 
next to the image, causing the mess in the provided screen shots. I wont 
go into detail, but you have a little but of *divitus* going on. Change 
all the instances of  to  and 
use that as the wrapper around each of your screen shot rows. There's no 
need for the additional class and it doesn't change the appearance in FF 
or Opera (at least not locally). Next, insert a break before each text 
link to force the text onto its own line, and remove the clearing div 
just before the end of each .web_row div. It's not required, and this is 
also what's causing the right column drop in your second example.

Something like:



http://3pointdesign.com/two/"; title="3 
Point Design (V.1)" rel="gb_page_fs[]">
3 Point Design (V. 1)

http://www.neilparishmep.org.uk/"; 
title="Neil parish MEP" rel="gb_page_fs[]">
Neil parish MEP

http://www.allsetts.co.uk/"; 
title="Allsets Farm" rel="gb_page_fs[]">
Allsets Farm



And in your css:

.web_row {
   padding-bottom: 15px;/*provides a small gap between each row now that 
there is no clearer*/
   overflow: auto;
   zoom: 1;/*gives IE layout and allows padding-bottom to show inside 
floated parent div*/
}
.web_row img {
   margin: 0;
   padding: 0;
   border: 0;/*kill the border around the image screenshots*/
}

Here is a local screen shot of IE6 running on Win2k.

...and a live link, though I know you can't view it!


> http://www.3pointdesign.com/stuff/index2_IE6.png
> 
> The right hand column has disappeared here too!!
See above.

A description of the png issue in IE and its flaws can be found here:


A workable solution:
http://www.howtocreate.co.uk/alpha.html

However, I would say that your use of pngs in this case is, in my 
opinion, not an appropriate one (given the file size of these screen 
shots and the comparable result in jpg format). Using Fireworks 8 I can 
get your 40kb + pngs easily down to less than 15kb (in every case) 
without any significant decrease in quality and this would be my 
preferred solution.

And finally, don't use underscores in your class and ID names:
http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/


HTH
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Getting the z-index right in my css

[Ian Piper]

On 5 Jul 2007, at 3:56 pm, ron zisman wrote:

> Well, you have done enough to give the layout -- and my design  
> tools -- a chance. It's xml now :-)
> As such I can only make it work in xhtml capable browsers, so you  
> have to do the testing across browser-land at your end.
>
> Let's first get the layout under control, by adding...
>
> .hoverpic_cs5,
> .hoverpic_cs4,
> .hoverpic_cs3,
> .hoverpic_cs2,
> .hoverpic_cs1 {float: left;}
> .hoverpic_cs5 *,
> .hoverpic_cs4 *,
> .hoverpic_cs3 *,
> .hoverpic_cs2 *,
> .hoverpic_cs1 * {float: left; margin: 0 -500px -1000px 0;}
>
> The above will give you the right line-up, and keep the links from  
> expanding when hovered. I call the technique "removed floats".
> Once you have that working you can play with layering again.
>

Georg,

Interesting - that seems at a stroke to have sorted out the behaviour  
for everything except IE6. IE6 doesn't show the thumbnail or popup  
images. I do have a set of styles that are supposed to be for IE6 -  
do I have to do something with those styles? Example here:

.hoverpic_cs1 a
{
position: relative;
}

.hoverpic_cs1 a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverpic_cs1 a:hover .preview
{
top: -15px;
left: -75px;
}


I'm curious about the technique you have described here - what is the  
purpose of applying those large negative right and bottom margins?  
Presumably these only apply to the descendant styles (in this case,  
just the popups)?


Ian.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] mozilla and opera bug?

[Luc]

Good morning Richard, 
It was foretold that on 5/7/2007 @ 09:55:38 GMT+1200 (which was
18:55:38 where I live) Richard Grevers would write:



> Why are you so determined to destroy the accessibility of your site by
> removing the focus outlines, though?

It was the only thing i came up with to remove the outline temporarly,
hence my cry for help but i removed the offending css so it's still
accessible :-)

 
-- 
Best regards,
 Luc
_

Powered by The Bat! version 3.99.3 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.

"As long as you can laugh at yourself you will never cease to be
amused." 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] transparent pngs don't show transparent in IE6

[David Laakso]

Christopher Blake wrote:
>
> Hopefully if you check this page in any browser it should work ok.
> http://www.3pointdesign.com/websites2.html
>
>
> Christopher Blake
>
>
>
>
>   




FYI only. Got no PC at the moment. Got no fix (sorry).

With a MacBook (1680) in FF and Camino when I click an image all is 
well. If I  mousewheel the page [1] (don't ask why I would want to do 
that) then it bounces and does other peculiar stuff.

[1] 

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] transparent pngs don't show transparent in IE6

[Rob Wilmshurst]

I came across this post a couple of days ago which provides the fix - 
http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/
It uses a behaviour (.htc) file to work the magic.
It'll work on background images too. 

It's an ugly, ugly solution.  But we've been left with little choice :(

There's an A List Apart article from a few years back that provides a 
good overview of the problem - 
http://alistapart.com/stories/pngopacity/, but the techniques it 
advocates only work for img elements and are pretty well outdated now. 

HTH,
Rob


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] transparent pngs don't show transparent in IE6

[ross]

Well know bug.


There is a javascript fix but it only applies to  not background images 
for divs as far as I know.

Anyone else?

Ross
- Original Message - 
From: "Christopher Blake" <[EMAIL PROTECTED]>
To: "css-d" 
Sent: Friday, July 06, 2007 12:01 PM
Subject: [css-d] transparent pngs don't show transparent in IE6


> HI,
>
> Hopefully if you check this page in any browser it should work ok.
> http://www.3pointdesign.com/websites2.html
> However in IE6 the transparency of the pngs does not work. I can go
> back and add the right background colour to all the images but would
> rather know if there was a fix, or whether that is the only option.
>
> Thanks
>
> Christopher Blake
> [EMAIL PROTECTED]
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] transparent pngs don't show transparent in IE6

[Christopher Blake]

HI,

Hopefully if you check this page in any browser it should work ok.
http://www.3pointdesign.com/websites2.html
However in IE6 the transparency of the pngs does not work. I can go  
back and add the right background colour to all the images but would  
rather know if there was a fix, or whether that is the only option.

Thanks

Christopher Blake
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] images won't align in IE

[Christopher Blake]

On 5 Jul 2007, at 20:41, David Hucklesby wrote:

> On Thu, 5 Jul 2007 01:44:09 +0100, Christopher Blake wrote:
>> Hi,
>>
>> I posted something earlier but did not get a response =(
>>
>> I am trying to recreate the web gallery on my blog for my other  
>> site (work in progress):
>> http://www.3pointdesign.com/three/collage/collage.html
>>
>> My first attempts can be found here:
>> http://www.3pointdesign.com/websites.html
>> However the problem I encounter is that IE will not align the  
>> images side by side.
>>
>> So i simplified it and just added the images next to each other  
>> with a tiny amount of
>> margin: http://www.3pointdesign.com/websites2.html No luck either =(
>>
>> You can find the css for both 'attempts' here:
>> http://www.3pointdesign.com/styles/mystyle.css
>>
>> Please help, I am clueless as to why it isn't working. Also I hate  
>> the fact that if I
>> try things I do not know whether they have worked - I will  
>> upgrading to intel-mac soon
>> and run parallels and windows as soon as I have the money!
>>
> ~~~
>
> I just looked at your last attempt. It seems to be fine here on Win  
> xp pro
> with Opera 9, Firefox 2, and IE 7.
>
> Can you tell us what problems you are experiencing and in which
> version(s) of IE you see them?
>
> Cordially,
> David
> --
Hi David,


I have heard that things are looking ok in firefox and IE7. However  
browser shots tell a different story in IE6.

First 2 pages I looked at:

http://www.3pointdesign.com/websites.html

http://www.3pointdesign.com/websites2.html


This is how they look in IE7:

http://www.3pointdesign.com/stuff/ie7_websites.png

http://www.3pointdesign.com/stuff/ie7_websites2.png

Which is how i intended.

This is the same but in IE6:

http://www.3pointdesign.com/stuff/ie6_websites.png

http://www.3pointdesign.com/stuff/ie6_websites2.png

Where has the right hand column gone in IE6?? Why are transparent png  
not working?? Why aren't the images aligning??

This is my test index page in 7:

http://www.3pointdesign.com/stuff/index2_IE7.png

index 2 in IE7:

http://www.3pointdesign.com/stuff/index2_IE6.png

The right hand column has disappeared here too!!

Thanks, C
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] More info re Looking for help 3 column layout

[Martin Pistorius]

Hi there,
 
Regarding my previous post, someone suggested being able to see the
problem would help so you can have a look at the current live site at
www.napsa.org.za/portal go to languages and change it to "Afrikaans"
then use the text size widget on the right to increase the font size and
look at the "Gestremdheidsverwante inligting" link on the left Nav. IE
and Firefox react differently but you should get the idea.  
Thanks,
 
Martin 


 


-- 
This message is subject to the CSIR's copyright, terms and conditions and
e-mail legal notice. Views expressed herein do not necessarily represent the
views of the CSIR.
 
CSIR E-mail Legal Notice
http://mail.csir.co.za/CSIR_eMail_Legal_Notice.html 
 
CSIR Copyright, Terms and Conditions
http://mail.csir.co.za/CSIR_Copyright.html 
 
For electronic copies of the CSIR Copyright, Terms and Conditions and the CSIR
Legal Notice send a blank message with REQUEST LEGAL in the subject line to
[EMAIL PROTECTED]


This message has been scanned for viruses and dangerous content by MailScanner, 
and is believed to be clean.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] in-line image replacement

[Janos Hardi]

Hi,

Thanks for your comments and tips. I updated the test case for further
examination. I removed the last-child 'filter' as well.

The idea/logic is as simple as that: because i cannot use any image
replace technique or workaround ('heading text' replaces involving
positioning, or flash techniques etc.) i decided to prepare a
workaround for this issue. In fact it is not for fun but for
fulfilling employee request :)

The accessibility issue is a hard one - i mean 'css on, images off',
and i cant see any workarounds for this at the moment.

Thanks for help again,

Janos


On 7/5/07, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:
>
> On Jul 5, 2007, at 8:33 AM, Ingo Chao wrote:
>
> >> I prepared a tiny text/image replacement technique that could be
> >> interesting if you want to replace pieces of text with images.
> >> Here is a test case: http://yaanno.googlepages.com/imagereplace.html
> >> I know there are 2 serious problem with this: it doesn't support
> >> khtml
> >> and doesn't conform with "images off css on" requirement.
> >> Can you provide some workaround for these issues?
> >>
> >> Regards,
> >>
> >> Janos
> >
> > Since you are not commenting your hack logic, I can only guess why you
> > are serving a padding to some browsers, but probably zeroing the width
> > helps in Safari.
> >
> > body:last-child span.four-stars{
> >   padding: 0 0 0 40px;
> >   width: 0; /* add */
> >   }
> >
> >
> > body:last-child span.three-stars{
> >   padding: 0 0 0 30px;
> >   width: 0; /* add */
> >   }
>
> There are various weaknesses in the logic used
> * Trying to rely on font-size:0: fails. (the testcase only displays
> 'correctly', even with the addition of Ingo's use of width, with my
> default configuration: minimum font-size set to 12px (Safari, Webkit,
> Gecko trunk builds).
> Without that minimum font-size, the inline-block drops below the base
> line, the stars are clipped (try adding a border to the inline-block).
> (and the box is emptyfied by the use of the negative text-indent.)
>
> * relying on the :last-child selector: that works in Safari 2.0, but
> fails in Safari 3.0beta and Webkit. The selector has been disabled in
> those due to the multiple bugs it has.
>
> * as Ingo asked: why the use of padding within that last-child
> selector, in combination with 'width' ? Maybe  because Firefox 2.0
> and older don't apply the width to the span (thoise browsers don't
> understand 'inline-block', and hence don't apply the 'width' to the
> span.
> Easy to solve, just use the padding-left and omit the width. If the
> use of width is needed for iExploder 6/7, use it in a CC.
>
>
> Philippe
> ---
> Philippe Wittenbergh
> 
>
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/