voyent
Bad image rendering, related to wrong DOCTYPE? (using Seam & Facelets)  XML
Forum Index -> General Help
Author Message
Newlukai

Joined: 29/Nov/2006 00:00:00
Messages: 125
Offline


Hi there,

on some places in my application there are some images placed side by side without any space between them.
But since I use Seam 1.1 and ICEfaces, there is a space between those images. It's only 2 or 3 pixels but it's enough to break the combination.

I just had a look to the rendered HTML code and saw that the DOCTYPE says following:

Code:
<!DOCTYPE null PUBLIC "null" "null">

and I think that's the reason. In my .xhtml's I defined that:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Additionally I use the <ice:graphicImage> tags and they render the images in an <img></img> pair. Is there a special reason why you don't render normal <img /> tags?

Greets
Newlukai

PS: It doesn't matter if I use <h:graphicImage> or <ice:graphicImage>.

PPS: In another thread I found the hint to define the DOCTYPE this way:
Code:
 <ice:outputDeclaration doctypeRoot="HTML"
 doctypePublic=""-//W3C//DTD XHTML 1.0 Transitional//EN"
 doctypeSystem="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

This code should be added right after the <f:view> tag. But what to do if I don't have a <f:view> tag?
Newlukai

Joined: 29/Nov/2006 00:00:00
Messages: 125
Offline


OK. I read in the forum how to create the correct doctype. But the image rendering still is not as it should be.

I attach a screenshot so you know what I'm talking about.

Here is the generated HTML code:
Code:
<div class="toDoBoxes">
 <table>
 <tbody>
 <tr>
 <td width="120">
 <a href="#%20" id="_id22:_id23:1:_id51" onblur="setFocus('');" onclick="document.forms['_id22']['_id22:_idcl'].value='_id22:_id23:1:_id51';iceSubmit( document.forms['_id22'], this,event); return false;" onfocus="setFocus(this.id);" style="">
 Fehler < 3
 </a>
 </td>
 <td width="206">
   <img class="iceGphImg" id="_id22:_id23:1:_id54" src="img/progress_border.gif" style="margin: 0pt; padding: 0pt;" height="15" width="3">
   <img class="iceGphImg" id="_id22:_id23:1:_id55" src="img/progress_errorsLower3.gif" style="margin: 0pt; padding: 0pt;" height="15" width="58">
   <img class="iceGphImg" id="_id22:_id23:1:_id56" src="img/progress_empty.gif" style="margin: 0pt; padding: 0pt;" height="15" width="142">
   <img class="iceGphImg" id="_id22:_id23:1:_id57" src="img/progress_border.gif" style="margin: 0pt; padding: 0pt;" height="15" width="3">
 </td>
 <td align="right">
 5
 </td>
 </tr>
 <tr>
 <td width="120">
 <a href="#%20" id="_id22:_id23:1:_id62" onblur="setFocus('');" onclick="document.forms['_id22']['_id22:_idcl'].value='_id22:_id23:1:_id62';iceSubmit( document.forms['_id22'], this,event); return false;" onfocus="setFocus(this.id);" style="">
 Fehler = 3
 </a>
 </td>
 <td width="206">
   <img class="iceGphImg" id="_id22:_id23:1:_id65" src="img/progress_border.gif" style="" height="15" width="3">
   <img class="iceGphImg" id="_id22:_id23:1:_id66" src="img/progress_errorsEqual3.gif" style="" height="15" width="104">
   <img class="iceGphImg" id="_id22:_id23:1:_id67" src="img/progress_empty.gif" style="" height="15" width="96">
   <img class="iceGphImg" id="_id22:_id23:1:_id68" src="img/progress_border.gif" style="" height="15" width="3">
 </td>
 <td align="right">
 9
 </td>
 </tr>
 <tr>
 <td width="120">
 <a href="#%20" id="_id22:_id23:1:_id73" onblur="setFocus('');" onclick="document.forms['_id22']['_id22:_idcl'].value='_id22:_id23:1:_id73';iceSubmit( document.forms['_id22'], this,event); return false;" onfocus="setFocus(this.id);" style="">
 Fehler > 3
 </a>
 </td>
 <td width="206">
   <img class="iceGphImg" id="_id22:_id23:1:_id76" src="img/progress_border.gif" style="" height="15" width="3">
   <img class="iceGphImg" id="_id22:_id23:1:_id77" src="img/progress_errorsGreater3.gif" style="" height="15" width="34">
   <img class="iceGphImg" id="_id22:_id23:1:_id78" src="img/progress_empty.gif" style="" height="15" width="166">
   <img class="iceGphImg" id="_id22:_id23:1:_id79" src="img/progress_border.gif" style="" height="15" width="3">
 </td>
 <td align="right">
 3
 </td>
 </tr>
 <tr>
 <td width="120">
 <a href="#%20" id="_id22:_id23:1:_id84" onblur="setFocus('');" onclick="document.forms['_id22']['_id22:_idcl'].value='_id22:_id23:1:_id84';iceSubmit( document.forms['_id22'], this,event); return false;" onfocus="setFocus(this.id);" style="">
 Gesamt
 </a>
 </td>
 <td width="206">
   <img class="iceGphImg" id="_id22:_id23:1:_id87" src="img/progress_border.gif" style="" height="15" width="3">
   <img class="iceGphImg" id="_id22:_id23:1:_id88" src="img/progress_errorsLower3.gif" style="" height="15" width="58">
   <img class="iceGphImg" id="_id22:_id23:1:_id89" src="img/progress_errorsEqual3.gif" style="" height="15" width="104">
   <img class="iceGphImg" id="_id22:_id23:1:_id90" src="img/progress_errorsGreater3.gif" style="" height="15" width="34">
   <img class="iceGphImg" id="_id22:_id23:1:_id91" src="img/progress_border.gif" style="" height="15" width="3">
 </td>
 <td align="right">
 <b>
 17
 </b>
 </td>
 </tr>
 </tbody>
 </table>
 </div>


