My (very simple) test code correctly centers in Chrome & Firefox ( http://i.imgur.com/5vCoV.png ), but does not appear correctly in Safari. Instead, it looks like this: http://i.imgur.com/qDq9M.png
I've only tested on a Mac.
Here is my code:
<!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>Untitled Document</title>
<style type="text/css">
#charset "utf-8";
body {
background-color: #ccc;
font-family: Verdana, Geneva, sans-serif;
height: auto;
width: auto;
font-size: 80%;
margin: 0;
padding: 0;
}
#main {
text-align: center;
}
</style>
</head>
<body>
<CFIF NOT ISDEFINED("FORM.SUBMIT")>
<div id="main">
<cfform format="flash" action="" skin="haloorange" width="798" height="540" style="background-color: ##999999; margin-top:8px; margin-left: 38px;">
<cfformgroup type="panel" label="APPLICATION" width="790" style="background-color:##DDDDDD">
<CFINPUT label="First Name" TYPE="Text" NAME="fname" MESSAGE="First Name required." value="Ahmed" REQUIRED="Yes" tooltip="Enter your first name." width="298">
<CFINPUT label="Last Name" TYPE="Text" NAME="lname" MESSAGE="Last Name required." value="Osman" REQUIRED="Yes" tooltip="Enter your last name." width="298">
<CFINPUT TYPE="submit" width="49" NAME="submit" value="Submit" tooltip="Save your name.">
</cfformgroup>
</cfform>
</div>
<CFELSE>
<cfdump var="#FORM#">
</CFIF>
</body>
</html>
Edit:
Here is the rendered HTML code, thanks reiso:
<!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><script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#charset "utf-8";
body {
background-color: #ccc;
font-family: Verdana, Geneva, sans-serif;
height: auto;
width: auto;
font-size: 80%;
margin: 0;
padding: 0;
}
#main {
padding: 0;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/cfformhistory.js'> </script>
<noscript>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
id='CFForm_1'
codebase='http://www.macromedia.com/go/getflashplayer#version=7,0,14,0'
width='798'
height='540'>
<param name='wMode' value='Window'/>
<param name='src' value='/zip/1613302191.mxml.cfswf'/>
<param name='flashVars' value='%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D'/>
<embed pluginspage='http://www.macromedia.com/go/getflashplayer' id='CFForm_1' src='/zip/1613302191.mxml.cfswf' width='798' height='540' wMode='Window' flashVars='%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D' ></embed> </object>
</noscript>
<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/CF_RunActiveContent.js'></script>
<script type="text/javascript" charset='utf-8'>
CF_RunContent('<object classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' codebase=\'http://www.macromedia.com/go/getflashplayer#version=7,0,14,0\' width=\'798\' height=\'540\'>\n <param name=\'src\' value=\'/zip/1613302191.mxml.cfswf\'/>\n <param name=\'wMode\' value=\'Window\'/>\n <param name=\'flashVars\' value=\'historyUrl=%2FCFIDE%2Fscriptscfformhistory%2Ecfm%3F&lconid=" + lc_id +"&%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D\'/>\n<embed pluginspage=\'http://www.macromedia.com/go/getflashplayer\' \n id=\'CFForm_1\' \n src=\'/zip/1613302191.mxml.cfswf\' \n width=\'798\' \n height=\'540\' \n wMode=\'Window\' \n flashVars=\'historyUrl=%2FCFIDE%2Fscriptscfformhistory%2Ecfm%3F&lconid=" + lc_id +"&%5F%5FCFForm%5F1%5Fcacheid=ED542456%2DBAD9%2DED93%2DE8B94655D75F224D\' >\n</embed>\n</object>\n');
</script>
<script type="text/javascript" charset='utf-8'>
document.write("<br><iframe src='/CFIDE/scripts/cfformhistory.cfm' name='_history' frameborder='0' scrolling='no' width='22' height='0'></iframe></br> ");
</script>
</div>
</body>
</html>
Thanks
have not tested it, but try this as your #main style:
#main {
width: 798px; /* same as your cfform's width value */
padding: 0;
margin: 0 auto; /* this shoudl center the container on the page */
}
and REMOVE all margin-* declarations from the style attribute in your cfform tag
Related
I am going to use bootstrap input spinner for my cart web page some old version bootsrap.min.css clashing to align the content correctly ,Can any one help me how to fix it
my code
[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-input-spinner</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
h2 {
margin-top: 2rem;
}
h3 {
margin-top: 1rem;
}
/*noinspection CssUnusedSymbol*/
.input-group,
input.test-value-input {
max-width: 250px;
}
.code {
background-color: #f1f2f3;
font-family: Courier, monospace;
}
</style>
</head>
<body>
<section class="container pt-3">
<h3>Simple Integer</h3>
<p>
<input type="number" value="1" min="1" max="10" />
</p>
</section>
<!-- bootstrap needs jQuery -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="src/bootstrap-input-spinner.js"></script>
<script>
$("input\[type='number'\]").inputSpinner()
</script>
</body>
</html>][1]
i want output like thisoutput
but am getting this design wrongdesing
I have a html file.
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div align="left" style="height: 475px;">
<noscript><div style="color: red; width: 30%; border: 1px solid red; padding: 4px; font-family: sans-serif;"></div></noscript>
<div id="x"></div>
<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">x.embed("x","720px","475px","x.xml","true","false");</script>
</div>
</body>
</html>
I want to insert css script within the <head></head> and the file become this:
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body{margin: 0px 0px 0px 0px; background-color:black;}
</style>
</head>
<body>
<div align="left" style="height: 475px;">
<noscript><div style="color: red; width: 30%; border: 1px solid red; padding: 4px; font-family: sans-serif;"></div></noscript>
<div id="x"></div>
<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">x.embed("x","720px","475px","x.xml","true","false");</script>
</div>
</body>
</html>
Can anyone show me the steps how to do that with R?
Detailed explanation will be appreciated! Thanks!
You can do like this:
library(xml2)
h <- as_list(read_html("yourfile.html"))
css <- list('body {background-color:black;}')
attr(css, "type") <- "text/css"
h$html$head$style <- css
write_html(as_xml_document(h$html), "outfile.html",
options=c("format","no_declaration"))
outfile.html:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">body {background-color:black;}</style>
</head>
Hi well I basically want to move down my logo div which is inside my topBar div however when ever I use padding or margin it moves the whole top bar down or the logo just repeats its self (and yes I have tried background-repeat: no-repeat)
<!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>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="logo">
<p>chattrd</p>
</div>
</div>
</body>
</html>
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
}
.topBar {
background: #0C3;
height: 40px;
}
#logo {
background-image:url(../images/logo.png);
height: 26px;
width: 121px;
overflow: hidden;
display: block;
text-indent:-999px;
}
The reason it is behaving this way is that you are using the image as a background. If you want to carry on with this approach, the easiest way to be able to move it vertically is to place another div before the #logo-div like so:
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="spaceDiv"></div>
<div id="logo"></div>
</div>
</body>
The height of the spaceDiv can be used to move the #logo-div using the following CSS:
#spaceDiv{
height:6px;
}
I have a pop-up built using Jquery.Block-UI and ajax.. and i have no issues with the functionality but the thing is CSS, when i checked in Chrome there are no CSS problem... But when it comes to IE and FIREFOX its worse.. the Design of pop-up is gone... please take a look at images below
IN CHROME : WORKS FINE:
IN IE-8
IN FIREFOX:
Here is the Code:
In head tag:
<link href="style.css" rel="stylesheet" type="text/css" />
Content:
<table class="quot-popup" cellpadding="0" cellspacing="0">
<tr><td><div style="float: right;"><input type="image" style="" src="../Webimages/x.png" onclick="closePop();"/></div></td></tr>
<%if(navLevel.trim().equalsIgnoreCase("0")){%>
<tr><td class="poptd">Are you a Registered User please Sign in to Quote List, Or Sign Up to Register.</td></tr>
<%}else if(navLevel.trim().equalsIgnoreCase("1")){%>
<tr><td class="poptd">Are you a Registered User please Sign in to Quote List, Or Sign Up to Register.</td></tr>
<%}%>
<tr><td class="poptd">Or</td></tr>
<tr><td class="poptd">You want to continue without Register, Click Here to Quote List.</td></tr>
</table>
<table id="askEmail" class="quot-mailPopup" cellpadding="0" cellspacing="0">
<tr><td class="mailtd1">Enter your Email Address : </td>
<td class="mailtd2"><input type="text" id="anonymousEmailId" name="anonymousEmailId" value=""/></td>
<td class="mailtd3"><input type="image" src="../Webimages/go-btn.jpg" onclick="sbtEmail(); return false;"/></td></tr>
</table>
CSS:
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-mailPopup{width: 100%; font-size: 11px; font-weight: bold; display: none; text-align: center;}
table.quot-mailPopup td.mailtd1{width: 40%; padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2{width: 50%; padding-top:6px;padding-bottom:6px; padding-right:3px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2 input{width: 250px; height:18px;}
table.quot-mailPopup td.mailtd3{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
Html: pop up will be called on click List
<!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="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<link href="Webcss/style.css" rel="stylesheet" type="text/css" />
<link href="Webcss/contentslider.css" rel="stylesheet" type="text/css" />
<link href="Webcss/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
<link href="Webimages/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="Webjs/jquery.js"></script>
<script type="text/javascript" src="Webjs/jquery.blockUI.js"></script>
<script type="text/javascript" src="Webjs/ajax.js"></script>
<script type="text/javascript">
//------------------------------------- For Pop-Up
$(function() {
$('#QutLstLnkId').click(function() {
var qMailId = $("#qtMailId").val();
qMailId = $.trim(qMailId);
if(qMailId == "null" || qMailId == ""){
$.blockUI({
message: $('#messageDispDiv'),css: {
width:'530px',
height:'auto',
top: ($(window).height() - 110) /2 + 'px',
left: ($(window).width() - 530) /2 + 'px'
} });
$("#messageDispDiv").block({css:{border: 'none',padding: '15px',backgroundColor: '#000','-webkit-border-radius': '10px','-moz-border-radius': '10px',width:'200px',opacity: .5,color: '#0A7A48'}});
enqueue("web/quoteList.jsp?oper=QUOTLSTAUTH&pg=0",processAjax);
}else{window.location.href="web/createQuoteList.jsp";}
});
});
function processAjax(s){
$("#messageDispDiv").unblock();
$("#messageDispDiv").html(s);
}
function closePop(){
$.unblockUI();
}
function showMail(){
$("#askEmail").show();
}
//------------------------------------- For Pop-Up
</script>
</head>
<body>
<!-- PopUp div -->
<div id="messageDispDiv" style=" display: none; width:530px; min-height: 110px; border: 1px solid #0A7A48; text-align:center;">
<div id="askEmailId" style="display:none;">
</div>
</div>
<!-- PopUp div -->
</body>
</html>
Thank you.
Dude...your code... (sorry, it's hard to read).
I'm betting you're having a CSS issue because of the way you're shoehorning it into the table. Tables, and TDs look like DIVs, but they absolutely are not. I'm betting this is why Chrome seems to be working fine, but FF, and IE are snubbin' ya.
So - could you just simplify your design, and make things easier?:
<table id="popup"> <!-- this could/should be a div //-->
<tr>
<td align="center">
<img src="close.png" />
<p>Are You Registered...Register</p>
<p>Or</p>
<p>Or</p>
<p>You want to continue....list.<br />
Enter your Email Address : <input></p>
</td>
</tr>
</table>
CSS (for example):
#popup { border:4px solid gray; position:relative; }
#popup #closer { position:absolute; top:10px; right:10px; }
p { font: 1.1em/1.5 sans-serif; }
...etc. You get the gist - it's simple.
For a single-cell table, you're showing 11 lines of CSS. It's my belief that when my CSS starts to bloat like that...my code's gone awry somewhere - time to refactor.
You've strayed too far from semantic markup. You'll spend more time working up a hack then to just simplify your code design.
Solved.... Thank you all... there was nothing wrong with Css or Code or Browser... it was with Apache server cache... cleared Apache cache and its good in all browsers...
I know this question gets asked a lot because I have looked at many "solutions" trying to get this to work for me. I can get it to work if I hack up the html but I want to use all CSS. All I want is a header with two columns below it, and I want these three items to fill the entire page/screen, and I want to do it with CSS and without frames or tables. The XAMPP user interface looks exactly how I want my page to look, but again, I do not want to use frames. I cannot get the two orangeish colored columns to extend to the bottom of the screen. I do have it so it looks like the right column extends to the bottom of the screen just by changing the body background color to the same color as the background color of the right column, but I would like both columns to extend to the bottom so I didn't have to do that. Here is what I have so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead">
MY SITE</div>
<div id="left_col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report</div>
<div id="page_content">
<div id="page_content_heading">Welcome!</div>
Lots of words</div>
</div>
</body>
</html>
CSS
#masthead {
background-color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:xx-large;
font-weight:bold;
padding:30px;
text-align:center;
}
#container {
min-width: 600px;
min-height: 100%;
}
#left_col {
padding: 10px;
background-color: #339933;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
width: 210px;
}
#page_content {
background-color: #CCCCCC;
margin-left: 230px;
padding: 20px;
}
#page_content_heading {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
}
a {
color:#0000FF;
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
}
a:hover {
color:#FF0000;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
Something like this should work
<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">
</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>
Well, this is your code altered to fit what you want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
#hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
#col{float:left;width:230px;height:100%;background-color:red;}
#bd{width:100%;height:100%;background:pink;}
.content{padding:100px 0 0 230px;}
</style>
</head>
<body>
<div id="hd">MY SITE</div>
<div id="col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report
</div>
<div id="bd">
<div class="content">
Lots of words
</div>
</div>
</body>
</html>
Please not that inside containers like the one on the body div may be required to allow proper format of your html elements!
Hope this helps... :)