I have a div inside my HTML document for responsive signing:
<div class="header" style="line-height: 30px; font-size: 1em; background-color: #f9f9f9; padding: 37px 60px;"></div>
The color does NOT show up inside DocuSign's view, but when I export the document as a PDF, it shows up there just fine.
I have also tried background, with no success either.
This link says that background-color is supported.
https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/responsive/setting-tabs/
EDIT:
Sorry, I might have been as clear as I should have. Here is a better example of the code I am trying to run:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="font-family: sans-serif; padding: 0px; margin: 0px; font-size: 12px; padding: 0px; color: #11263c;">
<div class="header" style="line-height: 30px; font-size: 1em; background-color: #f9f9f9; padding: 37px 60px;">
Some other divs with content are here...images, text, etc.
</div>
<div class='some-other-content-div'>Blah</div>
<div class='some-other-content-div-2'>Blah</div>
</body>
</html>
The div with the class header is the one that is not showing the color behind it and its children. The value of "pink" worked and its HEX value, the color WHiteSmoke and its HEX (#F5F5F5) worked as well...but not the color GhostWhite or its HEX value (#F8F8FF) or the color I actually want to use...#F9F9F9. Just examples of colors I have tried...I hope this clarifies a bit more!
This may be a bug, which I'll ask to be fixed.
From what I can tell, it's dropping empty divs until it finally gets to some content. Including any visible elements before their div, or an invisible div with content "<div style='display:none'>.</div>", seems to get it working correctly.
So this is the workaround for now.
Related
/// The text I'm referring to is the text inside the transparent caption boxes displayed just below my picture slider(Jquery cycle2). The text seems to adhere to the opacity I've commanded for the box. I'd also like the box to span the width of the slider and the text within it to be centered, but now I'm getting ahead of myself. I would be glad to try any solutions suggested to me. I've also included an example from another website of what Im trying to imitate.
http://sff-law.ca/.
Instead, I've only been able to create the following:
///
<!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">
.cycle-slideshow, .cycle-slideshow * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* overlay */
.cycle-overlay {
font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
z-index: 800;
background: black;
color: #FFF;
opacity: .1;
overflow: hidden;
position: absolute;
top: 211px;
font-size: 16px;
font-weight: bold;
right: auto;
left: auto;
clear: both;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
margin-left: 1px;
font-style: italic;
}
</style>
<script src="jquery.cycle2.caption2.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle2.js" type="text/javascript"></script>
</head>
<body background="KAWARTHA LAW/Pics/6a00d83452719d69e2017d41a50bc6970c.jpg">
<div id="back">
<div class="cycle-slideshow"
data-cycle-timeout=2000
>
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<img src="Slidding/buying.gif"
data-cycle-title="Contracts"
data-cycle-desc="">
<img src="Slidding/last-will-and-testament-and-glasses.gif"
data-cycle-title="Corporate"
data-cycle-desc="">
<img src="Slidding/last-will.gif"
data-cycle-title="Wills and more wills"
data-cycle-desc="">
<img src="Slidding/Top-5-Reasons-to-have-a-Will-in-PA-02-08-12.gif"
data-cycle-title="Good Wills"
data-cycle-desc="">
</div>
</div>
</body>
</html>
If you only need this for newer browsers you can set the CSS to use an RGBA value, then the text will be opaque (This will work in IE9+, Chrome, Firefox, Safari):
.cycle-overlay{
background-color:(0,0,0,.1);
}
If you need a backwards compatible solution, you can create a 1x1 PNG image with the transparency that you want, and set that as the background.
I'm hoping someone can point me the right way. When I view my site in Dreamweaver, all of my divs line up correctly. That is to say, the text sits on the background next to the menu div. However, when I test in a browser, the text sits at the bottom, below the background image.
http://jsfiddle.net/sodisarmingdarling/Pr5AQ/
<!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>
html, body, .container {
width: 100%;
height: 100%;
margin: 0;
padding:0;
background-image:url(Background.gif);
background-repeat:no-repeat;
}
.menu {
padding: 70px 10px;
float: left;
}
li{
padding: 10px 20px;
margin: 0px 0;
list-style-type: none;
border: 0px;
}
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li><a href = "#" ><img src="images/DarkLayout_03.gif" width="166" height="66" /></a></li>
<li><img src="images/DarkLayout_06.gif" width="166" height="66" /></li>
<li><img src="images/DarkLayout_08.gif" width="164" height="66" /></li>
<li><img src="images/DarkLayout_11.gif" width="164" height="66" /></li>
<li> <img src="images/DarkLayout_13.gif" width="166" height="66" /></li>
</ul>
</div>
<div class="content">
text text text
</div>
</div>
</body>
</html>
What I see in Dreamweaver:
What I get in the browser (tested in Safari, Chrome, and Mozilla):
In the CSS for the .content, change the float from left, to none.
Current CSS:
.content{
padding: 130px 10px;
float: left;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
New CSS:
.content{
padding: 130px 10px;
float: none;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
}
Here is a jsFiddle of it (using random images in the html), http://jsfiddle.net/FvAW4/
Whilst the current CSS works for small text, with larger text it forces the text to go underneath everything. Changing it to none will solve this.
Design view is intended as a viewport for you to work in, and not as a browser to test in (even though most content is displayed the same in browsers). Dreamweaver has an option to enable the Design view to render it as though it were a browser, however. This option is called the "Live" view, and it is the tab next to the Design view tab.
I would suggest you get used to using Live view, as it's quick and easy to display the page. But remember, sometimes Dreamweaver renders the page contents differently to that of browsers.
I have a problem with div positioning in my form. My page contains a sheet. With div layout as below.
In divs on the left side, there are description of the fields. (they share the same style class)
In divs on the right side, there are the fields. (they share the same style class)
After validation my page look like this:
But I want it to look like this:
Honestly, I thought how do deal with it, for quite a white, and I simlpy have no idea what to do it. My page is almost ready so I'd like to fix that with possible at low cost.
[edit1]:
My current css look simple, something like this:
div_on_left{
clear: both;
float: left;
width: 440px;
padding-top: 5px;
padding-bottom: 8px;
}
div_on_right{
float: left;
width: 500px;
padding-top: 3px;
padding-bottom: 6px;
}
[edit2]:
I have just found one solution (posted below), but I don't like it. It will crash if context of divs on the left is too big. That's due to
position:absolute;
So I'd like to avoid this property.
<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>
<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>
<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>
It have to be a common problem. How do you deal width forms with validation that apear over the field boxes?
There's a solution for your problem but it involves a table-cell layout. The layout must have a row and two inner cells aligned to the bottom.
Here is a JSFiddle Example: http://jsfiddle.net/cvbLC/
I'm not aware of which browser support you are needing, but here is more information about this matter: http://www.quirksmode.org/css/display.html
well, I've got a straightforward layout,
but there is a problem with boundaries,
when I resize the window, the content gets outside the boundaries.
that's how it looks like:
Boundaries offset http://img819.imageshack.us/img819/1893/aproblem.png
I'd would be glad if you could offer a solution...
Dunno what's causing it.
Note, please don't change the wrapper thing, for that's really the only layout that worked for my site... But I think its possible to modify the header and the foot, or perhaps put some more wrappers, if I only knew where.
Thanks!
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-image:url('http://img804.imageshack.us/img804/4743/testcj.png');
background-position:top;
background-size:100% 100%;
background-repeat:repeat-x;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-image:url('http://img198.imageshack.us/img198/9422/test2fy.png');
background-position:bottom;
background-size:100% 100%;
background-repeat:repeat-x;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
The above seems to work perfectly on my computer.
However, if you are getting this problem on resize, try applying min-width to the div containing the background, and try again.
After many hours I figured out why the links within my pngs in IE6 do not work.
It's because Im using filter:progid:dximagetransform.microsoft.alphaimageloader within my CSS. Yet after many more hours I have not found a solution to fixing these links.
Here is my code...
HTML
<div id="fullwidth-header-wrapper">
<div id="header"> <strong class="logo"> Google </strong>
<div id="nav">
<ul>
<span>
<span style="color: white;">Prefer</span>
Google? Click
here!
</span>
</ul>
</div>
</div>
</div>
CSS
#fullwidth-header-wrapper {
height: 120px;
}
#header {
background:url(../images/header-bg.png) no-repeat 50% 0;
height: 138px;
width: 980px;
margin: 0 auto;
position: relative;
top:0;
}
.logo{
background:url(../images/logo.png) no-repeat;
display:block;
width:500px;
height:125px;
position:absolute;
top:40px;
left:85px;
}
.logo a{
display:block;
width:323px;
height:85px;
text-indent:-9999px;
overflow:hidden;
}
#nav {
background:url(none.gif);
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/nav.png', sizingmethod='crop');
display: inline;
position: absolute;
top: -8px;
right: 30px;
width: 350px;
height: 75px;
z-index: 150;
}
#nav ul {
position: relative;
top: 18px;
left: 0px;
color: rgb(87, 175, 237);
font-size: 96.8%;
z-index:200;
}
#nav span {
color: #fff;
position: absolute;
top: 18px;
left: 0px;
font-size: 96.8%;
}
#nav a {color: rgb(255, 255, 255);}
How do you fix this issue or avoid this and suggestions re: a possible solution for the above?
Thanks!
Try this: http://www.hrunting.org/csstests/iealpha.html
In short:
What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work.
Since your #nav element has position: absolute, you'll need to add a wrapper div around that and absolutely position that instead.
This is often a problem with using a png fix on something that contains links, the Alpha version of the twinhelix png fix has apparently solved this issue. I have used it, its a little buggy still or at least it was a few months ago, but used right on small sites it is production ready http://www.twinhelix.com/css/iepngfix/.
I normally use the twinhelix 1.0 script for all our sites, I include an ie6.css stylesheet with a conditional comment aimed at IE6:
<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8">
<![endif]-->
Inside there you then in the CSS you just call it using the 'behavior' rule. IE 7 and 8 do transparent png's just fine. You do need to make sure you have a blank.gif 1px by 1px transparent gif somewhere and update the htc file (which really is just JS) to link to the path of that image.
#nav {
behavior: url(/css/iepngfix.htc);
}
I hope this helps
I had a similar problem, I was using a transparent background so I had to apply the png fix. I had a div and a link around it, like this:
<div id="bla"></div>
The links were not working at all in IE6. When I applied position: relative to that bla div, it worked! position: relative seems to work wonders on IE6, as well as float: left sometimes...