And here is the JSF markup:
Code:
<div class="toDoBoxes">
         	<table>
         		<tr>
         			<td width="120">
         				<h:commandLink value="#{ares_messages.label_toDo_errorsToBugfixLower3}" action="#{toDos.showErrorsToBugfixLower3}" rendered="#{toDo.errorsToBugfixLower3 > 0}" />
         				<h:outputText value="#{ares_messages.label_toDo_errorsToBugfixLower3}" rendered="#{toDo.errorsToBugfixLower3 == 0}" />
         			</td>
         			<td width="206">
         				<ice:graphicImage style="padding:0; margin:0;" width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfixLower3 > 0}" />
     	    			<ice:graphicImage style="padding:0; margin:0;" width="#{toDo.errorsToBugfixLower3InPercent * 2}" height="15" value="img/progress_errorsLower3.gif" rendered="#{toDo.errorsToBugfixLower3 > 0}" />
     	    			<ice:graphicImage style="padding:0; margin:0;" width="#{200 - (toDo.errorsToBugfixLower3InPercent * 2)}" height="15" value="img/progress_empty.gif" rendered="#{toDo.errorsToBugfixLower3 > 0}" />
         				<ice:graphicImage style="padding:0; margin:0;" width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfixLower3 > 0}" />        			
         			</td>
         			<td align="right"><h:outputText value="#{toDo.errorsToBugfixLower3}" /></td>
         		</tr>
         		<tr>
         			<td width="120">
         				<h:commandLink value="#{ares_messages.label_toDo_errorsToBugfixEqual3}" action="#{toDos.showErrorsToBugfixEqual3}" rendered="#{toDo.errorsToBugfixEqual3 > 0}" />
         				<h:outputText value="#{ares_messages.label_toDo_errorsToBugfixEqual3}" rendered="#{toDo.errorsToBugfixEqual3 == 0}" />
         			</td>
         			<td width="206">
         				<ice:graphicImage width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfixEqual3 > 0}" />
         				<ice:graphicImage width="#{toDo.errorsToBugfixEqual3InPercent * 2}" height="15" value="img/progress_errorsEqual3.gif" rendered="#{toDo.errorsToBugfixEqual3 > 0}" />
     	    			<ice:graphicImage width="#{200 - (toDo.errorsToBugfixEqual3InPercent * 2)}" height="15" value="img/progress_empty.gif" rendered="#{toDo.errorsToBugfixEqual3 > 0}" />
         				<ice:graphicImage width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfixEqual3 > 0}" />
         			</td>
         			<td align="right"><h:outputText value="#{toDo.errorsToBugfixEqual3}" /></td>
         		</tr>
         		<tr>
         			<td width="120">
         				<h:commandLink value="#{ares_messages.label_toDo_errorsToBugfixGreater3}" action="#{toDos.showErrorsToBugfixGreater3}" rendered="#{toDo.errorsToBugfixGreater3 > 0}" />
         				<h:outputText value="#{ares_messages.label_toDo_errorsToBugfixGreater3}" rendered="#{toDo.errorsToBugfixGreater3 == 0}" />
         			</td>
         			<td width="206">
 	        			<ice:graphicImage width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfixGreater3 > 0}" />
     	    			<ice:graphicImage width="#{toDo.errorsToBugfixGreater3InPercent * 2}" height="15" value="img/progress_errorsGreater3.gif" rendered="#{toDo.errorsToBugfixGreater3 > 0}" />
     	    			<ice:graphicImage width="#{200 - (toDo.errorsToBugfixGreater3InPercent * 2)}" height="15" value="img/progress_empty.gif" rendered="#{toDo.errorsToBugfixGreater3 > 0}" />
         				<ice:graphicImage width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfixGreater3 > 0}" />
         			</td>
         			<td align="right"><h:outputText value="#{toDo.errorsToBugfixGreater3}" /></td>
         		</tr>
         		<tr>
         			<td width="120">
         				<h:commandLink value="#{ares_messages.label_toDo_errorsToBugfix}" action="#{toDos.showErrorsToBugfix}" rendered="#{toDo.errorsToBugfix > 0}" />
         				<h:outputText value="#{ares_messages.label_toDo_errorsToBugfix}" rendered="#{toDo.errorsToBugfix == 0}" />
         			</td>
         			<td width="206">
         				<ice:graphicImage width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfix > 0}" />
         				<ice:graphicImage width="#{toDo.errorsToBugfixLower3InPercent * 2}" height="15" value="img/progress_errorsLower3.gif" rendered="#{toDo.errorsToBugfixLower3 > 0}" />
         				<ice:graphicImage width="#{toDo.errorsToBugfixEqual3InPercent * 2}" height="15" value="img/progress_errorsEqual3.gif" rendered="#{toDo.errorsToBugfixEqual3 > 0}" />
         				<ice:graphicImage width="#{toDo.errorsToBugfixGreater3InPercent * 2}" height="15" value="img/progress_errorsGreater3.gif" rendered="#{toDo.errorsToBugfixGreater3 > 0}" />
         				<ice:graphicImage width="3" height="15" value="img/progress_border.gif" rendered="#{toDo.errorsToBugfix > 0}" />
         			</td>
         			<td align="right"><b><h:outputText value="#{toDo.errorsToBugfix}" /></b></td>
         		</tr>
         	</table>
         </div>


The point is, that this worked with Tomahawk. Any suggestions?

Thanks in advance
Newlukai
[Thumb - stat2.jpg]
 Filename stat2.jpg [Disk] Download
 Description That's the way it should look like.
 Filesize 9 Kbytes
 Downloaded:  200 time(s)

[Thumb - stat.jpg]
 Filename stat.jpg [Disk] Download
 Description Those images should merge into 3 status bars.
 Filesize 10 Kbytes
 Downloaded:  198 time(s)

 
Forum Index -> General Help
Go to:   
Powered by JForum 2.1.7ice © JForum Team