Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Radio Buttons in direction RTL not displaying correctly

Status
Not open for further replies.
RebelsMascot

RebelsMascot

Programmer
Mar 10, 2005
4
IE
Hi,

I've started doing some work with rtl languages and have run into a problem with the way radio buttons are displayed in rtl mode.

Here is some simple html code for displaying the radio buttons in rtl.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTMLM 4.01//EN" "<html dir="rtl">
<head>
</head>
<body>
<form name="myForm" action="" method="post">
<div>
<input type="radio" name="group1" value="radio1">Radio 1<br />
<input type="radio" name="group1" value="radio2">Radio 2<br />
<input type="radio" name="group1" value="radio3">Radio 3<br />
</div>
</form>
</body>
</html>

The first radio button and text display correctly, however the next two are reversed.
Has anyone any ideas on how to fix this issue. It only seems to display correctly in IE. Firefox, opera and safari all seem to have this problem.

A screenshot can be found at
Thanks
 
Sort by date Sort by votes
It looks good to me (at least in IE6) if you put a proper doctype on it:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD [red]HTML[/red] 4.01//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Thanks for the reply traingamer,

Noticed that myself later but wasn't the problem. The issue works fine in Internet Explorer but can be seen in Firefox, Safari, and Opera (plus probably more).

I came across the solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
<head>
</head>
<body>
<table width="50%">
<form name="myForm" action="" method="post">

<tr><td>Radio 1:</td><td><input type="radio" name="group1" value="radio1"></td></tr>
<tr><td>Radio 2:</td><td><input type="radio" name="group1" value="radio2"></td></tr>
<tr><td>Radio 3:</td><td><input type="radio" name="group1" value="radio3"></td></tr>

</form>
</table>
</body>
</html>

or

<style type="text/css">
label{
float:right;
}
</style>

<div>
<label>Radio 1 </label><input type="radio" name="group1" value="radio1"><br />
<label>Radio 2</label/><input type="radio" name="group1" value="radio2"><br />
<label>Radio 3<label/><input type="radio" name="group1" value="radio3"><br />
</div>
 
Upvote 0 Downvote
Sorry, missed the reference to IE in original post. [blush]

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
762
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
704
PeDa
PeDa
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
222
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top