I need help to resolve HTML5/CSS3 cross-browser issues

Get Started
1

I am working on a website prototype using HTML5 and CSS3. I am working to resolve cross-browser issues. Currently I have two tests. One uses Modernizr JavaScript and the other uses eCSStender JavaScript to extend CSS3 to IE and other browsers. I need help.

Here are the tests:
ecsstender – http://www.craigwebbart.com/shalizarproperties/
modernizr – http://www.craigwebbart.com/shalizarproperties/shalizar-project03.htm

Here are some questions:

In each of these tests, I also have html5shiv available, and I’ve integrated DXImageTransform.Microsoft.gradients into the CSS for gradients. Do these alternatives/redundant JS/proprietary CSS codes conflict with either the modernizr.js or the ecsstender.js?

I’ve used some browser viewers to see the pages but results are inconclusive. No IE views came back. From what I see, the gradients are working on some browsers but the round corners are not. What can I do to get round corners to work in IE?

Also: Would I be better off to use http://html5boilerplate.com/ or another JavaScript?

Additionally, if not this, can you recommend an appropriate forum to participate in? Any advice would be appreciated.

Thank you in advance

2

There’s a space in the conditional comment that I left in. Replace it with the below and it works.


        <!--[if lte IE 8]>
        <link href="ie.css" rel="stylesheet" media="all" type="text/css">
        <![endif]-->
3

Hi,
not the tag gradient it should be Alpha i believe???
May be this link will help you…

CSS3 Solution for IE

Details on CSS3 solution on IE

You may also visit this link to make your site optimized for CSS integration… Time saver css tools and resources for web developers

Please be very careful while integrating these css files and make sure you are following yahoo webmaster regulation in practice. I hope you already have the firebug tools installed on your site with web speed tester!!!

:slight_smile:

4

Thanks Evan2all,

I will test Selectivizer and see how that works too. I’m having trouble with round corners in IE. I have incorporated progid:DXImageTransform.Microsoft.gradients into the CSS. What is the gradient effect that you use for IE?

Last night I built a new prototype - http://www.craigwebbart.com/shalizarproperties/shalizar-project04.htm - using a border-radius.htc file in a dedicated IE.css as suggested by Dimox ( http://dimox.net/cross-browser-border-radius-rounded-corners/ )

I have also added JavaScript [if IE] document.createElement(“header”); scripts, and I also changed @Rem http://remysharp.com’s html5shim ( http://html5shim.googlecode.com/svn/trunk/html5.js ) to read for any IE - [if IE].

Perhaps this is too many experiments all at once. I do not know if these conflict with each other or not. I cannot tell yet whether it works or not. The cross-browser viewer I am using is http://browsershots.org
Is there another one that you prefer?

