Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Compatibility with radio buttons and check box help needed - IE8 being problematic.
New Posts  All Forums:Forum Nav:

Compatibility with radio buttons and check box help needed - IE8 being problematic.

post #1 of 8
Thread Starter 
First, I already know IE8 is getting old, but I need to still ensure things work decent with it for compatibility needs. This is a PHPBB community I am styling with someone for a good friend of mine, version 3.0.11.

Here's the problem in Internet Explorer 8:


However, IE9 and up, FireFox, Opera, Chrome, and even the stock browser on my cell phone, show as they should with the CSS3 code.




Now IE8 was supposed to default to stock radio buttons and checkboxes, while it does, it has the issue as seen. I can't seem to figure out how to fix it at all. headscratch.gif

Here's the CSS3 code, if I remove it entirely, IE8 has no issues upon displaying the radio buttons and checkboxes.
Code:
/* common styles */
label
{
    cursor: pointer;
}

label,
input[type="checkbox"] + label::before,
input[type="radio"] + label::before
{
    vertical-align: middle;
}

/* hide the checkboxes and radios */
input[type="checkbox"],
input[type="radio"]
{
    position: absolute;
    opacity: 0;
}

/* we use generated content to create a placeholder for the checkbox and the radio */
input[type="checkbox"] + label::before,
input[type="radio"] + label::before
{
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    line-height: 13px;
    margin: 0 3px 0 3px;
    background: url("{T_THEME_PATH}/images/sprite-radio-checkbox.png") no-repeat 0 0;
    vertical-align: middle;
}

/* disabled checkbox or radio */
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label
{
    opacity: .5;
    cursor: default; /* or cursor: no-drop */
}

/* hover checkbox (unselected state only) */
input[type="checkbox"]:not(:checked):hover + label::before
{
    background-position: 0 -13px;
}

/* selected checkbox */
input[type="checkbox"]:checked + label::before
{
    background-position: 0 -26px;
}

/* normal state radio */
input[type="radio"] + label::before
{
    background-position: -13px 0;
}

/* radio hover (unselected state only) */
input[type="radio"]:hover + label::before
{
    background-position: -13px -13px;
}

/* selected radio */
input[type="radio"]:checked + label::before
{
    background-position: -13px -26px;
}

/* focused checkbox or radio */
input[type="checkbox"]:focus + label,
input[type="radio"]:focus + label
{
    outline: dotted 1px; /* by not adding color to the value we force the use of system's default focus color "invert" */
}


/* older versions of internet explorer do not support either generated content, so we display the system checkboxes and radio buttons */
@media \0screen {
    input[type="checkbox"],
    input[type="radio"] 
        {
        position: static;
    }
}

Anyone have any ideas what I'm missing? I'm by no means a CSS expert, I just know enough to get by. biggrin.gif
The Blue Wolf
(16 items)
 
   
CPUMotherboardGraphicsRAM
Intel i7 4770K - Delidded Gigabyte Z87X-OC MSI GTX 780 Ti  G.SKILL Ripjaws X Series 32GB - F3-2133C9Q-32GXH 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 512GB - OS Swamsung 850 EVO 500GB - Software/Games LG Bluray Burner Noctua D14 with NF-F12 IndustrialPPC 2000 PWM F... 
OSMonitorKeyboardPower
Windows 7 Ultimate 64-bit Dell U2713HM IBM Model M Corsair AX1200 
CaseAudioAudioOther
CoolerMaster HAF X Blue Edition - Custom Side P... Creative Sound Blaster ZxR Cakewalk By Roland UA-25 EX Epiphan DVI2PCIe Capture card 
CPUGraphicsRAMHard Drive
Intel Core i7 3610QM Nvidia GTX 675m Crucial 32GB DDRIII PC12800 (4 x 8GB) 240GB Mushkin mSATA 
Hard DriveHard DriveOptical DriveOS
64GB SanDisk mSATA 750GB Hitachi 7,200RPM 6x Blu-Ray Writer 8x DVDR/W Super Multi Windows 7 Pro x64 
MonitorKeyboardAudio
17.3" Chimei N173HGE-L11 Panel Steelseries LED Backlit DynaAudio Speakers 
  hide details  
