From dd808e45abd1593829dc8731a040336558f29b62 Mon Sep 17 00:00:00 2001
From: will <will@cloud.com>
Date: Thu, 14 Apr 2011 15:53:40 -0700
Subject: [PATCH] bug 9424: fixed issue where a small window space on Safari
 would cause HTML elements to overlap on the LB rules tab.

merge from master
---
 ui/jsp/ipaddress.jsp | 131 ++++++++++++++++++++++---------------------
 1 file changed, 66 insertions(+), 65 deletions(-)

diff --git a/ui/jsp/ipaddress.jsp b/ui/jsp/ipaddress.jsp
index 203e4b1f230..cca8eb7d3a8 100644
--- a/ui/jsp/ipaddress.jsp
+++ b/ui/jsp/ipaddress.jsp
@@ -228,44 +228,44 @@ dictionary = {
         <div id="tab_container">
 	        <div class="grid_container" id="grid_container">
 	            <div class="grid_header">
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.start.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.end.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.protocol"/></div>
 	                </div>	                
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.state"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.actions"/></div>
 	                </div>
 	            </div>
 	            <div class="grid_rows even" id="create_port_range_row">
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_row_cell" style="width: 15%; ">
 	                    <input id="start_port" class="text" style="width: 70%;" type="text" />
 	                    <div id="start_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_row_cell" style="width: 15%; ">
 	                    <input id="end_port" class="text" style="width: 70%;" type="text" />
 	                    <div id="end_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">  
+	                <div class="grid_row_cell" style="width: 15%; ">  
 	                   <select class="select" id="protocol" style="width:70%;">	                  
 	                   </select>
 	                </div>	                
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">   
+	                <div class="grid_row_cell" style="width: 15%; ">   
 	                    <div class="row_celltitles" id="state"></div>
 	                </div>  
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_row_cell" style="width: 15%; ">
 	                    <div class="row_celltitles">
 	                        <a id="add_link" href="#"><fmt:message key="label.add"/></a></div>
 	                </div>
@@ -289,53 +289,53 @@ dictionary = {
         <div id="tab_container">
 	        <div class="grid_container" id="grid_container">
 	            <div class="grid_header">
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.public.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.private.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.protocol"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 25%; padding: 1px; border: none;">
+	                <div class="grid_header_cell" style="width: 25%;  border: none;">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.instance"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 10%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 10%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.state"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.actions"/></div>
 	                </div>
 	            </div>
 	            <div class="grid_rows even" id="create_port_forwarding_row">
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
-	                    <input id="public_port" class="text" style="width: 70%; padding: 1px;" type="text" />
+	                <div class="grid_row_cell" style="width: 15%; ">
+	                    <input id="public_port" class="text" style="width: 70%; " type="text" />
 	                    <div id="public_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
 	                </div>
 	                <div class="grid_row_cell" style="width: 15%;">
-	                    <input id="private_port" class="text" style="width: 70%; padding: 1px;" type="text" />
+	                    <input id="private_port" class="text" style="width: 70%; " type="text" />
 	                    <div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">  
+	                <div class="grid_row_cell" style="width: 15%; ">  
 	                   <select class="select" id="protocol" style="width:70%;">	                    
 	                   </select>
 	                </div>
-	                <div class="grid_row_cell" style="width: 25%; padding: 1px;">                   
+	                <div class="grid_row_cell" style="width: 25%; ">                   
 	                    <select class="select" id="vm">
 	                    </select>
 	                    <div id="vm_errormsg" class="errormsg" style="display: none;"></div>	                    
 	                </div>
-	                <div class="grid_row_cell" style="width: 10%; padding: 1px;">   
-	                    <div class="row_celltitles" id="state"></div>
+	                <div class="grid_row_cell" style="width: 10%; ">   
+	                    <div class="row_celltitles" id="state" style="padding:1px;"></div>
 	                </div>  
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_row_cell" style="width: 15%; ">
 	                    <div class="row_celltitles">
 	                        <a id="add_link" href="#"><fmt:message key="label.add"/></a></div>
 	                </div>
@@ -359,51 +359,52 @@ dictionary = {
         <div id="tab_container">
 	        <div class="grid_container">
 	            <div class="grid_header">
-	                <div class="grid_header_cell" style="width: 20%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 18%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.name"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 14%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 14%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.public.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 14%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 14%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.private.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 15%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.algorithm"/></div>
 	                </div>	                
-	                <div class="grid_header_cell" style="width: 10%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 10%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.state"/></div>
 	                </div>	                
-	                <div class="grid_header_cell" style="width: 25%; padding: 1px;">
+	                <div class="grid_header_cell" style="width: 27%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.actions"/></div>
 	                </div>
 	            </div>
 	            <div class="grid_rows even" id="create_load_balancer_row">
-	                <div class="grid_row_cell" style="width: 20%; padding: 1px;">
-	                    <input id="name" class="text" style="width: 70%; padding: 1px;" type="text" />
+	                <div class="grid_row_cell" style="width: 18%; ">
+	                    <input id="name" class="text" style="width: 70%; " type="text" />
 	                    <div id="name_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 14%; padding: 1px;">
-	                    <input id="public_port" class="text" style="width: 70%; padding: 1px;" type="text" />
+	                <div class="grid_row_cell" style="width: 14%;">
+	                    <input id="public_port" class="text" style="width: 70%; " type="text" />
 	                    <div id="public_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 14%; padding: 1px;">
-	                    <input id="private_port" class="text" style="width: 70%; padding: 1px;" type="text" />
+	                <div class="grid_row_cell" style="width: 14%;">
+	                    <input id="private_port" class="text" style="width: 70%; " type="text" />
 	                    <div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+	                <div class="grid_row_cell" style="width: 15%;">
 	                    <select id="algorithm_select" class="select" style="width: 70%;">   	                      
 	                    </select>
 	                </div>	                
-	                <div class="grid_row_cell" style="width: 10%; padding: 1px;">	                  
+	                <div class="grid_row_cell" style="width: 10%;">	  
+                    	<div class="row_celltitles" style="padding:1px;"></div>         
 	                </div>	                
-	                <div class="grid_row_cell" style="width: 25%; padding: 1px;">
+	                <div class="grid_row_cell" style="width: 27%; ">
 	                    <div class="row_celltitles">
 	                        <a id="add_link" href="#"><fmt:message key="label.add"/></a></div>
 	                </div>
@@ -474,26 +475,26 @@ dictionary = {
 <!-- Load Balancer Template (begin) -->
 <div class="grid_rows odd" id="load_balancer_template" style="display:none">
     <div id="row_container">
-        <div class="grid_row_cell" style="width: 20%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 18%; ">
             <div class="row_celltitles" id="name">
                 LB#1</div>
         </div>
-        <div class="grid_row_cell" style="width: 14%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 14%; ">
             <div class="row_celltitles" id="public_port">
                 8080</div>
         </div>
-        <div class="grid_row_cell" style="width: 14%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 14%; ">
             <div class="row_celltitles" id="private_port">
                 80</div>
         </div>
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="algorithm">
                 (algorithm)</div>
         </div>        
-        <div class="grid_row_cell" style="width: 10%; padding: 1px;">
-            <div class="row_celltitles" id="state"></div>
+        <div class="grid_row_cell" style="width: 10%; ">
+            <div class="row_celltitles" id="state" style="padding:1px;"></div>
         </div>  
-        <div class="grid_row_cell" style="width: 25%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 27%; ">
             <div class="row_celltitles">
                 <a id="manage_link" href="#" style="float:left;"><fmt:message key="label.manage"/></a>
                 <a id="edit_link" href="#" style="float:left; margin-left:15px;"><fmt:message key="label.edit"/></a>
@@ -508,25 +509,25 @@ dictionary = {
             </p>
         </div>
     </div> 
-    <div class="grid_rows odd" id="row_container_edit" style="display:none">
-        <div class="grid_row_cell" style="width: 20%; padding: 1px;">
+    <div class="grid_rows odd" id="row_container_edit" style="display:none; border-bottom:none;">
+        <div class="grid_row_cell" style="width: 20%; ">
             <input id="name" class="text" style="width: 70%;" type="text" />
             <div id="name_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
         </div>
-        <div class="grid_row_cell" style="width: 14%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 14%; ">
             <div class="row_celltitles" id="public_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 14%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 14%; ">
             <div class="row_celltitles" id="private_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <select id="algorithm_select" class="select" style="width: 70%;">                 
             </select>
         </div>        
-        <div class="grid_row_cell" style="width: 10%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 10%; ">
             <div class="row_celltitles" id="state"></div>
         </div>        
-        <div class="grid_row_cell" style="width: 25%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 25%; ">
             <div class="row_celltitles">
                 <a id="save_link" href="#" style="float:left;"><fmt:message key="label.save"/></a>
                 <a id="cancel_link" href="#" style="float:left; margin-left:15px; display:inline;"><fmt:message key="label.cancel"/></a>
@@ -599,19 +600,19 @@ dictionary = {
 <!-- Port Range template (begin) -->
 <div class="grid_rows odd" id="port_range_template" style="display: none">    
     <div id="row_container">
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="start_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="end_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="protocol"></div>
         </div>       
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="state"></div>
         </div>        
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles">
                 <a id="delete_link" href="#" style="float:left;"><fmt:message key="label.delete"/> </a>                            
             </div>
@@ -630,22 +631,22 @@ dictionary = {
 <!-- Port Forwarding template (begin) -->
 <div class="grid_rows odd" id="port_forwarding_template" style="display: none">    
     <div id="row_container">
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="public_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="private_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles" id="protocol"></div>
         </div>
-        <div class="grid_row_cell" style="width: 25%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 25%; ">
             <div class="row_celltitles" id="vm_name"></div>
         </div>   
-        <div class="grid_row_cell" style="width: 10%; padding: 1px;">
-            <div class="row_celltitles" id="state"></div>
+        <div class="grid_row_cell" style="width: 10%; ">
+            <div class="row_celltitles" id="state" style="padding:1px;"></div>
         </div>        
-        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
+        <div class="grid_row_cell" style="width: 15%; ">
             <div class="row_celltitles">
                 <a id="delete_link" href="#" style="float:left;"><fmt:message key="label.delete"/> </a>                                
             </div>