In the comment in Dimox’s post there is a note to try PIE ( http://css3pie.com/ ). I’ve located the website and I plan to test that as well – has anyone used PIE?

5

Thank you for your note. it gives me hope. I feel frustrated by this process. Thanks for the reminder about Selectivizer. I am going to try it next. I have built a basic HTML5 document that I can individually test the various JS IE enhancements in isolation from each other.

Here is the current crop of tests, testing Modernizr + PIE

Modernizr only:
http://craigwebbart.com/shalizarproperties/ALA_ModernizrSample_04advanced.htm

Modernizr with a PIE div added
http://craigwebbart.com/shalizarproperties/ALA_ModernizrSample_04_pie.htm

Modernizr removed from HTML5 - PIE div only
http://craigwebbart.com/shalizarproperties/ALA_No_Modernizr_04_pie.htm

Results so far: (As far as I can tell) Modernizr works on the HTML5 only. No CSS3 stuff (round corners shadow)

PIE provided round corners, gradient and shadow where explicitly specified.

On the last test with no Modernizr, the PIE div disappeared completely.

Gradients:
The original Modernizr HTML5 page did not have gradients. I added in the background and in a div surrounding a paragraph. This gradient uses the progid:DXImageTransform filters. The PIE div does not use the progid:DXImageTransform. PIE gradient uses -pie-background.

PIE worked in IE 6, 7. It did not work at all in IE 8 and only the shadow in 9 Beta. I need to test PIE combined with the redundant progid:DXImageTransform filters to see if I can get IE8 to work.

Rats. I was hoping that these programs would “just do it”.

Selectivizer testing is next. . .

I saw from the Smashing Labs article that I need to review my code. The time saver link is confusing to me. I do not know what to do with this. Please explain.

6

It ain’t working in IE 7 or 8 so far. . .
My current builds are:
http://www.craigwebbart.com/shalizarproperties/shalizar-project05.htm
http://www.craigwebbart.com/shalizarproperties/shalizar-project05b.htm

I’m going to start testing each of these add-ons to see if they work on IE individually to try and isolate what I am doing wrong.

7

Here is the latest update on the HTML5/CSS3 web page. I am still trying to make the page show up correctly in Internet Explorer.

The current build is here:
http://www.craigwebbart.com/shalizarproperties/shalizar-project06.htm

This version uses Modernizer.js + PIE.htc. I have also incorporated some of Paul Irish’s ideas and code from Boilerplate.

PIE is now working, but my website breaks in IE + I have coding errors to work out.

IE8 works the best.
IE 7 has a problem with The 2nd-level menu showing.
IE6, the menu problem is more profound, plus the Pngfix that I picked is not working. The one I used, I stole from clearleft.com’s home page. I need to see that it is installed properly or use the other one that Paul Irish recommends.

The menu breaking in IE 7 and 6 are a little beyond my skill set and I need help. Will the Selectivizer js that Evan2all suggested help with this, or can I use a simpler, more direct hack? Advice from you on this will save days and days of blind testing. I do not even know what to Google.

The top and bottom menu were originally inspired by a tutorial at Webdesignerwall

The other page elements were inspire by a tutorial at onextrapixel.com, although the original has pretty well been effaced.

Lastly, I copied a lot of the Paul Irish Boilerplate CSS into mine. I plan to go into it and weed it down some. My previous style sheets incorporated Myers + others + Blueprint CSS.

All IE browsers have an odd color in the <article>. I must have a flaw in the CSS. Also, the Body Gradient is breaking in all browsers. I suspect that I have a broken <div> somewhere. - These I am working on.

There seems to be no gradient with Windows/FF3.0 Can anyone suggest a link to learn about targeting FireFox browsers? I want to know if I can take the PIE out and put the windows gradients back in for FF3.0?

Lessons learned:
It took three days for me to get PIE to work. Helpful hint: PIE does not work with -ms-filter: "progidXImageTransform.Microsoft.gradient. It is either/or. Lots of testing to find that out. Also, I read that PIE does not work well with the body tag. This may be causing the background gradient problem.

Also: do not use Boilerplate from the Boilerplate.com website. The current build is on Paul Irish’s Github (this is 10/18/10 - this info may change).

I have been using http://cross-browser.appspot.com/ to see cross-browser for testing. It is fast and I like it. What do you use?

So, anyway, one week in – I am still working at cross-browser HTML5/CSS on this simple project.

I need pointers with the CSS menu.

Any help or advice will be much appreciated.

8

You wouldn’t need to add the border-radius property to your IE file as IE doesn’t recognize that property anyway.

I have created this small demo so you can see how it works: http://rockatee.com/temp/roundedcorners.html

To get it to work, you need the PIE.htc file. The htc file is an HTML document which contains propietary MS scripting. See here.

In your header you target IE versions that are less or equal to version 8:

        <!-- [if lte IE 8]>
        <link href="ie.css" rel="stylesheet" media="all" type="text/css">
        <![endif]-->

The IE specific CSS that you can put in your external IE stylesheet (or leave in your main CSS to save your users HTTP requests):

#content {
    behavior:url(PIE.htc);    
}

The main CSS:

            #content {
                background:#fff;
                -moz-border-radius:24px;
                border-radius:24px;                
                width:50%;
                margin:auto;
                padding:2em;
            }