Reply
The Blue Wolf
(16 items)
 
   
CPUMotherboardGraphicsRAM
Intel i7 4770K - Delidded Gigabyte Z87X-OC MSI GTX 780 Ti  G.SKILL Ripjaws X Series 32GB - F3-2133C9Q-32GXH 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 512GB - OS Swamsung 850 EVO 500GB - Software/Games LG Bluray Burner Noctua D14 with NF-F12 IndustrialPPC 2000 PWM F... 
OSMonitorKeyboardPower
Windows 7 Ultimate 64-bit Dell U2713HM IBM Model M Corsair AX1200 
CaseAudioAudioOther
CoolerMaster HAF X Blue Edition - Custom Side P... Creative Sound Blaster ZxR Cakewalk By Roland UA-25 EX Epiphan DVI2PCIe Capture card 
CPUGraphicsRAMHard Drive
Intel Core i7 3610QM Nvidia GTX 675m Crucial 32GB DDRIII PC12800 (4 x 8GB) 240GB Mushkin mSATA 
Hard DriveHard DriveOptical DriveOS
64GB SanDisk mSATA 750GB Hitachi 7,200RPM 6x Blu-Ray Writer 8x DVDR/W Super Multi Windows 7 Pro x64 
MonitorKeyboardAudio
17.3" Chimei N173HGE-L11 Panel Steelseries LED Backlit DynaAudio Speakers 
  hide details  
Reply
post #2 of 8
Quote:
Originally Posted by Hoodcom View Post

First, I already know IE8 is getting old, but I need to still ensure things work decent with it for compatibility needs. This is a PHPBB community I am styling with someone for a good friend of mine, version 3.0.11.

Here's the problem in Internet Explorer 8:


However, IE9 and up, FireFox, Opera, Chrome, and even the stock browser on my cell phone, show as they should with the CSS3 code.




Now IE8 was supposed to default to stock radio buttons and checkboxes, while it does, it has the issue as seen. I can't seem to figure out how to fix it at all. headscratch.gif

Here's the CSS3 code, if I remove it entirely, IE8 has no issues upon displaying the radio buttons and checkboxes.
Code:
Warning: CSS3 code (Click to show)

 

 
/* common styles */
label
{
    cursor: pointer;
}

label,
input[type="checkbox"] + label::before,
input[type="radio"] + label::before
{
    vertical-align: middle;
}

/* hide the checkboxes and radios */
input[type="checkbox"],
input[type="radio"]
{
    position: absolute;
    opacity: 0;
}

/* we use generated content to create a placeholder for the checkbox and the radio */
input[type="checkbox"] + label::before,
input[type="radio"] + label::before
{
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    line-height: 13px;
    margin: 0 3px 0 3px;
    background: url("{T_THEME_PATH}/images/sprite-radio-checkbox.png") no-repeat 0 0;
    vertical-align: middle;
}

/* disabled checkbox or radio */
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label
{
    opacity: .5;
    cursor: default; /* or cursor: no-drop */
}

/* hover checkbox (unselected state only) */
input[type="checkbox"]:not(:checked):hover + label::before
{
    background-position: 0 -13px;
}

/* selected checkbox */
input[type="checkbox"]:checked + label::before
{
    background-position: 0 -26px;
}

/* normal state radio */
input[type="radio"] + label::before
{
    background-position: -13px 0;
}

/* radio hover (unselected state only) */
input[type="radio"]:hover + label::before
{
    background-position: -13px -13px;
}

/* selected radio */
input[type="radio"]:checked + label::before
{
    background-position: -13px -26px;
}

/* focused checkbox or radio */
input[type="checkbox"]:focus + label,
input[type="radio"]:focus + label
{
    outline: dotted 1px; /* by not adding color to the value we force the use of system's default focus color "invert" */
}


/* older versions of internet explorer do not support either generated content, so we display the system checkboxes and radio buttons */
@media \0screen {
    input[type="checkbox"],
    input[type="radio"] 
        {
        position: static;
    }
}

 

 

