Help needed with CSS Browser Compatibility

[Shelly]

I am posting this for my daughter who is a web designer but does not have
access to this group.


Here's the page I'm working on:

http://ftp.seagull-seafarer.org/new


If you look at this on these browsers, it's perfect: IE6, IE7, Opera,
Safari, Netscape, Firefox (and those are the ones we're catering to).

Now, here's things to note: On these pages, I employed PNGs, and used an
iepngfix thingie (with htc and a blank.gif and a css style that reads: img,
div { behavior: url(iepngfix.htc) } )

It works beautifully, as you can see if you look at IE6, on the front page.

Now, click About Us.

This works perfectly on: IE7, Netscape, Safari, and Firefox.

On Opera, there's a line after the header that needs to be removed...

But the worst is with IE6.

I can't figure out why the menu suddenly doesn't work...the images that are
called in via the CSS sheet as backgrounds are invisible until you scroll
over most of them, then they decide to show, but not permanently...

Also, if you click on "Boards" you will notice that the PNG fix no longer is
working, the bullets disappear as you scroll up and down...and will reappear
if you refresh the page, until you scroll again.

I have tried a Clearfix. It didn't work.

Now, to add to the mess, for some reason a simple "Arial" font in italic,
smallcap, defined in the stylesheet, looks bitmapped on IE6.

Please, please help ASAP! I'm pulling my hair out now, and I really don't
want to go bald.

Here's the stylesheets to look at:
http://ftp.seagull-seafarer.org/new/css/global.css
http://ftp.seagull-seafarer.org/new/css/menu_inside.css
http://ftp.seagull-seafarer.org/new/css/second.css

 

[Helpful person]

I am posting this for my daughter who is a web designer but does not have
access to this group.

Here's the page I'm working on:

http://ftp.seagull-seafarer.org/new

If you look at this on these browsers, it's perfect: IE6, IE7, Opera,
Safari, Netscape, Firefox (and those are the ones we're catering to).

Now, here's things to note: On these pages, I employed PNGs, and used an
iepngfix thingie (with htc and a blank.gif and a css style that reads: img,
div { behavior: url(iepngfix.htc) } )

It works beautifully, as you can see if you look at IE6, on the front page.

Now, click About Us.

This works perfectly on: IE7, Netscape, Safari, and Firefox.

On Opera, there's a line after the header that needs to be removed...

But the worst is with IE6.

I can't figure out why the menu suddenly doesn't work...the images that are
called in via the CSS sheet as backgrounds are invisible until you scroll
over most of them, then they decide to show, but not permanently...

Also, if you click on "Boards" you will notice that the PNG fix no longer is
working, the bullets disappear as you scroll up and down...and will reappear
if you refresh the page, until you scroll again.

I have tried a Clearfix. It didn't work.

Now, to add to the mess, for some reason a simple "Arial" font in italic,
smallcap, defined in the stylesheet, looks bitmapped on IE6.

Please, please help ASAP! I'm pulling my hair out now, and I really don't
want to go bald.

Here's the stylesheets to look at:http://ftp.seagull-seafarer.org/new...//ftp.seagull-seafarer.org/new/css/second.css

When I look at your stylesheets with notepad, apart from a lack of
organization that makes them very difficult to read, I see a lot of
non printing characters.

 

[Shelly]

FYI, Notepad doesn't grok Unix-style newlines. Use a better editor and
you'll see a big difference.

My daughter fixed a lot of her problem. She just sent me this message
asking me to post it:

**********
The only problem I have left is the "Vanishing Bullet" issue.

It happens on IE 6 and IE7. So you can look at it in IE7 to see.

If you pull up the "Boards" page, you may or may not see the star bullets.
Scroll up and down, and sometimes they go poof.

Here's the code that calls for the bullets:

li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-image: url(../i/img_bullet_star.png);
list-style-position: inherit;
padding-bottom: 5px;
}

(in IE6, it calls for .gif instead of .png)
****************

 

[Bergamot]

When I look at your stylesheets with notepad, apart from a lack of
organization that makes them very difficult to read, I see a lot of
non printing characters.

FYI, Notepad doesn't grok Unix-style newlines. Use a better editor and
you'll see a big difference.

 

[Bergamot]

It happens on IE 6 and IE7. So you can look at it in IE7 to see.

If you pull up the "Boards" page, you may or may not see the star bullets.

I see no "Boards" page. Post the URL.

 

[Shelly]

I see no "Boards" page. Post the URL.

I did in the original submission of this thread. However, in the meantime,
she solved her problems. Thanks anyway.

 

[dorayme]

The only problem I have left is the "Vanishing Bullet" issue.

Vanishing bullets is sometimes a padding issue:

http://tinyurl.com/26hvhc

If this helps, please send 2 cents.

 

[Bone Ur]

Well bust mah britches and call me cheeky, on Tue, 04 Dec 2007 14:06:35
GMT Shelly scribed:

I am posting this for my daughter who is a web designer but does not
have access to this group.

Yeah, I used to blame it on my ex-wife. Anyway, glad to see "your
daughter" got everything fixed.