I have a paragraph that displays differently in chrome and firefox. In chrome I see that styles are applied by the user agent.
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
I tried to override these styles, but still no effect on the rendering. Is there a way the difference can be negated. So that they render the same way in both the browsers.
http://jsfiddle.net/hozefa/hM4Rx/
Computed markp in chrome
color: rgb(102, 102, 102);
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 95px;
line-height: 19px;
margin-bottom: 13px;
margin-left: 0px;
margin-right: 0px;
margin-top: 3px;
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
width: 526px
Computed markup in FF
font-family Arial,Helvetica,sans-serif
font-size 14px
color #666666
line-height 19px
margin-top 3px
margin-right 0px
margin-bottom 13px
margin-left 0px
text-shadow #FFFFFF 0px 1px 0px
Use css reset to override the browsers default styles.
Example using Eric Meyer’s reset
Or you can try using !important.
Or even modifying those styles:
p{
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
Every user agent (browser) has its own built in styles. What you see are Chrome's but Firefox has theirs, too, which, in this case, are the same as Chrome's and you can view it in their developer tools.
The way you override them is to just set them to what you want and both browsers will obey.
p { margin:1em }
If that's not working for you, something else is affecting this but, unless you show the complete markup, anything we say is just a wild guess.
Related
I've been racking my brains out to fix this but I am not an HTML/CSS expert so I'm out of my wits.
The placeholder text is shown too high from the center of the input box element.
See the following image:
How can I fix this? You can see them live at http://siliconalley.com. When you type inside the input, it actually looks alright. It's just the placeholder that is looking weird.
Your current line-height is 1, change it so it is equal to the height of your element and it becomes centered.
line-height: 30px;
Your line-height:1; declaration is causing the problem. Remove this for .navbar-search .search-query and it should be fine.
You can force the line-height style the value of auto, with that u will fix the problem in Chrome and won't mess up in IE. I've tested on FF, Chrome and IE
.search-query {
line-height: auto !important;
}
your CSS is looking Like this
Actually it is line-height problem
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Change to Like this
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 21px; /**change the Line-height to like this**/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
As you can see in the above screenshot, Safari Version 6.0.2 (8536.26.17) on a Macbook Air displays the border-radius on the right side with a straight line. The "button" is a link tag with a class applied to it. This same button displays properly in Chrome but not Safari. It's driving me crazy as to why this is happening.
JSFiddle link: http://jsfiddle.net/unnmv/
Here's the CSS I'm using:
background: $color;
border: 1px solid darken($color, 15%);
color: $text-color;
cursor: pointer;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
outline: none;
padding: 0.5em 2em;
text-align: center;
text-decoration: none;
width: auto;
height: auto;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Here is what worked for me: Add the following to your css:
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
I noticed it is mentioned for spacing consistency issues between browser, so I tried it out with this issue since i was having the same. It worked for me.
Good luck!
Hello everyone my menu bar can't fit into my <div> area at different browser. I have checked with Opera and Chrome it looks fine but with Explorer and Firefox my menu can't fit.
And my menu is in this <div> tag:
.page {
width: 964px;
margin-left: auto;
margin-right: auto;
background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
background-repeat:repeat-y;
}
Here is my menu:
ul#menu {
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: center;
}
ul#menu li {
display: inline;
list-style: none;
font-family: 'Museo300Regular';
font-size:17px;
font-style:normal;
}
ul#menu li a
{
background-image:url(../../images2/images/menu_bg_normal.jpg);
background-repeat: repeat;
padding: 5px 19px 5px;
font-weight: normal;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #FEFEFF;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
cursor:pointer;
}
So what is the problem why it can't fit into with Explorer and Firefox?
I attach an image you can understand what I mean
Here is the Chrome and Opera it can fit
Text will always take up different space in different browsers (and even in the same browser on different computers).
So, if you want your menu to fit exactly, you can't base the width of the buttons directly on the text in them. Either make all buttons the same width, or specify an exact width for each button.
Alternatively, resort to using a table, which can divide the space between the cells based on their content.
You can achieve it by resetting your CSS code. Then use ul li to style your list items.
If needed, you can use conditional comments to load your stylesheet for IE with some sort of bug fixes.
But normally i can achieve 100% exact result in all browsers on li element, so it's proved.
.search .search_place li.search_button a {
background: #017aa7;
padding: 10px;
color: #fff;
text-decoration: none;
font: normal normal bold 12px/1.5 "Arial", Helvetica, sans;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
behavior: url(ie-css3.htc);
z-index: 100;
position: relative;
}
.search .search_place li.search_button a:hover {
background: #ffa63c;
}
i am using this IE7 hack for rounded corners: http://code.google.com/p/box-shadow/downloads/detail?name=ie-css3.htc&can=2&q=
but when i am using this htc file hover stop working. Anyone have similar problems that :hover stop working?
Try switching to CSS3 PIE.
It's an actively maintained project that, amongst other things, provides border-radius for older versions of IE.
In my experience it supports :hover properly.
My CSS for the website all looks fine in Firefox but in both Chrome and Safari, my fonts are coming out looking black color instead of the grey color as is in Firefox.
Why might the fonts/color be different in Safari and Chrome - it looks like bold black.
Header style I am using within my content div, i.e.:
#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #990;
border-bottom-color: #990;
border-left-color: #990;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF;
width: 973px;
text-align: left;
display: block;
background-image: url(images/bgcontent.jpg);
background-repeat: repeat;
}
h1 {
font-family: "Lucida Grande";
background-color: transparent;
height: 20px;
width: 650px;
color: #FF9904;
font-size: 36px;
text-align: left;
float: none;
vertical-align: top;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
letter-spacing: normal;
margin: 0;
padding: 0.5em 0;
}
I also found this link relating to Google Chrome, i.e about using:
#charset "xxx"
http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs
I just checked my computer, and there appears to be no difference in color between Firefox and Chrome. I am running Windows (for both of those), and it should be noted that there will always be a difference in color between Macs and PCs as they are calibrated with different gamma values. Read more about gamma stuff here, though note that you can't do much about it from a CSS perspective.
Another possible problem is that it could be just your computer... have you tried this issue on multiple computers? You can always try using a tool such as Browsershots or Browserlab.
Finally, it's possible that there is some relevant code that is triggering some cross browser differences.... is this all of your code or is there more CSS somewhere? Can you provide a live link to the page you're having problems with?
Does it also happen if you make them a color, for example red? If it's not, then it's just the anti aliasing of webkit which is more agressive.
But if it still happens, you can check with the chrome inspector and firebug if the way safari/chrome and firefox interpret the CSS is different. Which color selector they choose
The sample css you posted is ok. Try adding !important to color attribute.
color: #FF9904 !important;
At the time of writing (June 2015) there is a bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours or untagged images. Safari (since OS X 10.9) applies colour correction to both CSS colours and images.