Or just have a look at the demo’s source code I posted above. :slight_smile:

9

Thank you again Kohoutek,

Yes, I downloaded PIE late last night at your recommendation. I will test it now.

Your instructions and example are very useful. I see that PIE is a HTC file, like Dimox’s Round corner HTC file. I will have to learn more about what a HTC file is/does.

I put his into a separate IE.CSS file. Is that the correct way? Also, I only included the round corner property within the IE.CSS file. Is that correct, or do I need to add the entire set of properties for each selector (will IE read the main CSS too?)

Example:
.nav {
border-radius: 2em;
behavior: url(border-radius.htc);
}

Thanks again for your help!

10

You can get rounded corners and almost all decorative CSS3 features to work with CSS3PIE except for the text-shadow property. The latter is said to be in the works, too.

Steps:

  1. Download the CSS3PIE (version 0.2 beta is the latest) or get it from the github repository

  2. Upload the PIE.htc file to your server

  3. Reference the element(s) where you want rounded corners support like so:

.roundedcorners {
-moz-border-radius: 14px; 
-webkit-border-radius: 14px; 
border-radius: 14px;
}

For IE support, add this line (or create a separate stylesheet for IE, if you want your main stylesheet to validate)

.roundedcorners {
-moz-border-radius: 14px; 
-webkit-border-radius: 14px; 
border-radius: 14px;
behavior: url('PIE.htc'); /* fix to emulate border-radius support in IE */
}

Be advised that such aids have quite an impact on the site’s performance in IE, so it isn’t an optimal solution either.

11

Thanks Kohoutek,

PIE is going to be my next experiment. CSS3 seems to be the main impediment, not HTML5. Curiously, the HTML5 elements are workable and if needed I can always change the IDs back into XHTML, as you suggest.

I really need the round corners and gradients to work. The client asked that the navigation “look like Apple’s”, and this is my take on that for his brand, within my current level of expertise. It’s hard to believe that round corners are such a problem.

I would like to be a forward-leaning web developer, so I am following the bleeding-edge experts over the Internet. However, I need mentors and I really appreciate your help.

I will look for Paul Irish’s bare-bones offering and hope I find it. I will also look at clearleft.com and try to understand what you are referring to.

Thanks so much!

@CWebba1

PS: My current set of failed attempts are at:
http://www.craigwebbart.com/shalizarproperties*(index.html)

http://www.craigwebbart.com/shalizarproperties/shalizar-project03.htm

http://www.craigwebbart.com/shalizarproperties/shalizar-project04.htm

12

As this is a design for a real estate firm, I’d recommend you do not use HTML5 at all. CSS3 sure, for progressive enhancement, but a site with that target audience will be high on IE usage, so I think you’de be better off using HTML 4.01 which is the current standard and there’s no reason you need HTML5 for a simple site like this.

For CSS3, I recommend CSS3 PIE. It supports many of the CSS3 features you’re using on your site (including rounded corners). It’s not a big Javascript file and does a fine job. :slight_smile:

As for the html5-boilerplate template, it’s quite an exhaustive template, has a ton of features you might not need. You could use the barebones version Paul Irish offers. It’s good but I’m not convinced you are doing users of the site any favours in using HTML5 just yet. If you must go this route, then my recommendation would be to not use the new elements but rather do it the smart way like the folks on clearleft.com and use the divisons and give those ids that emulate a HTML5 syntax and structure.

Just my personal opinion, obviously.

13

Have you read my post at all? I recommended PIE in the post above yours.

14

Here are more tests: Testing Remy’s Shiv and a combo of selectivizr+mootools.

http://craigwebbart.com/shalizarproperties/ALA_shiv_04_pie.htm

http://craigwebbart.com/shalizarproperties/ALA_shiv_05_pie.htm

shiv_05 test has some additional CSS to define the HTML5 elements and give them block.
[document.createElement(“header”); etc.]
It worked for much of the HTML5 but not the css3.

