I am having a very confusing problem. On this site, I have the header text lined up properly for all browsers except IE, where the text is raised up to the point where it leaves the header box. Even IE10 has this problem. Here is the code for my header:
header {
margin-bottom: 30px;
background: #272727;
border-radius: 5px;
padding-bottom: 3px; }
header .center {
width: 94%;
margin-left: 5.5%; }
header h1 {
font-family: "Bebas", "Verdana", sans-serif;
font-size: 1320%;
float: left;
width: 21%;
margin-top: -18px;
line-height: 102%;
letter-spacing: -15px;
color: #e85d00; }
header .motto {
font: 400% "Bebas", "Verdana", sans-serif;
float: left;
width: 78%;
line-height: 102%;
color: white; }
As far as I know, there's nothing in here that should give IE trouble, especially not IE10, which is supposed to be comparable to other modern browsers. Is there something I'm missing? Also, I have a font-face declaration for Bebas that works just fine, so that shouldn't be an issue.
I tested in IE8, IE9 and the text showed just fine. Why do you have header .center set to display:none in ie.css ? Is this what you mean it "leaves the header" ?
Have you tried using a CSS Reset sheet prior to referencing your bespoke CSS sheet? I tend to find that the IE browser defaults vary from version to version so by using a CSS Reset, it allows your CSS to work from the same foundations across all browsers.
http://meyerweb.com/eric/tools/css/reset/
Related
I'm working on this static webpage. It's built with VueJS/NuxtJS, with Buefy as the as the UI library and I'm completely new to these technologies.
My problem is whenever I open chrome dev tools, the certain elements of a page changes its style on their own. I'm thinking of media query has something to do with this, but I cannot find the culprit media query though. This is happening in several parts of my webpage, but for simplicity I'll take this one example.
So this section is color red
And here is the CSS for that:
.mar-awesome {
padding-top: 80px;
padding-bottom: 80px;
height: auto;
width: 100%;
text-align: center;
font-size: 1rem;
color: red;
}
Then if I inspect element or open chrome dev tools, on the smallest possible window, after a few seconds it turns to black color like this:
And I'm guessing it's now referring to this CSS code(root.scss), on the body part:
$primary-font-family: 'Open Sans', sans-serif;
$primary-font-color: #333 !default;
html {
line-height: 1.15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
scroll-behavior: smooth;
scroll-padding-top: 95px;
#media (max-width: 1024px) {
height: unset;
}
body {
font-family: $primary-font-family !important;
color: $primary-font-color;
padding-right: 0 !important;
height: 100%;
#media (max-width: 1024px) {
overflow-x: hidden;
}
main.page-content {
padding: 1.5rem 1rem 1.5rem 1rem;
}
#__nuxt,
#__layout,
.client-view {
height: 100%;
}
}
}
By the way here is the vue file:
<template lang="pug">
.mar-awesome
.content-width.content-height-padding
| Mar is awesome. He’s so amazing we wish we had a dozen of him.
br
| The problem is we don’t, and Mar will only work 90 hours a week.
</template>
Can anyone please give me an idea why is this happening?
I found the culprit. It has nothing to do with my CSS, it's a bug in chrome developer tools. I need to reset the devtool then it worked fine now.
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.
if Chrome is look like this:
.text-center {
text-align: -webkit-center;
}
and firefox:
.text-center {
text-align: -moz-center;
}
how about in opera?
.text-center {
text-align: -o-center;
}
is not working.
UPDATE:
HTML:
.container
.text-center.label-margin
%h3
.bubble LEADERSHIP
CSS of my bubble class.
.bubble {
position: relative;
width: 170px;
height: 45px;
padding: 11px 0 0 0 !important;
background-color: #333333 !important;
font-style: normal !important;
font-family: 'Fira Sans', sans-serif;
font-size: 25px;
font-weight: 600;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
}
it looks like in OPera
You do not need to prefix the text-align property. You can simply use:
text-align:center;
instead (which should work on all browsers).
Further Reading:
W3.org documentation on the text-align property.
Here's quite a nice CSS-Tricks article that you might find useful.
If we're talking about any property, caniuse... is one of the 'best' browser compatibility websites out there, with info on nearly all css properties.
Please also note: Border-radius does not require prefixing (and hasn't done for quite some time now), whilst using !important is considered bad practise, so I would personally advise to get out of the habit of using it.
Try like this: Demo
.center{
text-align-center;
}
No need to use specifically for all the browsers,as its almost accepted by all browser
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
there is a difference in how firefox and chrome render the padding in css.
what appears correct in chrome is extra padded in firefox. is there a way to solve?
.button {
font-family: helvetica, arial;
font-size: 64px;
width: 70px;
height: 45px;
font-weight: bold;
padding: 0px;
padding-top: 25px;
background-color: #000;
color: #fff;
text-align: center;
float: right;
margin: 7px 10px 0 0;
}
If your .button is a button this might be a mozilla inner focus thing... try this?
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
Firefox and Chrome render padding exactly the same way. Your problem is elsewhere.
Are you using a reset CSS? If not, the default line-height declaration might be interfering with the rendering of your button.
For one, your height is way smaller than your font-size. Since you don't have overflow specified, your height will always be extended to at least font-size (or whatever your line-height specifies).
If your .button class is actually a <button> element, also apply superUntitled fix.
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.
See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/
The solution is to use padding instead of line-height.
u can set a different padding for firefox
.button {
padding:0;
}
#-moz-document url-prefix() {
.button {
padding:10px;
}
}
The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.
.footertext6{
float: left;
padding-top:10px;
width: 160px;
height:102px; */setting height here*/
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
border-top-right-radius: 50px;
}