Menu
I’m a programmer from way back, but most of my experience has been in application programming, not website development. I have been working on a website on and off for a few years now, so I’m familiar with html, javascript, etc. I’m not a guru, but not a newbie either. I am taking my first step at responsive programming and I am a total newbie at displaying an app on a cellphone. I took my first stab at it and I’m relatively happy that I got it going with a few pokes at it.
But I have something that stumps me about the rendering on my cellphone. It appears that the CSS file is being read, because it is displaying the background color specified. The rendering of the various divs in the body of the html does not display the colors specified for in the CSS file.
My understanding may be incorrect, but I think the divs should be displayed in the same color regardless of the target. All colors show up on my computer display.
I’m using the Apache Tomcat 8.0 JSP container on computer as the web server on my intranet. My cellphone target is a ZTE cellphone running andriod. I tried looking at the example on an LG cellphone, using Firefox and Opera browers and got the same results.
I tried to attach example files, but I had problems uploading. I will try to upload some files after I get this thread started.
Jim A.
html, body {margin:0px;}
/*
* SCCS - %Z% %P% - %I% - %H%
*
* Default css2.1 setting taken from the spec Appendix D
*/
address,
blockquote,
dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li { display: list-item }
head { display: none }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { /* outline: thin dotted invert */
outline-style: dotted;
outline-color: red;
outline-width: thin;
}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
/************************************************************
* End of default settings
************************************************************/
body {
background:pink;
margin: 19px 19px 0 9px;
padding: 0;
}
#allContent {
/* color:#ff0000; */
color: black;
}
#startTestIframID {
font-size: 24pt;
color: yellow;
}
#scheduleEvent {
background:yellow;
font-size:48px;
font-style:italic;
font-weight:bold;
text-align:center;
font-family:cursive;
border-style: ridge;
border-width: 9px;
}
#topHorizontal1 {
background:yellow;
height:100px;
font-size:48px;
font-style:italic;
font-weight:bold;
text-align:center;
font-family:cursive;
border-style: ridge;
border-width: 9px;
}
#topHorizontal2 {
background:purple;
font-size:16px;
color: yellow;
text-align:center;
border-style: ridge;
border-width: 9px;
height:100px;
}
#topHorizontal3 {
background:gray;
color: yellow;
text-align:center;
font-size:16px;
height:20px;
}
#content {
background:lightgreen;
color: blue;
text-align:center;
font-size:16px;
height:20pxblue
}
#ads {
background:green;
color: orange;
text-align:center;
font-size:16px;
}
.formfield * {
vertical-align: middle;
margin: auto;
background: orange;
font-size:50px;
}
.toolBarTable {
padding-top : 0px;
margin-top : 0px;
vertical-align: top;
}
.imageText {
margin-top: 0.1em;
margin-bottom: 0.1em;
}
.imageTextClass {
color: yellow;
background: gray;
padding: 1px;
line-height: 50%;
}
.tableImageCLass {
position: relative;
}
.tableImageTextClass {
position: absolute;
top: 20px;
left: 0;
}
tr.imageSpacer > td {
padding-bottom: 2em;
}
/* This was not working - I wanted to put the warning in yellow, not red.
#afterStreetAddress1 span.error {
font-size: 0.8em;
color: #FF0;
font-weight: bold;
display: block,
margin-left: 215px;
}
*/
/* Styling used for JQuery error message and my own error messages. See customerRegister.jsp
* for an example of my usage.
*/
#customerRegisterForm label.error, #customerRegisterRerunForm label.error, #customerRegisterForm span.error, #customerRegisterRerunForm span.error {
font-size: 0.8em;
color: #F00;
font-weight: bold;
display: block;
margin-left: 215px;
}
.tabletext {
padding-top : 0px;
margin-top : 0px;
color: yellow;
/* background-color : maroon; */
}
.tablebutton {
background-color : gray;
color: yellow;
}
.hidden {
/* display : none; */
height : 0%;
font-size: 0px;
}
.form_title {
font-size:40px;
color: purple;
}
.division {
height:100%;
float:left;
width:8%;
position:relative;
/* background-color: blue; */
}
#toolBarDiv {
height:100%;
width:84%;
float:left;
position:relative;
/* background-color: blue; */
}
#mainTitle {
font-size:24px;
font-weight:bold;
}
#topLevel {
background:pink;
border-collapse: collapse;
height: 95%;
}
#content {
float: left ;
width: 80% ;
}
#ads {
float: left;
width: 20%;
}
.cascadedSelect {
float: left;
background:lightgray;
}
#topic_id, #type_id,
#pokerLevel_id, #theaterLevel_id, #movieLevel_id, #festivalLevel_id,
#pokerType_id, #theaterType_id, #movieType_id, #festivalType_id,
#init_topic_id, #init_moreTopic_id { float: left }
#travel_id, #init_travel_id, #init_moreTravel_id, #pre_travel_id,
#travelLevel_id, #trainLevel_id, #planeLevel_id, #carLevel_id, #busLevel_id,
#planeMethod_id, #trainMethod_id, #busMethod_id, #carMethod_id { float: left }
#dblname1, #dblname2 { float: left }
#topicresult_id, #travelresult_id { clear: both }
#sel_double, #hor1_id { clear: both }
#topicresult_id, #travelresult_id {
background:pink;
}
#sampleresult {
background:darkgray;
display: block;
padding: 10px;
margin: 2px 2px 0 2px;
height:20px;
width:100%;
font-size: 12pt;
}
#mid {
background:lightgreen;
width: 95%;
padding: 10px;
margin: 2px 2px 0 2px;
}
#maincontent {
display: flex
}
#footer {
clear: both ;
text-align:center;
font-size:20px;
font-weight:bold;
background:lightyellow
}
#aboutus {
text-align:center;
font-size:20px;
font-weight:bold;
background:darkblue
}
.containingBox {
display: flex;
flex-flow: column;
}
.containingBox .flexDivA {
display: flex;
background: blue;
color: black;
order: 3;
flex: 0 auto;
align-self: auto;
min-width: auto;
min-height: auto;
}
/* Commented out because I could not get flexboxes within flexboxes to work
// The example is in tableDiv.jsp, but is commented out.
// .containingBox .flexDivA .flexDevD {
// background: blue;
// color: black;
// order: 3;
// flex: 1 auto;
// align-self: auto;
// min-width: auto;
// min-height: auto;
// }
*/
/* Commented out because I could not get flexboxes within flexboxes to work
// The example is in tableDiv.jsp, but is commented out.
// .containingBox .flexDivA .flexDevE {
// background: purple;
// color: red;
// order: 1;
// flex: 0 auto;
// align-self: auto;
// min-width: auto;
// min-height: auto;
// }
*/
/* Commented out because I could not get flexboxes within flexboxes to work
// The example is in tableDiv.jsp, but is commented out.
// .containingBox .flexDivA .flexDevF {
// background: black;
// color: white;
// order: 2;
// flex: 0 auto;
// align-self: auto;
// min-width: auto;
// min-height: auto;
// }
*/
/********************************************************************************
*
* popup example taken from https://www.w3schools.com/howto/howto_js_popup.asp
*
********************************************************************************/
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<i>
</i><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="ISO-8859-1"></meta>
<body bgcolor="lightblue" style=margin:9px 9px 0 9px;padding:0;>
<i> </i> <base href="http://localhost:8080/example/"></base>
<i> </i> <link rel="stylesheet" type="text/css" href="pages/fdivs_example.css"></link>
<i> </i> <script src="javascript/MM_JAVASCRIPT2E/_js/jquery-3.3.1.js"></script>
<i> </i> <link rel="mercury icon" href="/example/images/favicon.icon" type="image/x-icon"></link>
<i> </i> <script>
<i> </i> console.log("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
<i> </i> $(document).ready(function() {
<i> </i> console.log("page1.jsp: HERE8010: document.ready is being run");
<i> </i> }); //end ready
<i> </i> </script>
<i> </i> </head>
<i> </i> <body>
<i> </i> <div id="topLevel">
<i> </i> <div id="topHorizontal1" title="Example" >
<i> </i> <title>Example Development</title>
<i> </i> Example Development
<i> </i> </div>
<i> </i> <div id="topHorizontal2">
<i> </i> <br></br>
<i> </i> css style file is 'fdivs_example.css'.
<i> </i> </div>
<i> </i> <div id="topHorizontal3">
<i> </i> CHECKPATH tophorizontal3.xhtml customerLoginValid is false
<i> </i> </div>
<i> </i> <div id="maincontent" title="Container">
<i> </i> <div id="content">
<i> </i> TODAY in content.jsp
<i> </i> <p>Working on loggedIn is false.</p>
<i> </i> <p>
<i> </i> Working on homePage, which is the default
<i> </i> 'func' if no other function is specified.
<i> </i> This should probably never happen.
<i> </i> </p>
<i> </i> </div>
<i> </i> <div id="ads">
<i> </i> <h1>Right Divs</h1>
<i> </i> <p>
<i> </i> This is page 1 right content from a paragraph.
<i> </i> It was dynamically generated as needed.
<i> </i> </p>
<i> </i> </div>
<i> </i> </div>
<i> </i> <div id="footer" company="Example.com" Title="footer">
<i> </i> <i>Development Examples</i>
<i> </i> <br></br>
<i> </i> <hr></hr>
<i> </i> Copyright&copy; 2020 Examples.com
<i> </i> </div>
<i> </i> <div id="aboutus" company="Examples.com" Title="footer">
<i> </i> ABOUT US GOES HERE
<i> </i> </div>
<i> </i> </div>
<i> </i> </body>
</html>
your code here``<i>
</i><base href="http://localhost:8080/example/"></base><i>
</i>``0.1.9 — BETA 4.26