Home/ Questions/Q 8202239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T07:06:39+00:00

I made a website that looks perfect on Internet Explorer, but when it is

  • 0

I made a website that looks perfect on Internet Explorer, but when it is loaded with Firefox, certain elements are out of alignment.

For example, a p tag that would appear on the coordinates 20, 20, would appear in firefox on the coordinates 20, 40. For some reason, firefox changes the ‘top’ attribute of my p tags, such that they appear “lower” in firefox, than in ie. Please note that the ‘left’ attribute’ remains unhindered, but the value for the ‘top’ (or y coordinate) is increased by about 20 pixels, everytime!

I would like to know why my P tags appear in their proper locations in Internet Explorer, but are lower in firefox?

Below is the code I used for each p tag. If you were to use this same code in a web page, you would see clearly that the p tag appears lower in firefox, than in i.e. everytime.

p.myparagraph
{position: absolute;
 left:     20px;
 top:      170px;
 width: 20px;
 height: 19px;
 background-color:0033dd;
}

Why are my p tags appearing 30 pixels lower in firefox, than in Internet Explorer?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0