http://craigwebbart.com/shalizarproperties/ALA_selectivizr-mootools_test_04advanced.htm

Selectivizr did nothing at all for this layout, but it is described as a tool to add Pseudo classes – something I don’t need here. (? wonder why it was recommended?)

This batch of tests is rough to be sure. I’m just throwing at the code to see what sticks.

So far, a combination of Modernizer and PIE seems most appropriate for the project at hand. The screen shots for the cross-browser viewer displayed a daunting mishmash of IE browser problems. It is looking like an individual style sheet will be needed to fix each Internet Explorer browser display. Why the people at #JSConf didn’t throw the MS people off the ****ing stage I don’t know. . .

Tomorrow AND Tomorrow AND Tomorrow . . .

15

Hi,

I didnt use these two converter before. But Selectivizr is one of the most popular and recommended one. Here is the link for selectivizr; http://selectivizr.com/

for gradient issue I will suggest not to use these framework markups. for IE you already have an gradient effect(not for IE6 tough). It is better to include a custom reset for IE 6 or IE 7.

sorry couldn’t help you that much, but i follow these rules.

16

I am still working on this round drop-down menu with gradient project. It has been bloody, but progress has been made. I just need a little help please.

This is the current build:
http://www.craigwebbart.com/shalizarproperties/shalizar-project07ie_test03_06.htm

It took a great deal of work getting the drop-down menu to appear correctly in IE. I had no idea that CSS3 gradients and round corners would be such a bear (noob). The drop-down menu is a Frankenstein monster made from three different menu tutorials, so there may be some XS code to remove (?)

I need help. The menu CSS is separate from the other CSS, so that will make it easier to help me. :slight_smile:

Solutions to any of these flaws will be greatly appreciated.

I can only see IE results in an online tester. Do the drop-downs work correctly? Y/N + which browser?
The http://cross-browser.appspot.com browser tester that I am using shows the following problems in IE6, IE7, FF3.5, FF3.6 and Safari_05 OSX:

IE6:

  1. The menu is twice as fat (tall) as it should be. I’ve read about a “IE 6 double-margin bug” – is that the right rabbit-hole I should follow to resolve this? Also, some of the menu styles, such as the menu width, are not being implemented, leading me to believe that the IE6 hacks embedded in the menu CSS are not formatted correctly (?).

  2. The PNG is still not transparent in IE6. I have installed the DD_belatedPNG png fix from from http://www.dillerdesign.com/experiment/DD_belatedPNG/, as recommended in the newly revised (this week) HTML5 Boilerplate.

I’m not sure if the DD_belatedPNG JS at page bottom is installed correctly. Do I need to format the JS Script in some way(?) I don’t understand the sparse directions (noob):rolleyes:. The image is located in the HTML header. I have added a class of “png_bg” Is this correct(?)

IE7:
Just popped up problem: The Bottom Menu broke in this test, 1st time. The info box may be impinging on it but it looks right to me (?)

Safari_05 OSX:

  1. The menu is showing up square in the Safari 5 OSX screenshot. Round corners ought not be a problem with webkit.
    Any ideas why this is(?) I am using OSX 4.6 Tiger / Safari 4.1.2 to build. :\

FireFox 3.5 & 3.6:

  1. These browsers do not support gradients. Are they popular enough that I should support them? If so, I may need to add background images, just for them (Oh the irony). The IE gradients are now controlled by PIE. No interface with Modernizer and PIE exists, so PIE gradient benefits are not getting passed to FF. Any ideas (?)

  2. If I add background images for FF, then I want to target only Firefox. Is there a way to make a style sheet (or hack) just for FireFox (?)

Chrome 6.0:
My screenshot shows the round corners as stair-stepping. Is this true (?) Is there a way to support Chrome and enhance the presentation(?) How do I target hacks to Chrome(?)

Details Details Details.

Please help me to refine this round, gradient-enhanced drop-down menu so that it works correctly across browsers. CSS3 get short-shrift compared to HTML5 for some reason. The website has to look pretty, don’t you think (?)
:eye: