I am using Firebug on Firefox for Mac in order to see the info about the request data sent to the server and what response is taken from the server. I have a problem with my Spring+Hibernate+JSF+MySQL application; i.e. I cannot persist new objects to the database. In Eclipse, I have an XHTML file as follows:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>JSF Spring Hibernate Integration</title>
<style type="text/css">
.tg {
border-collapse: separate;
border-spacing: 0;
border-color: #ccc;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #ccc;
color: #333;
background-color: #fff;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #ccc;
color: #333;
background-color: #f0f0f0;
}
.tg .tg-4eph {
background-color: #f9f9f9
}
</style>
</h:head>
<h:body>
<h1>Add a Person</h1>
<h:form>
<table>
<tr>
<td><label>Name</label></td>
<td><h:inputText id="Name" value="#{person.name}"></h:inputText>
</td>
</tr>
<tr>
<td><label>Country</label></td>
<td><h:inputText id="country" value="#{person.country}"></h:inputText>
</td>
</tr>
<tr>
<td colspan="2"><h:commandButton
action="#{personService.addPerson(person)}" value="Add Person"></h:commandButton>
</td>
</tr>
</table>
</h:form>
<br />
<h3>Persons List</h3>
<c:if test="${!empty personService.listPersons()}">
<table class="tg">
<tr>
<th width="80">Person ID</th>
<th width="120">Person Name</th>
<th width="120">Person Country</th>
</tr>
<ui:repeat value="${personService.listPersons()}" var="person">
<tr>
<td>${person.id}</td>
<td>${person.name}</td>
<td>${person.country}</td>
</tr>
</ui:repeat>
</table>
</c:if>
</h:body>
</html>
I am new to and very inexperienced about Firebug, but while examining GET and POST parameters at the Firebug, I saw something interesting for me. After clicking on 'Add Person' button on JSF view page; the data,which user enters into the Name and Country fields, is sent as POST parameters named j_idt6:Name and j_idt6:country instead of just 'Name' and 'country'.Also, javax.faces.ViewState seems kinda odd to me.Here is the screenshot of it:
I am not definitely sure of it, but I suppose that this may cause failure in persisting a new object in my database.Here is my question:How can I edit these parameters on Firebug?How to make them work properly?
Firebug doesn't let you edit the request parameters, but if you are using Firefox, the built-in dev tools allow this.
Hit Ctrl + Alt + Q on Windows/Linux or Cmd + Alt + Q on Mac to get to the Network panel
Reload the page
Select the relevant request to open the side panels
Within the Headers side panel click on Edit and Resend
Edit the headers
Click Send
Just right-click on the text box and choose Inspect Element. Then rename the input as you like by double-clicking on name attribute (or click-right + Edit as HTML). And repeat those steps for the second input field.
Or you can modify the POST parameters as #Sam said.
Related
The page I'm trying to scrape is http://zipatlas.com/us/oh/zip-code-comparison/population-below-poverty-level.1.htm
It loads some content through javascript, so I'm trying to use the expected_conditions module in selenium to detect it. What happens is that I apparently detect the element I'm looking for, but when I print the page source, it doesn't contain that element. There's a link labeled "TEST LINK" at the bottom of the page, so I figured if that has loaded, the rest of the page pretty much has also.
Here is my code:
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.common.exceptions import TimeoutException
curr_url = r"http://zipatlas.com/us/oh/zip-code-comparison/population-below-poverty-level.1.htm"
driver = webdriver.Firefox()
driver.get(curr_url)
try:
myElem = WebDriverWait(driver, 30).until(EC.presence_of_element_located((By.LINK_TEXT, 'TEST LINK')))
except TimeoutException:
print("took too long to load")
print("element detected")
elem = driver.find_element_by_link_text('TEST LINK')
html = elem.get_attribute("outerHTML")
print(html)
print(driver.page_source)
driver.close()
I do successfully print out the detected element as TEST LINK
However, in the page_source that is printed out, I cannot find this. The page source is located here. I also tried using other expected_conditions like element_to_be_clickable
So my question is why is the located element not appearing in the page source? Also, is there any other way to detect that the whole page has loaded? Using expected_conditions is really the only potential solution I found.
You were close. Before you exract the outerHTML of the WebElement you need to induce WebDriverWait.
You can use the following solution:
Code Block:
driver.get('http://zipatlas.com/us/oh/zip-code-comparison/population-below-poverty-level.1.htm')
print(WebDriverWait(driver, 30).until(EC.element_to_be_clickable((By.LINK_TEXT, 'TEST LINK'))).get_attribute("outerHTML"))
print("==========")
print(driver.page_source)
Console Output:
TEST LINK
==========
<html><head><title>
Zip Codes with the Highest Percentage of Population Below Poverty Level in Ohio | Zip Atlas
</title>
<meta name="robots" content="all,index,follow"><meta name="rating" content="general"><meta name="author" content="ZipAtlas.com Development Team"><meta name="language" content="en-us"><meta name="copyright" content="Copyright 2011 ZipAtlas.com"><meta name="revisit-after" content="7 Days"><meta http-equiv="Expires" content="-1"><meta http-equiv="Distribution" content="Global"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="google-site-verification" content="3cRw56ihbmZI3sma1cdmLLpkwcJEE_L1tUFYhaet2xQ">
<style type="text/css">
body, td, div, span, p { color: #333333; font-size: 12px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; }
select { color: #333333; font-size: 12px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; border: solid 1px #5A81A6; }
a { text-decoration: none; color: #0000D0; }
a:hover { text-decoration: underline; color: #0000D0; }
h1 { margin:0px 0px 10px 0px; padding:0px 0px 0px 0px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; font-size: 16px; font-weight: normal; color: #3d7795;}
h2 { margin:35px 0px 0px 0px; padding:0px 0px 0px 0px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; font-size: 15px; font-weight: normal; color: #3d7795;}
h3 { margin:35px 0px 0px 0px; padding:0px 0px 0px 0px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-weight: normal; color: #3d7795;}
span.link { cursor: pointer; text-decoration: none; font-size: 12px; font-family: 'Segoe UI','Lucida Grande',Verdana,Arial,Helvetica,sans-serif; color: #0000D0; }
span.link:hover { cursor: pointer; text-decoration: underline; color: #0000D0; }
td.report_header { border: solid 1px #5A81A6; background-color: #5A81A6; color: #ffffff; }
td.report_data { border: solid 1px #5A81A6; padding: 1px 5px 1px 5px; font-size: 12px; }
</style>
<link rel="preload" href="https://adservice.google.co.in/adsid/integrator.js?domain=zipatlas.com" as="script"><script src="https://partner.googleadservices.com/gampad/cookie.js?domain=zipatlas.com&callback=_gfp_s_&client=ca-pub-7710991166856237"></script><script src="https://pagead2.googlesyndication.com/pagead/js/r20200624/r20190131/show_ads_impl_fy2019.js" id="google_shimpl"></script><script type="text/javascript" src="https://adservice.google.co.in/adsid/integrator.js?domain=zipatlas.com"></script><link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=zipatlas.com" as="script"><script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=zipatlas.com"></script><script src="https://www.google.com/cse/static/element/57975621473fd078/cse_element__en.js?usqp=CAI%3D" type="text/javascript"></script><link type="text/css" rel="stylesheet" href="https://www.google.com/cse/static/element/57975621473fd078/default_v2+en.css"><link type="text/css" rel="stylesheet" href="https://www.google.com/cse/static/style/look/v4/default.css"></head>
<body style="margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: url('/images/bg.gif');">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr>
<td style="background: url('/images/shadow-left.gif') top right repeat-y;" valign="top">
<table cellpadding="0" cellspacing="0" style="width:100%;height:200px; background: url('/images/bg-top-left.gif') top right no-repeat;">
<tbody><tr>
<td> </td>
</tr>
</tbody></table>
</td>
<td style="width:930px;background:url('/images/bg-top.gif') top left repeat-x;" valign="top">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr>
<td>
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr>
<td>
<img border="0" src="/images/logo.gif" alt="ZipAtlas Home">
</td>
</tr>
</tbody></table>
</td>
<td align="right" valign="bottom" style="color: #c0c0c0; padding-bottom: 3px; font-size: 13px;">
<a style="color: #ffffff;" href="/downloads/">Database Download</a>
</td>
</tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" style="width:100%; background-color:#ffffff;">
<tbody><tr>
<td style="padding: 10px 10px 10px 10px; height:550px;" valign="top">
<!--<form action="/" method="get">//-->
<table cellpadding="0" cellspacing="0" style="width:100%; border-bottom: solid 1px #f0f5f9;">
<tbody><tr>
<td><h1>Zip Codes with the Highest Percentage of Population Below Poverty Level in Ohio</h1></td>
<td align="right" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td><img border="0" src="/images/social/facebook-s.gif"></td>
<td style="padding-left:1px;"><img border="0" src="/images/social/twitter-s.gif"></td>
<td style="padding-left:1px;"><img border="0" src="/images/social/myspace-s.gif"></td>
<!--<td style="padding-left:15px;"><input type="text" name="q" style="width:175px;" value="" /></td>
<td><input type="submit" value="Search" /></td>//-->
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<!--</form>//-->
<table cellpadding="0" cellspacing="0" style="width:100%; border-bottom: solid 1px #f0f5f9;">
<tbody><tr>
<td style="padding:15px 0px 10px 0px;" align="center">
<script type="text/javascript" async="" src="https://cse.google.com/cse.js?cx=013012024412622983838:nucmfhluwdu"></script><script>
(function () {
var cx = '013012024412622983838:nucmfhluwdu';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</td>
</tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" style="width:100%; border-bottom: solid 1px #f0f5f9">
<tbody><tr>
<td style="padding:5px 0px 5px 0px;" align="center">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ZipAtlas - 3 Across (Mixed) -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7710991166856237" data-ad-slot="2630863889" data-adsbygoogle-status="done"><ins id="aswift_0_expand" style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
<td style="padding:5px 0px 5px 0px;" align="center">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ZipAtlas - 3 Across (Mixed) -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7710991166856237" data-ad-slot="2630863889" data-adsbygoogle-status="done"><ins id="aswift_1_expand" style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"><ins id="aswift_1_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
<td style="padding:5px 0px 5px 0px;" align="center">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ZipAtlas - 3 Across (Mixed) -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7710991166856237" data-ad-slot="2630863889" data-adsbygoogle-status="done"><ins id="aswift_2_expand" style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"><ins id="aswift_2_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</tr>
</tbody></table>
<div id="ctl00_ContentPlaceHolder1_final_content" style="padding-top:10px;">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td style="padding-left:3px;">Ohio Report:</td>
<td style="padding-left:5px;">
<div style="border: solid 1px #5A81A6; cursor:pointer; padding: 1px 5px 1px 5px; background-color: #FFFFD0; color: #5A81A6;" onmouseover="this.style.backgroundColor='#5A81A6';this.style.color='#ffffff';" onmouseout="this.style.backgroundColor='#FFFFD0';this.style.color='#5A81A6';" onclick="onContextMenu(event);" title="Click to select a different Ohio report">
Percentage of Population Below Poverty Level
</div>
</td>
</tr>
</tbody></table>
<td style="background: url('/images/shadow-right.gif') top left repeat-y;" valign="top">
<table cellpadding="0" cellspacing="0" style="width:100%;height:200px; background: url('/images/bg-top-right.gif') top left no-repeat;">
<tbody><tr>
<td> </td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="right"><img src="/images/shadow-ll.gif"></td>
<td style="background: url('/images/edge-bottom.gif') top left repeat-x;">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tbody><tr><td><img src="/images/shadow-lr.gif"></td>
<td align="right"><img src="/images/shadow-rl.gif"></td>
</tr></tbody></table>
</td>
<td><img src="/images/shadow-rr.gif"></td>
</tr>
</tbody></table>
<center>
<div style="color:#c0c0c0; padding: 50px 0px 50px 0px;">
<a style="color: #ffffff;" href="/">Zip Atlas Home</a> |
<a style="color: #ffffff;" href="/downloads/">Downloads</a> |
<a style="color: #ffffff;" href="https://ecovinyl.ca">ecoVinyl</a> |
TEST LINK
<br><br>
<font color="#ffffff">© 2020 ZipAtlas.Com</font>
</div>
</center>
<script type="text/javascript">
function Set(el_name, c)
{
var el = document.getElementById(el_name);
if (el)
{
el.innerHTML = c;
}
}
function Show(el_name)
{
var el = document.getElementById(el_name);
if (el)
{
el.style.display = '';
}
}
function Hide(el_name)
{
var el = document.getElementById(el_name);
if (el)
{
el.style.display = 'none';
}
}
</script>
<!-- expo-MAX Code Start //-->
<!-- Paste this code into every page that you would like to track //-->
<script type="text/javascript">
document.write(unescape('%3Cscript type="text/javascript" src="'+document.location.protocol+'//expo-max.com/adserver/js/"%3E%3C/script%3E'));
</script><script type="text/javascript" src="http://expo-max.com/adserver/js/"></script>
<script type="text/javascript">
expomax_trace('WunfWYG%2bFajQ%2f9F4kqiaXg%3d%3d','cb959e484ba8457ca327aeefce4cb2b4');
</script><div id="g5ef264d7a54140f7b03eff0ea8cfe256" style="display:none;"><iframe style="display:none;" src="https://expo-max.com/adserver/track/?e=WunfWYG%2bFajQ%2f9F4kqiaXg%3d%3d&a=Mozilla%2F5.0%20(Windows%20NT%2010.0%3B%20Win64%3B%20x64)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F83.0.4103.116%20Safari%2F537.36&l=http%3A%2F%2Fzipatlas.com%2Fus%2Foh%2Fzip-code-comparison%2Fpopulation-below-poverty-level.1.htm&r=&w=1366&h=768&p=http:"></iframe></div>
<!-- expo-MAX Code End //-->
<ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;"><ins id="aswift_3_expand" style="display:inline-table;border:none;height:0px;margin:0;padding:0;position:relative;visibility:visible;width:0px;background-color:transparent;"><ins id="aswift_3_anchor" style="display:block;border:none;height:0px;margin:0;padding:0;position:relative;visibility:visible;width:0px;background-color:transparent;"></ins></ins></ins></body><iframe id="google_esf" name="google_esf" src="https://googleads.g.doubleclick.net/pagead/html/r20200624/r20190131/zrt_lookup.html#" data-ad-client="ca-pub-7710991166856237" style="display: none;"></iframe></html>
I'm having the same issue Cosmin Popovici pointed out in this thread https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios where Gmail on iOs, particularly the iPhone 6, is pushing content to the right and cutting it a bit like so:
I have tried the suggested fixes of adding CSS code that targets the div gmail generates for the body, adding a class to the main wrapper table like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media only screen and (max-width: 599px) {
u ~ div .wrapper {min-width: 100vw;}
}
</style>
</head>
<body style="box-sizing:border-box;margin:0;padding:0;width:100%;">
<table class="wrapper" bgcolor="#EEEEEE" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
But this didn't work for me at all. Has anyone tried something else that has worked?
Here is some of my code:
<style>
#media screen and (max-width: 480px) {
u~div {
min-width: 100vw;
}
}
</style>
<body>
<table class="wrapper" width="98%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table class="mobile-shell" width="750" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="750" style="font-family: Arial, Helvetica, sans-serif !important; font-size: 0pt; font-weight: normal; line-height: 0pt; margin: 0; min-width: 750px; padding: 0; width: 750px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
/** Content goes here **/
</td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I've had this issue too and got my hopes up with the u ~ div .wrapper {min-width: 100vw;} hack, but I've never gotten it to fix both Gmail iOS and Android at the same time.
I've settled on the following code to remove the right gutter in Gmail iOS app. It's a little verbose, but should make the email go edge to edge in Gmail.
<style>
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
.mobile-shell {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.mobile-shell {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
#media only screen and (min-device-width: 414px) {
.mobile-shell {
min-width: 414px !important;
}
}
</style>
Create one of these media queries for each additional viewport size you'd like to fix.
This question already has an answer here:
JSF returns blank/unparsed page with plain/raw XHTML/XML/EL source instead of rendered HTML output
(1 answer)
Closed 7 years ago.
i have written a jsf-spring-hibernate application just to practice using an example on web.there isn't an error on console; and when i run it on localhost, i should see this screen:
However, i see this:
i used same xhtml file as in the example file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>JSF Spring Hibernate Integration</title>
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
border-color: #ccc;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #ccc;
color: #333;
background-color: #fff;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #ccc;
color: #333;
background-color: #f0f0f0;
}
.tg .tg-4eph {
background-color: #f9f9f9
}
</style>
</h:head>
<h:body>
<h1>Add a Person</h1>
<h:form>
<table>
<tr>
<td><label>Name</label></td>
<td><h:inputText id="name" value="#{person.name}"></h:inputText>
</td>
</tr>
<tr>
<td><label>Country</label></td>
<td><h:inputText id="country" value="#{person.country}"></h:inputText>
</td>
</tr>
<tr>
<td colspan="2"><h:commandButton
action="#{personService.addPerson(person)}" value="Add Person"></h:commandButton>
</td>
</tr>
</table>
</h:form>
<br />
<h3>Persons List</h3>
<c:if test="${!empty personService.listPersons()}">
<table class="tg">
<tr>
<th width="80">Person ID</th>
<th width="120">Person Name</th>
<th width="120">Person Country</th>
</tr>
<ui:repeat value="${personService.listPersons()}" var="person">
<tr>
<td>${person.id}</td>
<td>${person.name}</td>
<td>${person.country}</td>
</tr>
</ui:repeat>
</table>
</c:if>
</h:body>
</html>
Why do i get a different output?
You didn't defined it as JSF file in web.xml, thats why the file is not interpreted on the server, but send "as is" to the browser.
You need:
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
in your web.xml
I'm very new to coding and am taking a class to learn HTML5 and CSS3.
I have an old file however, that I need to update quickly for a client. It's set up with tables and inline styles which I know is a bit sloppy so I'm just trying to clean it up a little bit and get it to validate. I was able to get the file down from about 50 errors to just one but am stuck on figuring out this last part. Can someone point me in the right direction?
Thanks!
Line 68, Column 32: there is no attribute "background"
The DOCTYPE is XHTML 1.0 Transitional.
<tr>
<td colspan="3" background="http://www.website.com/image.jpg" align="left" style="font-family:museo300, Arial, Helvetica, sans-serif; font-size:32px; color:#145099; padding:0px 50px 0px 50px; line-height:38px;">Headline.
</td>
</tr>
I tried changing it to inline CSS using this code but now I have no background image. Can you tell me what I'm doing wrong? It looked fine before.
<tr>
<td colspan="3" align="left" style="font-family:museo300, Arial, Helvetica, sans-serif; font-size:32px; color:#145099; padding:0px 50px 0px 50px; line-height:38px; background-image:http://www.website.com/image.jpg;">Headline.
</td>
</tr>
I figured it out. I was coding the CSS wrong, should have been:
<tr>
<td colspan="3" align="left" style="font-family:museo300, Arial, Helvetica, sans-serif; font-size:32px; color:#145099; padding:0px 50px 0px 50px; line-height:38px; background-image: url(http://www.website.com/image.jpg);">Headline.
</td>
</tr>
Thanks for the help!
Since 1996, you should use the CSS background-image property.
I want to create a basic two columns layout in HTML with a table, but I want the table to "occupy" the FULL PAGE. without margins ("white spaces" between borders and browser's window), let me be more clear with an example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<meta name="Microsoft Theme" content="none">
</head>
<body>
<table border="4" width="100%" height="567" style="border-collapse: collapse; border: 3px solid #FF0000" bordercolorlight="#FF0000">
<tr>
<td bgcolor="#008080"> </td>
<td width="160" bgcolor="#000000"> </td>
</tr>
</table>
</body>
</html>
As you can see there, we have a green table with a black sidebar and red borders, all on top of a white background. The thing is, I want the borders to be "absolute" without having white space between user's browser window and them. I want the table to occupy the Full Page without spaces or "margins" or whatever they are, sorry for being redundant.
How can I do that?
This should do it:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
min-height: 567px;
padding: 0px;
border: 3px solid #FF0000;
}
.container .content {
background-color: #008080;
}
.container .sidebar {
background-color: #000000;
width: 160px;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="content"> </td>
<td class="sidebar"> </td>
</tr>
</table>
</body>
</html>
I also found another way to do it, here's the sample code (Comments in Spanish):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla ajustable al navegador y colunma fija de 200px</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: auto;
}
#tabla {
width: 100%;
border-collapse: collapse;
border: 1px solid #444;
background-color: #ffc;
}
.celda_dcha {
width: 200px;
border: 1px solid #444;
background-color: #cfc;
}
</style>
</head>
<body>
<!-- los bordes y colores son para testar la maqueta -->
<!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
<!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
<table id="tabla">
<tr>
<td>Contenido</td>
<td class="celda_dcha">Columna para imágenes</td>
</tr>
</table>
</body>
</html>