Anyone have any ideas what I'm missing? I'm by no means a CSS expert, I just know enough to get by. biggrin.gif

 

I haven't looked at it too much, bit if the problem disappears when this code does, why not use a separate IE stylesheet (no need to fight a problem that that doesn't need fighting). The link to the stylesheet in the manner shown below and it will only load the stylesheet for IE browsers less than or equal to 8 (in typical application, that's 6,7, and 8). You may also consider a separate stylesheet for IE 6 and 7 (use [if lte IE 7] for them and [if IE 8] for the IE8 version). An additional advantage is that when the time comes to get rid of IE specific workarounds, you just remove 3 lines of HTML.

 

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

Edited by hajile - 7/23/13 at 8:17am
post #3 of 8
Thread Starter 
Hi,

Thanks for the tip there, which I considered that option, but I'm not certain how well that'd work in a PHPBB 3 environment with how it handled the CSS, plus with two themes sharing the same templates... headscratch.gif


I did end up getting confirmation from my friend, that he's not too worried about IE8's issues involving this matter, but I always wouldn't mind trying. Learning experiences and all. thumb.gif
The Blue Wolf
(16 items)
 
   
CPUMotherboardGraphicsRAM
Intel i7 4770K - Delidded Gigabyte Z87X-OC MSI GTX 780 Ti  G.SKILL Ripjaws X Series 32GB - F3-2133C9Q-32GXH 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 512GB - OS Swamsung 850 EVO 500GB - Software/Games LG Bluray Burner Noctua D14 with NF-F12 IndustrialPPC 2000 PWM F... 
OSMonitorKeyboardPower
Windows 7 Ultimate 64-bit Dell U2713HM IBM Model M Corsair AX1200 
CaseAudioAudioOther
CoolerMaster HAF X Blue Edition - Custom Side P... Creative Sound Blaster ZxR Cakewalk By Roland UA-25 EX Epiphan DVI2PCIe Capture card 
CPUGraphicsRAMHard Drive
Intel Core i7 3610QM Nvidia GTX 675m Crucial 32GB DDRIII PC12800 (4 x 8GB) 240GB Mushkin mSATA 
Hard DriveHard DriveOptical DriveOS
64GB SanDisk mSATA 750GB Hitachi 7,200RPM 6x Blu-Ray Writer 8x DVDR/W Super Multi Windows 7 Pro x64 
MonitorKeyboardAudio
17.3" Chimei N173HGE-L11 Panel Steelseries LED Backlit DynaAudio Speakers 
  hide details  
Reply
The Blue Wolf
(16 items)
 
   
CPUMotherboardGraphicsRAM
Intel i7 4770K - Delidded Gigabyte Z87X-OC MSI GTX 780 Ti  G.SKILL Ripjaws X Series 32GB - F3-2133C9Q-32GXH 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 512GB - OS Swamsung 850 EVO 500GB - Software/Games LG Bluray Burner Noctua D14 with NF-F12 IndustrialPPC 2000 PWM F... 
OSMonitorKeyboardPower
Windows 7 Ultimate 64-bit Dell U2713HM IBM Model M Corsair AX1200 
CaseAudioAudioOther
CoolerMaster HAF X Blue Edition - Custom Side P... Creative Sound Blaster ZxR Cakewalk By Roland UA-25 EX Epiphan DVI2PCIe Capture card 
CPUGraphicsRAMHard Drive
Intel Core i7 3610QM Nvidia GTX 675m Crucial 32GB DDRIII PC12800 (4 x 8GB) 240GB Mushkin mSATA 
Hard DriveHard DriveOptical DriveOS
64GB SanDisk mSATA 750GB Hitachi 7,200RPM 6x Blu-Ray Writer 8x DVDR/W Super Multi Windows 7 Pro x64 
MonitorKeyboardAudio
17.3" Chimei N173HGE-L11 Panel Steelseries LED Backlit DynaAudio Speakers 
  hide details  
Reply
post #4 of 8
Try changing your display property to either "inline" or "block" instead of "inline-block". The combinations of the two is not backwards compatible in IE.
post #5 of 8
Thread Starter 
Quote:
Originally Posted by Dsqueaky View Post

Try changing your display property to either "inline" or "block" instead of "inline-block". The combinations of the two is not backwards compatible in IE.

Tried changing the main one, but it breaks how it looks in the other browsers, but provides no fixes at all to IE8. I even tried adding it to it's own specific CSS tag. Which I think is being ignored..
The Blue Wolf
(16 items)
 
   
CPUMotherboardGraphicsRAM
Intel i7 4770K - Delidded Gigabyte Z87X-OC MSI GTX 780 Ti  G.SKILL Ripjaws X Series 32GB - F3-2133C9Q-32GXH 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 512GB - OS Swamsung 850 EVO 500GB - Software/Games LG Bluray Burner Noctua D14 with NF-F12 IndustrialPPC 2000 PWM F... 
OSMonitorKeyboardPower
Windows 7 Ultimate 64-bit Dell U2713HM IBM Model M Corsair AX1200 
CaseAudioAudioOther
CoolerMaster HAF X Blue Edition - Custom Side P... Creative Sound Blaster ZxR Cakewalk By Roland UA-25 EX Epiphan DVI2PCIe Capture card 
CPUGraphicsRAMHard Drive
Intel Core i7 3610QM Nvidia GTX 675m Crucial 32GB DDRIII PC12800 (4 x 8GB) 240GB Mushkin mSATA 
Hard DriveHard DriveOptical DriveOS
64GB SanDisk mSATA 750GB Hitachi 7,200RPM 6x Blu-Ray Writer 8x DVDR/W Super Multi Windows 7 Pro x64 
MonitorKeyboardAudio
17.3" Chimei N173HGE-L11 Panel Steelseries LED Backlit DynaAudio Speakers 
  hide details  
Reply
The Blue Wolf
(16 items)
 
   
CPUMotherboardGraphicsRAM
Intel i7 4770K - Delidded Gigabyte Z87X-OC MSI GTX 780 Ti  G.SKILL Ripjaws X Series 32GB - F3-2133C9Q-32GXH 
Hard DriveHard DriveOptical DriveCooling
Samsung 850 Pro 512GB - OS Swamsung 850 EVO 500GB - Software/Games LG Bluray Burner Noctua D14 with NF-F12 IndustrialPPC 2000 PWM F... 
OSMonitorKeyboardPower
Windows 7 Ultimate 64-bit Dell U2713HM IBM Model M Corsair AX1200 
CaseAudioAudioOther
CoolerMaster HAF X Blue Edition - Custom Side P... Creative Sound Blaster ZxR Cakewalk By Roland UA-25 EX Epiphan DVI2PCIe Capture card 
CPUGraphicsRAMHard Drive
Intel Core i7 3610QM Nvidia GTX 675m Crucial 32GB DDRIII PC12800 (4 x 8GB) 240GB Mushkin mSATA 
Hard DriveHard DriveOptical DriveOS
64GB SanDisk mSATA 750GB Hitachi 7,200RPM 6x Blu-Ray Writer 8x DVDR/W Super Multi Windows 7 Pro x64 
MonitorKeyboardAudio
17.3" Chimei N173HGE-L11 Panel Steelseries LED Backlit DynaAudio Speakers 
  hide details  
Reply
post #6 of 8
Quote:
Originally Posted by Hoodcom View Post

Tried changing the main one, but it breaks how it looks in the other browsers, but provides no fixes at all to IE8. I even tried adding it to it's own specific CSS tag. Which I think is being ignored..

Is the page your editing public? As in can you post a link I can see it at?
post #7 of 8
This fix for inline-block elements in IE8 is to add an display:inline to the element for only ie8 after the main inline-block definition. You will have to use a IE8 hack, a conditional style sheet or comment, or something like modernizr so you can target that specific browser. I don't know of any other work around.
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #8 of 8
You don't have to put a work around to get the dropdowns to work, I've never needed it and have worked with some pretty complicated menu systems.However, I can't debug it with only access to the css. If I can see the HTML as well as the CSS or the page in a browser then I can be of more use.
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 › Compatibility with radio buttons and check box help needed - IE8 being problematic.