I'm developing on firefox, and I just wanted to check the current state how it looks in Chrome. And I saw a little problem. After that I checked it on Edge and on IE as well and the problem is in all browsers except firefox.
To show my problem, here's an image:
As you can see there is no problem. A navigation bar positioned to the bottom of an image
But in the other browser's they are look like this:
You can see 2 or 3px difference. I don't know why. I'm using only two CSS file. The bootstrap-grid system and mine SCSS file.
I checked them out in Inspectors, FF says its height is 42px, while Chrome says 40.
SCSS:
nav{
top: 254px;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}
nav a{
text-decoration: none;
text-transform: uppercase;
font-family: $nav-font;
font-size: 25px;
color:#126ADE;
letter-spacing: 0.8px;
margin-left: 20px;
padding: 5px;
}
nav a:first-child{ margin-left: 0px;}
nav a:hover{ background: white;}
In such a scenario, I try to use separate CSS rules for Firefox and Chrome:
Rules common to both browsers:
nav {
position: absolute;
background: rgba(0,0,0,0.75);
display: flex;
flex-direction: row;
justify-content: center;
}
For Firefox alone:
#-moz-document url-prefix() {
nav{
top: 252px;/*making the height same as chrome*/
}
}
Only for Chrome:
#media and (-webkit-min-device-pixel-ratio:0) {
nav{
top: 254px;
}
}
Hope that 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;
}
I'm using the flex box technique to layout my webpage, but I have come across with some confusion about the syntax. What I'm confused about is do you have to use -webkit- anymore or has all browsers implemented HTML5 yet. I have been looking for answers on the various websites and one person says you need to use the -webkit- syntax and another person says you don't have to use it anymore. I understand what flex boxes do I'm just confused on whether you need to use -webkit- or not. If I don't can someone show me the correct syntax and if I do need to use the -webkit- syntax can someone show me how to implement my layout into Firefox, Opera, and IE. I know Chrome and Safari use the -webkit- syntax.
header, section, footer, article , aside, hgroup, nav {
display: block;
}
* {
margin: 0px;
padding: 0px;
}
body {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
h1 {
font: bold 20px tahoma;
}
h2 {
font: bold 14px tahoma;
}
#page_wrap {
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header {
background: red;
border: 4px solid black;
padding: 20px;
border-radius: 5px;
}
#top_menu {
border: 2px solid red;
background: black;
color: white;
padding: 10px;
}
#top_menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px tahoma;
}
#section {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#main_section {
border: 1px solid black;
-webkit-box-flex: 1;
margin: 20px;
padding: 20px;
}
#side_news {
border: 2px solid red;
margin: 20px 0px;
width: 220px;
padding: 30px;
background: #a4a4a4;
border-radius: 10px;
-webkit-box-shadow: rgb(110,110,110) 10px 10px 10px;
}
#the_footer {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
article {
background: black;
color: white;
border: 3px solid red;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
I have been developing a CSS framework, and fromt hat I learned: To make things work for real, you have to also type it all out. That means in short: You should use the -webkit- prefix, and the same settings without. Besides, there is also -o- (Opera), -moz- (Firefox), -ms- and sometimes -Ms (IE, and yes, case sensitive). Very rarely there might be also -khtml-...but the chance you run into that is equal to zero. I have not seen any modern browser that uses that one any longer.
It might be painful to duplicate your statements, but that is how you make your CSS cross-browser compatible. And that is why I started to use PHP to do it instead...
You can also look up the statements - i.e. box-pack - and see their browser compatibility and syntaxes.
For example: Google Chrome seems to preffer -webkit- over the "non-branded" (no -webkit-) version. Safari tends to ignore the branded version and uses the non-branded version.
You can't ever drop the -webkit prefix from display: -webkit-box, because the standardized version is not called box.
Instead, it's called display:flex. The associated flexbox properties (including -webkit-box-pack) all have different names in the "new" standardized flexbox model, too.
Having said that -- you should prefer the new display:flex model to the old -webkit-box/-moz-box model, because the new version has better interoperability and cross-browser support, because it's actually standardized.
The -webkit- prefix is needed for Safari and Chrome when using transitions, transforms, animation, gradients, calc, flexbox, and columns. For border-radius, box-shadow, border-image, and text-shadow it's not really necessary unless you want to cover older browsers like Safari 5.0.
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I have a web site (http://www.interactstaging.net/clients/tozzi/) with drop down menus which works perfectly under Firefox and Chrome but not IE10.
An example HTML code for menu part looks like:
<div class="navi"><em class="hover"></em><span>Home</span></div>
and CSS for that part:
.navi a span {
position: relative;
display: block;
padding: 0 7px;
line-height: 28px;
z-index: 100;
height: 45px; }
Any clue why that CSS is not working under IE10?
Thanks
Try this CSS rule:
.sf-menu li {
background-color: #fff;
}
This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:
But on Internet Explorer, it looks fine:
Here's my CSS:
div.hideSkiplink {
background-color: #000;
width: 100%;
display: block;
height: 42px;
font-size: large;
font-weight: bold;
background: transparent url('../images/redslate_background.gif') repeat-x left top;
font-family: 'Times New Roman' , Times, serif;
text-transform: uppercase;
color: #000000;
}
div.menu ul {
position: absolute;
margin: 0px;
padding: 0;
list-style-type: none;
width: auto;
}
div.menu ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
div.menu ul li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 14px 22px 0 22px;
height: 42px;
}
div.menu ul li a:hover, div.menu ul li a.current {
color: #fff;
background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}
Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?
Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues
There are hundreds of articles related to this topic so you should google things like
IE and CSS compatibility
IE and CSS issues
It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.
It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...