Programming Forums > Web Development and Design > HTML / XHTML / CSS

Farflungfish · Nov 8th, 2007, 7:33 AM

Hello programmingforums.org this is my first post, and first problem of the week!

The following links are to images which show my problem,

One for each major browser, and i have enabled borders on tables to show where they are:

http://img215.imageshack.us/img215/6460/ienz5.jpg - Internet Explorer

http://img215.imageshack.us/my.php?image=mozje9.jpg - Moz / FF

http://img215.imageshack.us/my.php?image=operaqe9.jpg - Opera

I would like the page to display as Opera renders it, though i think the radio buttons make some random space for themselves in the TR even though they are within a seperate table which wraps round them tightly.
Layout is all in tables as im sure you can see, though would changing to div's help?
If anyone requires code, i will post it. If thats not enough information i have provided above.

Any help would be much appreciated, thanks and hello all once again

DaWei · Nov 8th, 2007, 9:24 AM

Of course it isn't enough information. You don't even bother to say what, among the rendering differences, is bothering you. The vertical position? The horizontal position? Obviously, should we happen to guess correctly, we can't point out the errors in, or misuse of, markup that we can't see.

Generally speaking, tables should not be used for layout. Tables are for tabular material. A lot of your material is tabular, so that's fine. If you're talking about placement of the page contents, I'd personally accomplish it in another way.

Farflungfish · Nov 8th, 2007, 4:14 PM

The IE 7 and Moz/FF rendering, the height of each row is somewhat expanded and not wrapped like in opera, here is the code.
But note that i use the phpbb template engine so it will be duplicated dependant on how many rows of data the engine receives.

 html Syntax (Toggle Plain Text) 
<!-- BEGIN player -->
              <tr> 
                <td valign="top"> <div align="left">{player.USERNAME} </div></td> 
                <td valign="top"> <div align="left">{player.CLASS} </div></td> 
                <td><form name="statusforum" method="post" action=""> 
                    <table width="100%" border="1" cellpadding="0" cellspacing="0" class="radio"> 
                      <tr> 
                        <td valign="top"><div align="center">
                            <input type="radio" name="status" value="0" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK0}> 
                          </div></td> 
                        <td> <div align="center"> 
                            <input type="radio" name="status" value="2" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK2}> 
                          </div></td> 
                        <td> <div align="center"> 
                            <input type="radio" name="status" value="1" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK1}> 
                          </div></td> 
                        <td> <div align="center"> 
                            <input type="radio" name="status" value="3" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK3}> 
                          </div></td> 
                      </tr> 
                    </table>
                  </form></td>
			  </tr> 
              <!-- END player -->
<!-- BEGIN player -->
              <tr> 
                <td valign="top"> <div align="left">{player.USERNAME} </div></td> 
                <td valign="top"> <div align="left">{player.CLASS} </div></td> 
                <td><form name="statusforum" method="post" action=""> 
                    <table width="100%" border="1" cellpadding="0" cellspacing="0" class="radio"> 
                      <tr> 
                        <td valign="top"><div align="center">
                            <input type="radio" name="status" value="0" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK0}> 
                          </div></td> 
                        <td> <div align="center"> 
                            <input type="radio" name="status" value="2" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK2}> 
                          </div></td> 
                        <td> <div align="center"> 
                            <input type="radio" name="status" value="1" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK1}> 
                          </div></td> 
                        <td> <div align="center"> 
                            <input type="radio" name="status" value="3" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK3}> 
                          </div></td> 
                      </tr> 
                    </table>
                  </form></td>
			  </tr> 
              <!-- END player -->

and css for classes used

 css Syntax (Toggle Plain Text) 
<style type="text/css">
<!--
.attendee-font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}
.attendee-title-font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #003399;
	text-decoration: underline;
}
.status-table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
.radio {
	margin: 0px;
	padding: 0px;
	border:2px solid #999;
}
td status-table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
-->
</style>
<style type="text/css">
<!--
.attendee-font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}
.attendee-title-font {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #003399;
	text-decoration: underline;
}
.status-table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
.radio {
	margin: 0px;
	padding: 0px;
	border:2px solid #999;
}
td status-table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
}
-->
</style>

sorry for such an abstract question before. Hope this makes it better

another minor thing bothering me is the beauty of IE's fonts and the horror of Opera's rendering, no feathering etc, what causes this and any resolution to make all pretty?

DaWei · Nov 8th, 2007, 5:20 PM

Wow. Tables within tables. I strongly suggest you learn about semantic markup. You might want to visit the site, A List Apart.

That said, I have replicated your table here. You'll notice that the extra space shown in your examples is not there. I would suggest that whatever is filling in the information in the template is adding something, that there's something in your outer table definition. Not that the outer table stuff is not shown in your code; I generated my own.

Note that I have also replicated your code without the inner table and without the divs. I'm not sure why you think you need all that stuff.

I can't comment on the beauty and rendering. I'm looking at images, not the page.

Farflungfish · Nov 8th, 2007, 5:36 PM

thank you very much,

Quote:

Note that I have also replicated your code without the inner table and without the divs. I'm not sure why you think you need all that stuff.

yes i realise now that it will sit inline even without the table. - meh sadly im using Dreamweaver, it likes to add inline crap like div's to align some text..
to vouch for my corner, i dont do style - i just have to for this project as the style person decided not to contribute

thanks very much for a good slap in the face.

DaWei · Nov 8th, 2007, 5:45 PM

Here's the deal: I used Dreamweaver to produce my version. I use Dreamweaver for the tools it gives me. I don't let it write my code!

