P Tags Appearing Lower in Firefox Than in Internet Explorer, Using CSS

P tags appearing lower in firefox than in internet explorer, using CSS

Each browser has its own CSS applied by default. To counter this, it is good practice to use some sort of CSS normalization (as pointed out by @You) before applying custom CSS. CSS normalization is recommended over an outright reset because it

• Preserves useful defaults, unlike many CSS resets.
• Normalizes styles for a wide range of elements.
• Corrects bugs and common browser inconsistencies.

Source: Normalize.css

Also, do check out Initializr. It offers that plus a lot more, including IE6+ compatibility/fallbacks etc.

If not that, you could use a basic CSS reset,

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, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 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;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Source: http://meyerweb.com/eric/tools/css/reset/

Nested div tags in IE and Firefox

Add to the style of the second div display:inline-block.

<div style="width:1200; ">
      <p align = "center"><b><font size="4">Joke  Of The Day</font></b><p>
    <div style="width: 80px; float:left; margin:4; "><img src="FredFlipoff.jpg" width="80px" height="80px"></div>
    <div style="display: inline-block; width: 280px;>
        <p align="justify"><font size=2">To smooth over her recent negative comments about his  presidency, Hillary Clinton said she and Barack Obama will "Hug-it-Out" next time they meet. Hearing  this, Bill Clinton said he also will  "Hug-it-Out" with political rivals Megan Fox, Angelina Jolie,  Sophia Vergara, Scarlett Johanson, and that Hot waitress who works at The Olive Garden.
        </font><br><hr id='hrdotted' /></div>
</div>

See here:
http://jsfiddle.net/cmp3vkwu/

CSS formatting showing in IE but not Chrome or Firefox

Presentation (css) can appear different in different web browsers because each web browser has their own default and user configurable settings. You will always see differences between browsers because of differences in the default settings. eg. In the screen shot below using your sample code you can see that on my computer IE and other browsers display the page 'more or less' the same.

To make browsers display the same web pages 'more or less the same' you need to configure each of them with the same default settings for presentation (fonts, font sizes, color, background colors etc)

To debug rendering differences between browsers you need to use the DOM Explorer tab of the Dev tool in each browser(screen shot above) and compare the applied rules.

To help you further we would really need a screen shot from your computer, showing the browsers side by side. As you can see by the screen shot on my computer different browsers display the page 'more or less the same'. That's because I have configure all of my test browsers with the same user settings for presentation/accessibility (text size, zoom, color, background-color, font family, link and hover color etc).

The best way to test between browsers is to use https://www.browserstack.com/ because you are using virtual instances of vendors' browsers that have the 'factory' default settings. Comparing browsers on your own computer you should expect that the best result is that they will display the same web page "more or less the same", but not exactly the same.

To debug presentation, you need to use the DOM Explorer tab of your browsers dev tool.

<!DOCTYPE html>
<html>
<head>
    <title>Sprout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        h1 {
            font-family: Palatino, 'Palatino Linotype', serif;
            color: blue;
            font-size: 90px;
}

h2 {
    font-size: 32px;
}
    </style>
</head>
<body>
    <h1>Mysample</h1>
    <div class="hero">
        <h2>Sprout.</h2>
        <p>A book by J. Daniel Bedford</p>
        <a href="#">Read now.</a>
    </div>
    <p>© Mystwood Publishers Limited</p>
</body>
</html>

css issue: circle appears in a different position in Firefox than in IE

From my testing, it seems if you remove these rules for your .circle css,

.circle {
    position: absolute;
    top:239px;
    left: 340px;
    }

and replace them with

.circle {
    position: relative;
    margin: 239px 0px 0px 340px;
    }

, you get the desired results. Tested and compared in Internet Explorer (9&10), Google Chrome & FF.

I'm not sure as to what is the exact cause for this, but the browser-specific body & html padding/ margin does play a small part.

Why does Firefox CSS Debugger not display P element default margin?

Web browsers set their own default values for rendering HTML elements. This includes margins, paddings, font sizes etc. When you create a HTML document with no CSS you can see lists, paragraphs and headings are formatted in a default way.

Debuggers tend to show the values that you have applied to the document in your CSS.

To get around these sorts of inconsistencies (browsers use different defaults) some people use a 'reset' CSS file that removes this behaviour by setting as much as possible to 0.

Take a look at http://meyerweb.com/eric/tools/css/reset/

HTML - compatibility with Internet Explorer and Firefox for Button

So I finally found a solution to my problem !

First I would like to quote @Silverman42 who also had the same idea than me when I was trying to find an answer in the mean time: using <a> tag is the first key to solve the compatibility problem. It works for all web browsers cited in my question.

The other key was to replace the CSS style options width: 100%; , margin-left: auto; and margin-right: auto; by display: block; to create a block for the element and then just text-align: center to center back the text of the link on the button.
See below complete solution that worked for me:

<!DOCTYPE html>
<head>
   <style type="text/css">
      .bluebutton {
      display: block;
      text-align: center;
      padding: 10px;
      font-size: 200%;
      background-color: #337ab7;
      border-radius: 7px;
      box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2), 0 3px 20px 0 rgba(0,0,0,0.05);
      }  
      .bluebutton:hover {background-color: #3e8e41}
      .bluebutton:active {
      background-color: #3e8e41;
      transform: translateY(5px);
      }
      .bluebutton span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
      }
      .bluebutton span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      }
      .bluebutton:hover span {
      padding-right: 25px;
      }
      .bluebutton:hover span:after {
      opacity: 1;
      right: 0;
      } 
   </style>
</head>
<body>
   <a href="https://www.youtube.com" class="bluebutton" style="color: white">
   <span>Access Website</span>
   </a>
</body>
</html>

Image scaling causes poor quality in firefox/internet explorer but not chrome

It seems that you are right. No option scales the image better:

http://www.maxrev.de/html/image-scaling.html

I've tested FF14, IE9, OP12 and GC21. Only GC has a better scaling that can be deactivated through image-rendering: -webkit-optimize-contrast. All other browsers have no/poor scaling.

Screenshot of the different output: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Update 2017

Meanwhile some more browsers support smooth scaling:

• ME38 (Microsoft Edge) has good scaling. It can't be disabled and it works for JPEG and PNG, but not for GIF.

• FF51 (Regarding @karthik 's comment since FF21) has good scaling that can be disabled through the following settings:

  image-rendering: optimizeQuality
  image-rendering: optimizeSpeed
  image-rendering: -moz-crisp-edges
  

  Note: Regarding MDN the optimizeQuality setting is a synonym for auto (but auto does not disable smooth scaling):

  The values optimizeQuality and optimizeSpeed present in early draft
  (and coming from its SVG counterpart) are defined as synonyms for the
  auto value.

• OP43 behaves like GC (not suprising as it is based on Chromium since 2013) and its still this option that disables smooth scaling:

  image-rendering: -webkit-optimize-contrast
  

No support in IE9-IE11. The -ms-interpolation-mode setting worked only in IE6-IE8, but was removed in IE9.

P.S. Smooth scaling is done by default. This means no image-rendering option is needed!

---

Related Topics