There is information displayed in a fieldset that is taken from a database in a content management system.
The information is styled correctly when viewed as a normal page, however when the page is viewed in print preview, the information in the fieldset is aligned to the left of the page and the styling is lost!
I have looked everywhere for a solution, people have mentioned removing the floats etc, however I can't seem to solve this problem!
The problem seems to occur in all browsers I have tried (Safari, Chrome and Firefox).
There is a small amount of data presented in a table, which is formatted correctly :/
View from page:
page view
View from print preview:
print view
Any help would be greatly appreciated!
EDIT: These are small snippets of code as requested - there is a lot there!
HTML
<div class="divClass" id="Person_title_div" >
<label class="divLabel" for='Person_title' id="Person_title.label"
>Title </label>
<div class="divValue">
<input type="hidden" name="Person.title" value="-5509180968589174739" />
<span >Dr</span>
</div>
</div>
<div class="divClass" id="Person_knownAs_div" >
<label class="divLabel" for='Person_knownAs' id="Person_knownAs.label"
>Name </label>
<div class="divValue">
<span >qwe qwe</span>
</div>
</div>
<div class="divClass" id="Person_email_div" >
<label class="divLabel" for='Person_email' id="Person_email.label"
>Email </label>
<div class="divValue">
<span >qwe#qew</span>
</div>
</div>
CSS
div.divClass,
div.formWidget,
div.multiList {
float: left;
position:relative;
margin:0 5px 5px 0;
min-height:30px;
width:310px;
}
fieldset {
clear: both;
border: 1px solid #888;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
print.css
/* print styles */
body { background: white; font-size: 8pt; font-family: Verdana, Arial; }
#firstMenu,
#secondMenu,
#additionalMenu,
#footernav,
#selectheader ul,
input,
a img#logo { width: 58px; height: 70px; }
a:link, a:visited { color: #520; background: transparent; font-weight: normal; text-decoration: none; }
header { height: 105px; background: url(images/header.gif) no-repeat; }
div#mainData td, div#mainData th { float: none !important; display: inline !important; padding-left: 1em; padding-right: 1em; }
table.datatable th, table.datatable td {
vertical-align: top;
/*For some reason table text is coming out inconsistent. Must be being inherited somewhere,
but difficult to pin down. Therefore force to specific pixel value as a work around */
font-size: 9px;
}/* CSS Document */
.menu {
display: none; }
.session {
display: none; }
Related
I have managed to put the placeholder plus the dd/mm/yyyy together. When I click in order to key in or select the date, the box resets to its default state. Styles like padding, width, and color disappears but when I click outside the box, it returns to default with the styles in place. I would like it to remain the same when selecting the date. Kindly help.
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.3em;
padding: 11px;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
}
input[type="date"]:focus:before {
content: '' !important;
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>
This style content: '' !important; is causing the problem:
input[type="date"]:focus:before {
content: '' !important; /* THIS IS THE PROBLEM */
color: #00a79d; /* This is ok */
}
You are removing all the content (i.e. the placeholder word "Departure") and that is what is adding the width and padding.
FYI you are also duplicating the input[type="date"]:before rule, I've combined them into one.
Snippet with that line removed, and you can see it is working:
input {
border: 1px solid #ecf0f1;
color: #00A79D;
}
input[type=date] {
text-align: right;
}
input[type="date"]:before {
color: lightgrey;
content: attr(placeholder) !important;
margin-right: 0.5em;
padding: 11px;
}
input[type="date"]:focus:before {
color: #00a79d;
}
<div class="col-sm gutters-19">
<div class="form-group">
<div class="form-select-custom">
<input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
</div>
</div>
</div>
You shouldn't use ::before on input date elements, since it's heavily browser-specific
Your styles don't disappear : you make your ::before vanish, and it's the thing making the space inside your input. So your input naturally shrinks. Just play with your input[type="date"]:focus::before content, you'll see what i mean.
Not tested, but you could perhaps avoid your javascript toggleClass by using the :empty state. https://developer.mozilla.org/fr/docs/Web/CSS/:empty
simply set width and height to input tag
input{
height: 39px;
width: 237px;
}
i got quite simple thing to do, but i can't find way out for that.
let's say i got form, i want to add inputs one below another, however next to one of them there will be label (only next to one of them).
I would like to make it, so all the classes are equal size (but to make it responsive). However, i would like to make that input with label next to it, to share the space with label, so it will be next to each other, not one under another if user would open that in little screen.
hope you guys got what i mean. :P
Thank you!
EDIT
<div class="mainbox-form">
<form>
<div class="mainbox-input">
<input type="text" name="store-name" placeholder="Name"><br>
</div>
<div class="mainbox-input">
<input type="text" name="store-subdomain" placeholder="Subdomain">
<label name="store-subdomain">.label.here</label><br>
</div>
<div class="mainbox-input">
<input type="email" name="store-email" placeholder="Email"><br>
</div>
<div class="mainbox-input">
<input type="password" name="store-password" placeholder="Password"><br>
</div>
</form>
</div>
.mainbox-form
{
text-align: center;
max-width: 50%;
min-width: 350px;
margin: 0 auto 0 auto;
}
.mainbox-input label
{
font-weight: bold;
color: #606060;
}
.mainbox-input
{
max-height: 57px;
}
.mainbox-input input
{
background: #f3f3f3;
width: 80%;
border: none;
color: #606060;
margin: 3px auto 3px auto;
padding: 15px 40px;
font-size: 18px;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 59%;
}
.mainbox-input input:focus
{
outline: none;
}
.mainbox-input input:active
{
outline: none;
}
http://jsfiddle.net/twjw113w/
Here's the code I've got as for now. The problem I have with it is that, the labeled input is not sticked to the left, and is behaving differently. i bet you can see it yourself better there, than I would explain it.
You need to add display: inline-block and width to the label and input element that you want on the same line.
.mainbox-input label
{
font-weight: bold;
color: #606060;
display:inline-block;
width:35%;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 40%;
display:inline-block;
}
Is this how you wanted it?
jsfiddle
Please remove the css property below:
.mainbox-input{
max-height: 57px;
}
Modify the css below:
.mainbox-input input[name=store-subdomain]{
max-width:100%;
}
.mainbox-input input{
width:auto;
display:table
}
.mainbox-input label{
display: table;
padding: 0px 40px;
}
Visit this url:
http://jsfiddle.net/sarowerj/e41653o4/
Well, I’m currently working on a coming soon site. So far everything has been great, but I seem to be running into one issue. For the life of me, I can't seem to get all the content vertically centered - I’ve read many pages on the Internet, but I can’t get any working.
The HTML:
<h1>Protean</h1>
<p>Your status bar, your way.</p>
<hr>
<a class="Button" href="#">
<i class="fa fa-spin fa-refresh"></i> Coming Soon</a>
<hr style="height:8pt; visibility:hidden;" />
The CSS:
h1 {
color: #ffffff !important;
font-size: 350%;
}
p {
color: #ffffff !important;
font-size: 19px;
}
body {
background:#4fb088 !important;
text-align:center !important;
}
.Button {
background-color:#5fc79c;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:HelveticaNeue-Medium;
font-size:16.5px;
padding:15px 35px;
text-decoration:none;
}
.Button:hover {
background-color:#6cd2a8;
}
.Button:active {
position:relative;
top:1px;
}
a:hover {
text-decoration:none;
color:white;
}
brbutton {
display: block;
margin: 10px 0;
}
hr {
height:1px;
visibility:hidden;
margin-bottom:-1px;
}
I dumped the files into a fiddle, here.
If you are willing to help, that’d be appreciated.
Edit: Felipe M has helped me resolve my issue.
<div class="container">
<div class="cent"></div>
</div>
html,body
{
height: 100%;
}
body
{
display: table;
margin: 0 auto;
}
.container
{
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent
{
height: 50px;
width: 50px;
background-color: black;
}
You could try this: http://jsfiddle.net/danield770/tVuS6/14/
From here: Center a div horizontally and vertically and keep centered when resizing the parent
Change about your needs.
By the way, there isn't a way to make content centered without using some divs elements.
If you want to learn more about that, I would like to recommend you some tips:
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
http://css-tricks.com/centering-in-the-unknown/
Good luck!
Hey all I posted a question earlier here : Why am I getting white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking.
you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}
I have a text box and a button, which is described with the HTML/CSS below.
Currently these two elements are appearing with the button slightly lower than the text box. Can somebody please suggest how I can get these two aligned so their middles are on the same horizontal axis? Thanks
update: apparently the outside world can't see this site. I'll post some HTML describing the controls shortly
update 2: This is the code:
<div id="SearchForm">
<form method="get" action="/search/Tabs">
<div class="search-box ActionControl">
<input type="text" value="" name="Search" id="Search">
Search
</div>
<div id="ContentArea"></div>
</form>
</div>
#SearchForm .search-box
{
padding: 25px;
height: 25px;
background-color: #F6E9D8;
border: 1px solid #E7DFD0;
}
#SearchForm .search-box input
{
width: 425px;
}
#SearchForm .search-box a
{
background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:White;
cursor:pointer;
font-size:8pt;
padding-left: 22px;
padding-right:22px;
padding-top: 3px;
padding-bottom: 3px;
}
This is a quick fix... it was only a pixel out to my eyes...
#SearchForm .search-box a
{
... (Your existing styles)
position: relative;
top: -0.1em;
}
Using vertical-align doesn't work for me, so this just shims it.
#search, .search-box a { vertical-align: middle; display: inline-block; }