I've read about postion:absolute problems and tried almost every possible solution. Including positioning divs relatively, wrapping them in a relatively positioned parent etc etc, but it didn`t help.
I'm drawing a table and after that im putting divs in it in a specified place. Table (grid) prints fine but places where divs should be are printed in slightly different color and divs aren`t there. In chrome it prints ok. Has anyone managed to find a solution yet? Maybe I'm doing something else wrong?
My css:
body
{
margin: 0px;
padding: 0px;
font-family: Verdana;
-moz-user-select: none;
}
.grid
{
height: 100%;
border: 1px solid;
border-collapse: collapse;
}
.grid tr
{
text-align:center;
border-bottom: 1px dashed;
cursor: cursor;
}
.grid td.hourCell
{
width: 100px;
vertical-align:top;
font-size: 10px;
font-weight: 500;
height: 60px;
}
.grid th.hourCell
{
width: 100px;
}
.grid th
{
font-weight: bold;
height: 20px;
width: 200px;
font-size: 12px;
font-weight: 500;
font-family: Verdana;
border-right: 1px solid;
background-repeat: repeat;
cursor: cursor;
}
.grid td
{
height: 30px;
width: 200px;
vertical-align: top;
}
.div_which_doesnt_print
{
padding: 0px;
margin: 0px;
width: 200px;
font-size: 10px;
font-family: Verdana;
height: 0px;
position: absolute;
border-style: solid;
border-width: thin;
overflow: hidden;
opacity:0.7;
z-index: 3;
}
Every help would be greatly appreciated! Even reassuring me that solution is still unavaible.
EDIT: It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
If you are Inserting the Divisions Inside the Table Cells, then just give the Cell TD/TR position to relative and then give absolute positioning to the div inside it.
This was working fine for me in few projects.
I hope this helps.
Related
I have some social media links in the footer here that are styled to be in circles: https://milfordpa.us
Everything looks good on Chrome, but on Safari, the last one appears to get "cut off" and I can't seem to figure out why.
Here is my current SCSS:
.social-links {
display: block;
float: right!important;
a {
border-radius: 50%;
padding: 10px 11px;
font-size: 20px;
background: $color3;
color: $color2;
margin-left: 5px;
&:hover {
background: $color4;
color: $color2!important;
}
}
i {
width: 21px!important;
height: 20px!important;
text-align: center;
}
}
Thank you in advance for your help!
In one of your parent elements for .social-link you're changing the width to something that safari seems to struggle with.
A quick fix is to reapply the width on .social-link
.social-link {
text-align: right;
min-width: -webkit-fill-available;
}
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I've made two divs for navigation with given css:
for first button:
.OptionsButton .DropDownButtonOverlay
{
margin: 0px -95px 0px 0px;
width: 92px;
height: 38.5px;
float: right;
z-index: 2;
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
.optionsButton
{
border-radius: 3px;
-webkit-appearance: none;
}
and the second button is as this:
.defaultButton
{
font-family: 'Open Sans', Segoe UI, Verdana, Helvetica, Sans-Serif;
border-radius: 3px;
font-size: 14px;
color: #FFFFFF;
padding: 10px 15px;
-webkit-appearance: none;
margin: 0; /* fixes chrome bug */
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
the problem I am dealing with is they look fine on Chrome and IE (alligned nicely). However when I go to firefox they don't get alligned as well as intended (i am putting them in another div as a top menu thingy).
It seems like the font is influencing that. I've tried making font by percentage (100.01%), however it makes it look nice in firefox, but then ruins the view in IE and Chrome.
how could I fix this?
I found out that firefox tends to work differently on divs (I knew this before, but the solution was unclear), therefore I added Max-Height attribute on the button that expands due to text-size in it's body which fixed the problem.
This is what it looks like in chrome:
This is what it looks like in FF:
This is the css I have applied to this element:
.styled-select5 {
margin-left: 20px;
height: 12px;
border: 1px solid #cccccc;
overflow: hidden;
width: 104px;
z-index: 1;
background: url(/images/registration/triangle.png) no-repeat right white;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.styled-select5 select {
padding-right: 42px;
background: none repeat scroll 0 0 transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: .01px;
text-overflow: '';
border: none !important;
width: 110% !important;
overflow: hidden;
z-index: 5;
height: 14px;
display: block;
padding-left: 3px;}
.styled-select5 select::-ms-expand{
display: none;}
.styled-select5 select option {
height: 20px;
width: 400px; }
.styled-select5.hidden {
display: none; }
I have been trying to figure this out for a while. In order for them to look similar I have to change the padding in FF to get the text to show properly. I am not sure why this is happening. Is there some difference in the way chrome and FF do this?
Each browser (on every OS) displays the HTML elements differently. The amount of styling that can override the defaults is also decided by the browser.
You cannot edit beyond what's permitted. If you happen to use selects for Safari, it'll look far more different and you cannot customize much there as well.
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)