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
10/15/12 at 7:01am
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
White, Red, Black, White
(21 items)
  		  
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 
View all
  hide details  
Reply
White, Red, Black, White
(21 items)
  		  
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 
View all
  hide details  
Reply
post #2 of 28
10/15/12 at 7:16am
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.
Room's silent warmer
(15 items)
  		  
CPUMotherboardGraphicsRAM
i5 750 @ 3.6 P7P55 EVO ASUS 5870 V2 @950/1250 8gb @1600 cas 9 @1.5v 
Hard DriveOptical DriveCoolingOS
crucial m4 256gb + 3tb seagate none venomous-X + 2 P/P yate loons @5v 8 pro x64 + mint 14 cinnamon x32 
MonitorKeyboardPowerCase
PX2370 random Antec HPC-850 BX-500 aerocool 
MouseMouse PadAudio
CM Storm Spawn QcK+ Shure SRH 750DJ+FiiO E5 
View all
  hide details  
Reply
Room's silent warmer
(15 items)
  		  
CPUMotherboardGraphicsRAM
i5 750 @ 3.6 P7P55 EVO ASUS 5870 V2 @950/1250 8gb @1600 cas 9 @1.5v 
Hard DriveOptical DriveCoolingOS
crucial m4 256gb + 3tb seagate none venomous-X + 2 P/P yate loons @5v 8 pro x64 + mint 14 cinnamon x32 
MonitorKeyboardPowerCase
PX2370 random Antec HPC-850 BX-500 aerocool 
MouseMouse PadAudio
CM Storm Spawn QcK+ Shure SRH 750DJ+FiiO E5 
View all
  hide details  
Reply
post #3 of 28
10/15/12 at 7:17am
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.
Reply
Reply
post #4 of 28
10/15/12 at 7:34am
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
White, Red, Black, White
(21 items)
  		  
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 
View all
  hide details  
Reply
White, Red, Black, White
(21 items)
  		  
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 
View all
  hide details  
Reply
post #5 of 28
10/15/12 at 7:41am
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 
View all
  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 
View all
  hide details  
Reply
post #6 of 28
10/15/12 at 10:19am
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>
Reply
Reply
post #7 of 28
10/15/12 at 10:54am
Modernizr! It is a JavaScript library made exactly for this purpose!
Falcon
(7 items)
 
XPS 13
(13 items)
  		 
CPUGraphicsRAMHard Drive
Intel Core i7 2860QM GeForce FTX 560m  G.Skill DDR3 Samsung SSD 
Optical DriveOSMonitor
8x DVD Writer Windows 7 15.6" Matte LCD Panel - 1920x1080 
View all
CPUGraphicsRAMHard Drive
Core 2 Du0 P8800 GeForce 210m 512 6GB DDR3 500GB SATA 7200 rpm 
Optical DriveOSMonitor
Slot Load DL CD/DVD Windows 8 Professional 13.3" HD WXGA WLED LCD 
View all
  hide details  
Reply
Falcon
(7 items)
 
XPS 13
(13 items)
  		 
CPUGraphicsRAMHard Drive
Intel Core i7 2860QM GeForce FTX 560m  G.Skill DDR3 Samsung SSD 
Optical DriveOSMonitor
8x DVD Writer Windows 7 15.6" Matte LCD Panel - 1920x1080 
View all
CPUGraphicsRAMHard Drive
Core 2 Du0 P8800 GeForce 210m 512 6GB DDR3 500GB SATA 7200 rpm 
Optical DriveOSMonitor
Slot Load DL CD/DVD Windows 8 Professional 13.3" HD WXGA WLED LCD 
View all
  hide details  
Reply
post #8 of 28
10/15/12 at 11:49am
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?
White, Red, Black, White
(21 items)
  		  
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 
View all
  hide details  
Reply
White, Red, Black, White
(21 items)
  		  
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 
View all
  hide details  
Reply
post #9 of 28
10/16/12 at 9:36am
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.
Falcon
(7 items)
 
XPS 13
(13 items)
  		 
CPUGraphicsRAMHard Drive
Intel Core i7 2860QM GeForce FTX 560m  G.Skill DDR3 Samsung SSD 
Optical DriveOSMonitor
8x DVD Writer Windows 7 15.6" Matte LCD Panel - 1920x1080 
View all
CPUGraphicsRAMHard Drive
Core 2 Du0 P8800 GeForce 210m 512 6GB DDR3 500GB SATA 7200 rpm 
Optical DriveOSMonitor
Slot Load DL CD/DVD Windows 8 Professional 13.3" HD WXGA WLED LCD 
View all
  hide details  
Reply
Falcon
(7 items)
 
XPS 13
(13 items)
  		 
CPUGraphicsRAMHard Drive
Intel Core i7 2860QM GeForce FTX 560m  G.Skill DDR3 Samsung SSD 
Optical DriveOSMonitor
8x DVD Writer Windows 7 15.6" Matte LCD Panel - 1920x1080 
View all
CPUGraphicsRAMHard Drive
Core 2 Du0 P8800 GeForce 210m 512 6GB DDR3 500GB SATA 7200 rpm 
Optical DriveOSMonitor
Slot Load DL CD/DVD Windows 8 Professional 13.3" HD WXGA WLED LCD 
View all
  hide details  
Reply
post #10 of 28
10/17/12 at 2:47pm
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...
White, Red, Black, White
(21 items)
  		  
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 
View all
  hide details  
Reply
White, Red, Black, White
(21 items)
  		  
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 
View all
  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