logo
down
shadow

FireFox & Chrome CSS Differs


FireFox & Chrome CSS Differs

By : user2956374
Date : November 22 2020, 10:54 AM
around this issue According to me, It is font rendering issue. The width of font is differant in Chrome & Firefox. Thus pixel required for same word are differant in Firefox & Chrome.
Along with that the technique you are using is fully wrong. Use are specifying width for each li by adjusting padding. Instead give then equal width for each row. Thus there will be spare space to accomodate change in with of letters.
code :
/** General List Styles **/
ul{
    display: block;
    margin:0; padding:0;
    list-style:none;
}

li{
    float:left;
    display:block;
    width:16.66%;
    position:relative;
}

li a{
    display: block;
    font-size: 14px;
}

/** Middle Row Cell (Using 'middle' class on them) **/
li.middle{
    width:20%;
}

/** No Sep Cell (Using 'nosep:after' class on them) **/
li.nosep:after{
    display:none;
}


Share : facebook icon twitter icon
Calculating height using jQuery differs in Firefox and Chrome

Calculating height using jQuery differs in Firefox and Chrome


By : Redouane Usma
Date : March 29 2020, 07:55 AM
will be helpful for those in need In Chrome, the height of the div does not include the height of your 300-pixel tall image "sheli.jpg" because it isn't specified anywhere in the html or css. If you specify the height="300" in your tag or height: 300px; as part its style, it will work.
div positions differs in chrome and firefox

div positions differs in chrome and firefox


By : Kyhant
Date : March 29 2020, 07:55 AM
it fixes the issue In must cases different positioning in different browsers are caused by the fact that each browser has some default CSS styles for elements. e.g margin for body. the best practice is to reset your CSS using one of the CSS Reset code template available (Google for it).
here is an example by Eric:
code :
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
.copyright {
    position: absolute;
    right: 0;
    bottom: 20px;
}
DIV alignment differs on Chrome and Firefox

DIV alignment differs on Chrome and Firefox


By : Madhu
Date : March 29 2020, 07:55 AM
like below fixes the issue Why the difference? How do I fix it? I'm using html5boilerplate and it include a CSS reset, so shouldn't it be renderet similarly on both browsers? What is the cause for the difference? , Try
code :
#linkbarinternal, #linkbar > a {
    vertical-align: middle
}
#linkbarinternal, #linkbar > a {
    vertical-align: middle
    display: inline-block;
}
CSS - Position absolute differs from Chrome/Opera to Firefox/IE

CSS - Position absolute differs from Chrome/Opera to Firefox/IE


By : overheadguy
Date : March 29 2020, 07:55 AM
I wish this helpful for you Try searching "moz" for mozilla and "webkit" for Chrome...
Maybe you can make some screenshots?
:after span positioning differs between Chrome and Firefox

:after span positioning differs between Chrome and Firefox


By : Saul Leal
Date : March 29 2020, 07:55 AM
wish of those help That's because of the element spacing of putting an input inside a span. You can fix this by commenting out the white space between the end of the input element and the closing span tag:
code :
.inputlabel label{ display: block}
.inputlabel input{ line-height:50px;}

.inputlabel-span {
  position: relative;
}
.inputlabel-span input {
  padding:0;
  width:200px; 
  border: none;
}
.inputlabel-span::after {
  position: absolute;
  top:0;
  content: "€";
  right: 0px;
}
<div class="inputlabel">
  <label>
    Some Label
  </label>
  <span class="inputlabel-span input-symbol-euro">
    <input type="text"/><!--
--></span>
</div>

<p></p>
<div style="width:200px;background-color:red;">
This div has 200px
</div>
Related Posts Related Posts :
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org