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;
}
Related
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.
Within ie8, the document is rendered as intended.
Within ie7, the document is not
(built on top of bootstrap with additional css)
markup:
.modal.fade.in#unsupported-browser-modal
.modal-dialog
.modal-content
.modal-text
.modal-header
%h3.modal-title YOUR BROWSER IS OUT OF DATE
.modal-body
This website requires a minimum of Internet Explorer version 9 or the latest version of other popular web browsers.
additional css:
#unsupported-browser-modal {
.modal-dialog, .modal-content {
height: 100%;
}
.modal-dialog {
width: 100%;
margin: 0;
max-width: none;
min-width: none;
}
.modal-content {
border-bottom: 0;
}
.modal-header {
border-bottom: 0;
padding: 15px;
min-height: 16.42857143px;
}
.modal-title {
font-family : $var;
text-align : center;
font-weight : bold;
letter-spacing : 2px;
margin-top: 50px;
}
.modal-body {
font-family: $var1;
font-size: 14px;
text-align: center;
padding: 2px 35px 80px;
color: #646464;
line-height: 20px;
}
}
#unsupported-browser-modal.modal {
display: block;
}
.modal-text {
top: 37%;
position: relative;
}
Also, document.compatMode seems to be set to the same value in both ie7 as well as i8, in case that may be of interest.
Thoughts as to what I may not be accounting for?
Not sure if it's what your looking for. It's also, a bit of an hack so I wouldn't suggest it unless no one suggests a solution/you don't find one. But try:
_margin-top: 100px; /* ie7 only */
Can read more about safe CSS hacks if your interested here:https://mathiasbynens.be/notes/safe-css-hacks#css-hacks
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.
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.
When viewing my site in IE, the site description looks as if the bottom of the letters are cut off. Of course, everything is fine and looks nice in Safari/Firefox/Chrome, but IE is killing me. It has been made on the WordPress Twenty Ten theme.
I adjusted the margins and padding with no luck. It seems that reducing the font size helps, but it can't be much smaller or it will be unreadable.
Any help would be much appreciated.
Thanks!
Alex
Here is the page rendered in Safari and IE side by side: http://screencast.com/t/b4YnDKANsg91
Here is the header code:
/* =Header
-------------------------------------------------------------- */
#header {
padding: 15px 0 0 0;
}
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 4px 0;
width: 300px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
color: #006400;
font-size: 23px;
font-style: regular;
margin: 45px 0 10px 0;
width: 610px;
}
/* This is the custom header image */
#branding img {
border:none;
clear: both;
display: block;
}
/* This is the search form in the header */
#searchform {
float: right;
margin-top: -30px;
z-index: 500;
}
I can't be certain without seeing the full CSS, but I suspect a overflow:visible would solve this. Another selector may be setting it to clipped or hidden... If that doesn't work, try setting the height to em units instead of pixels (2em, for example).