Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML5 website, how do i make it load on old browsers
New Posts  All Forums:Forum Nav:

HTML5 website, how do i make it load on old browsers

post #1 of 28
Thread Starter 
Hello Everyone,

Ive been working on a website for a small start-up company that i am creating. The problem is that i developed the website around an HTML5 template. I know a fair share of HTML, but i wanted to use this HTML5 template simply because it already had all the external CSS written out (im bad with CSS). The website doesnt seem to load on old browsers because it is HTML5. What should i do to avoid this problem? Some of my clients still use the old IE browsers....

Thanks for the help!
Eric
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
post #2 of 28
One option would be warning them that they are using out-dated software and because of that they can't view the site, unless they update.
Maybe also present them with a shortcut for the update they need.
post #3 of 28
I assume you're just using tags like header, nav, article, footer, etc?


If so, set the display of those tags to "block" in the CSS:
Code:
header, nav, article, footer {  
    display: block;  
}


Then you'll have to create those elements in your Javascript:
Code:
document.createElement("header");  
document.createElement("nav");  
document.createElement("article");
document.createElement("footer");

That should take care of most HTML5 problems in older browsers.
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
post #4 of 28
Thread Starter 
Quote:
Originally Posted by EduFurtado View Post

One option would be warning them that they are using out-dated software and because of that they can't view the site, unless they update.
Maybe also present them with a shortcut for the update they need.

Thats an idea. Have a link on the top that says "If not loading properly, please use IE9, Firefox, Chrome, etc".

Quote:
Originally Posted by ImmortalKenny View Post

I assume you're just using tags like header, nav, article, footer, etc?
If so, set the display of those tags to "block" in the CSS:
Code:
header, nav, article, footer {  
    display: block;  
}
Then you'll have to create those elements in your Javascript:
Code:
document.createElement("header");  
document.createElement("nav");  
document.createElement("article");
document.createElement("footer");
That should take care of most HTML5 problems in older browsers.

I will try this, thanks. Should i apply this to all of my CSS scripts? I have the following:

-style.css
-style-1000px.css
-style-desktop.css
-style-mobile.css

Also, as far as adding the elements to my javascript, how do i do that? biggrin.gif Is it the Javascript in the HTML document, or is it a standalone document?

If anyone wants to take a look at the website under development to see if you can figure it out, please PM me!
Edited by Eric335 - 10/15/12 at 7:42am
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
post #5 of 28
well the question should really be asked what is the demographic the website is for?? If you are talking about visitors in their 20s or 30s I seriously doubt a margin of viewers would still be using IE 6 or 7.
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
post #6 of 28
Quote:
Originally Posted by Eric335 View Post

I will try this, thanks. Should i apply this to all of my CSS scripts? I have the following:
-style.css
-style-1000px.css
-style-desktop.css
-style-mobile.css

It just needs to be in one of them, I'd throw it into style.css but it doesn't really matter.

Quote:
Originally Posted by Eric335 View Post

Also, as far as adding the elements to my javascript, how do i do that? biggrin.gif Is it the Javascript in the HTML document, or is it a standalone document?

I wasn't sure if you were using a javascript file for something else already. Just throw that code into a script tag in the head of each page that uses the HTML5 tags, or your template file if you're using a framework like Zend or CakePHP.
Code:
<head>
     <script type="text/javascript">
          document.createElement("header");  
          document.createElement("nav");  
          document.createElement("article");
          document.createElement("footer");
     </script>
</head>
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
Time Sink
(21 items)
 
 
CPUMotherboardGraphicsRAM
Intel 2500k ASUS Sabertooth Z77 EVGA GTX 670 FTW G.Skill Ripjaws 8GB (2x4GB) DDR3 1600 
Hard DriveHard DriveHard DriveCooling
Samsung F3 1TB Crucial C300 128GB Corsair Force GT 60GB Noctua NH-U12P 
OSOSMonitorMonitor
Windows 8.1 Professional x64 Apple OS X Mavericks HP ZR24w LG IPS226V 
KeyboardPowerCaseMouse
Razer BlackWidow Seasonic X750 Lian-Li PC-A05B Logitech M500 
Mouse PadAudioAudioAudio
Mionix Propus 380 Zero USB DAC (2009 Version) Emotiva Pro airmotiv 4 Beyerdynamic DT990 600ohm 
Audio
Shure SRH-840 
  hide details  
Reply
post #7 of 28
Modernizr! It is a JavaScript library made exactly for this purpose!
post #8 of 28
Thread Starter 
Quote:
Originally Posted by graphicsman View Post

well the question should really be asked what is the demographic the website is for?? If you are talking about visitors in their 20s or 30s I seriously doubt a margin of viewers would still be using IE 6 or 7.

Unfortunately, my demographic has people ranging from 18-80 redface.gif
Quote:
Originally Posted by ImmortalKenny View Post

It just needs to be in one of them, I'd throw it into style.css but it doesn't really matter.
I wasn't sure if you were using a javascript file for something else already. Just throw that code into a script tag in the head of each page that uses the HTML5 tags, or your template file if you're using a framework like Zend or CakePHP.
Code:
<head>
     <script type="text/javascript">
          document.createElement("header");  
          document.createElement("nav");  
          document.createElement("article");
          document.createElement("footer");
     </script>
</head>

Thanks, i will try this.
Quote:
Originally Posted by stupid View Post

Modernizr! It is a JavaScript library made exactly for this purpose!

I stumbled across this on my google searching. I will try Immortalkenny's method, and if it doesnt work, i will try this as well. How exactly do i use Modernizer?
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
post #9 of 28
I think mostly what you are looking for is here - but as you can see on that page, there is a lot mroe it can do, such as fallbacks when something will not work.
post #10 of 28
Thread Starter 
Quote:
Originally Posted by stupid View Post

I think mostly what you are looking for is here - but as you can see on that page, there is a lot mroe it can do, such as fallbacks when something will not work.

Im having trouble installing Modernizr... I got the development build here and select CSS and HTML5, generate, and get a long JS code.

What exactly do i do with it? I threw it in script tags after my stylesheet reference and it didnt work...
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i5-3570k ASUS MAXIMUS V FORMULA Gigabyte GTX 670 G.SKILL Ripjaws X Series 16GB (2 x 8GB) 240-Pin... 
Hard DriveHard DriveOptical DriveCooling
Hitachi 2TB 7200RPM Crucial M4 128GB SSD ASUS 24X DVD-Burner Corsair H100 Extreme Liquid Cooling 
CoolingCoolingOSMonitor
NZXT Blue LED 140mm Fans NZXT Switch 810 Case Fbnans- 140mm Windows 7 Professional 64-Bit ASUS VE278Q 
KeyboardPowerCaseMouse
Logitech G510 Antec High Current Gamer Series 900W PSU NZXT Switch 810 Mionix Naos 3200 
Mouse PadAudioAudioOther
Kensington 56001 Optical-Enhancing Mouse Pad JVC Sound System Corsair Vengeance 2000 NZXT Sentry-2 Fan Controller 
Other
NZXT Hue 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML5 website, how do i make it load on old browsers