Farflungfish · Nov 8th, 2007, 5:56 PM

/whimpers away

i will do better, thank you for teaching me!

Nov 8th, 2007, 7:33 AM	#1
Farflungfish Newbie Join Date: Nov 2007 Posts: 6 Rep Power: 0	Radio Buttons and TR spacing Hello programmingforums.org this is my first post, and first problem of the week! The following links are to images which show my problem, One for each major browser, and i have enabled borders on tables to show where they are: http://img215.imageshack.us/img215/6460/ienz5.jpg - Internet Explorer http://img215.imageshack.us/my.php?image=mozje9.jpg - Moz / FF http://img215.imageshack.us/my.php?image=operaqe9.jpg - Opera I would like the page to display as Opera renders it, though i think the radio buttons make some random space for themselves in the TR even though they are within a seperate table which wraps round them tightly. Layout is all in tables as im sure you can see, though would changing to div's help? If anyone requires code, i will post it. If thats not enough information i have provided above. Any help would be much appreciated, thanks and hello all once again

Nov 8th, 2007, 9:24 AM	#2
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Re: Radio Buttons and TR spacing Of course it isn't enough information. You don't even bother to say what, among the rendering differences, is bothering you. The vertical position? The horizontal position? Obviously, should we happen to guess correctly, we can't point out the errors in, or misuse of, markup that we can't see. Generally speaking, tables should not be used for layout. Tables are for tabular material. A lot of your material is tabular, so that's fine. If you're talking about placement of the page contents, I'd personally accomplish it in another way. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Nov 8th, 2007, 4:14 PM	#3
Farflungfish Newbie Join Date: Nov 2007 Posts: 6 Rep Power: 0	Re: Radio Buttons and TR spacing The IE 7 and Moz/FF rendering, the height of each row is somewhat expanded and not wrapped like in opera, here is the code. But note that i use the phpbb template engine so it will be duplicated dependant on how many rows of data the engine receives. html Syntax (Toggle Plain Text) <!-- BEGIN player --> <tr> <td valign="top"> <div align="left">{player.USERNAME} </div></td> <td valign="top"> <div align="left">{player.CLASS} </div></td> <td><form name="statusforum" method="post" action=""> <table width="100%" border="1" cellpadding="0" cellspacing="0" class="radio"> <tr> <td valign="top"><div align="center"> <input type="radio" name="status" value="0" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK0}> </div></td> <td> <div align="center"> <input type="radio" name="status" value="2" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK2}> </div></td> <td> <div align="center"> <input type="radio" name="status" value="1" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK1}> </div></td> <td> <div align="center"> <input type="radio" name="status" value="3" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK3}> </div></td> </tr> </table> </form></td> </tr> <!-- END player --> <!-- BEGIN player --> <tr> <td valign="top"> <div align="left">{player.USERNAME} </div></td> <td valign="top"> <div align="left">{player.CLASS} </div></td> <td><form name="statusforum" method="post" action=""> <table width="100%" border="1" cellpadding="0" cellspacing="0" class="radio"> <tr> <td valign="top"><div align="center"> <input type="radio" name="status" value="0" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK0}> </div></td> <td> <div align="center"> <input type="radio" name="status" value="2" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK2}> </div></td> <td> <div align="center"> <input type="radio" name="status" value="1" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK1}> </div></td> <td> <div align="center"> <input type="radio" name="status" value="3" onClick="changeStatus('{player.ID}', this.value)" {player.CHECK3}> </div></td> </tr> </table> </form></td> </tr> <!-- END player --> and css for classes used css Syntax (Toggle Plain Text) <style type="text/css"> <!-- .attendee-font { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } .attendee-title-font { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #003399; text-decoration: underline; } .status-table { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; } .radio { margin: 0px; padding: 0px; border:2px solid #999; } td status-table { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; } --> </style> <style type="text/css"> <!-- .attendee-font { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } .attendee-title-font { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #003399; text-decoration: underline; } .status-table { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; } .radio { margin: 0px; padding: 0px; border:2px solid #999; } td status-table { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; } --> </style> sorry for such an abstract question before. Hope this makes it better another minor thing bothering me is the beauty of IE's fonts and the horror of Opera's rendering, no feathering etc, what causes this and any resolution to make all pretty? Last edited by DaWei; Nov 8th, 2007 at 4:54 PM.

Nov 8th, 2007, 5:20 PM	#4
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Re: Radio Buttons and TR spacing Wow. Tables within tables. I strongly suggest you learn about semantic markup. You might want to visit the site, A List Apart. That said, I have replicated your table here. You'll notice that the extra space shown in your examples is not there. I would suggest that whatever is filling in the information in the template is adding something, that there's something in your outer table definition. Not that the outer table stuff is not shown in your code; I generated my own. Note that I have also replicated your code without the inner table and without the divs. I'm not sure why you think you need all that stuff. I can't comment on the beauty and rendering. I'm looking at images, not the page. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Nov 8th, 2007, 5:45 PM	#6
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Re: Radio Buttons and TR spacing Here's the deal: I used Dreamweaver to produce my version. I use Dreamweaver for the tools it gives me. I don't let it write my code! __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Nov 8th, 2007, 5:56 PM	#7
Farflungfish Newbie Join Date: Nov 2007 Posts: 6 Rep Power: 0	Re: Radio Buttons and TR spacing /whimpers away i will do better, thank you for teaching me!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > HTML / XHTML / CSS

Radio Buttons and TR spacing