Hello,
On the contact page I've created for my website, there's a bit of a weird issue with the radio buttons. I want them below the phrase "Contact Preference." In Internet Explorer, the phrase is where I want it but is shown in black. In Firefox, though, the heading is shown all the way to the right in the box. I'm not sure how to resolve this (the alignment and color).
Thank you!
http://myweb.chatham.edu/students/Saman … ntact.html
Radio Buttons - Post ID 241178
Samantha.Gussow
Guest
62 posts
Inger
Senior Advisor
14,657 posts
Online Now
The words Contact Preference is in a legend div. You haven't set any style rules for that div.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Samantha.Gussow
Guest
62 posts
I added style for color for that phrase to my CSS in a class called .radios legend. However, in IE 11 the phrase "Contact Preference" shows up in black instead of navy. I tried my website in Chrome, Firefox and on my Kindle in Silk and Dolphin and that phrase showed up in navy (as intended). What could be causing this? Is there any way to resolve the issue?
Thanks so much!
http://myweb.chatham.edu/students/Saman … ntact.html
Thanks so much!
http://myweb.chatham.edu/students/Saman … ntact.html
Inger
Senior Advisor
14,657 posts
Online Now
I haven't checked, but it may be that <legend></legend> is not supported by IE (I have version 11). Try <div class="legend"></div> instead.
Or maybe you should try legend in the css without the class radio in front of it? But only, of course, if you don't use legend anywhere else on the site with other css rules.
Or maybe you should try legend in the css without the class radio in front of it? But only, of course, if you don't use legend anywhere else on the site with other css rules.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger
Senior Advisor
14,657 posts
Online Now
Checking a bit further; You have some errors here:
First: You need to write '<div class="radios"></div>, not just class.
Second; The class radios is inside the p class row, therfore you need to let the rados also end before the p. Reverse the order of the two end tags.
Maybe that is all you need to do.
<p class="row">
<class="radios">
<legend>Contact Preference</legend>
<br>
<input type="radio" id="preference-email" name="preference" value="email" />
<label for="preference-email">Email</label>
<input type="radio" id="preference-phone" name="preference" value="phone" />
<label for="preference-phone">Phone</label>
<input type="radio" id="preference-either" name="preference" value="either" />
<label for="preference-phone">Either is fine</label>
</p>
</class>
<class="radios">
<legend>Contact Preference</legend>
<br>
<input type="radio" id="preference-email" name="preference" value="email" />
<label for="preference-email">Email</label>
<input type="radio" id="preference-phone" name="preference" value="phone" />
<label for="preference-phone">Phone</label>
<input type="radio" id="preference-either" name="preference" value="either" />
<label for="preference-phone">Either is fine</label>
</p>
</class>
First: You need to write '<div class="radios"></div>, not just class.
Second; The class radios is inside the p class row, therfore you need to let the rados also end before the p. Reverse the order of the two end tags.
Maybe that is all you need to do.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Samantha.Gussow
Guest
62 posts
I made all the changes you suggested, and that corrected the navy vs. black issue! Thank you so much for all your help!!!
Inger
Senior Advisor
14,657 posts
Online Now
I'm glad you got it sorted. 
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Samantha.Gussow
Guest
62 posts
On my contact page, I noticed that there is not a border around the radio button options in the "Background" section: http://myweb.chatham.edu/students/Saman … ntact.html
I would like a border around that area (same as the gray one that appears inside the "Feedback" section around the checkboxes and the "Basic Info" section around the different fields). Not sure what's off in the code/how to make this happen.
Thanks in advance!
I would like a border around that area (same as the gray one that appears inside the "Feedback" section around the checkboxes and the "Basic Info" section around the different fields). Not sure what's off in the code/how to make this happen.
Thanks in advance!
Inger
Senior Advisor
14,657 posts
Online Now
You could give the class radios a border. That should cover both fieldsets.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
