Jump to content



Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  yordan : (14 April 2014 - 05:28 PM) By The Way, This Could Be An Interesting Subject For A Topic, What About Posting This Question? Let's See If Other People Have The Same Feeling Concerning Bootlists!
@  yordan : (13 April 2014 - 09:36 AM) Boot Order : Cd, [Usb,] Hard Drive :D
@  yordan : (11 April 2014 - 07:23 PM) I Simply Let The Bios Do That
@  Ritesh : (11 April 2014 - 10:23 AM) Is It Possible To Launch Fedora Live Cd Or Installation Disk From Hard Drive On Windows Platform Using Grub Mbr File.
@  Ritesh : (11 April 2014 - 10:21 AM) No U Are Not.. Btw.. I Have Question For You.
@  yordan : (10 April 2014 - 08:02 AM) You Are Partially Right.
I Was Not.
Nevertheless, I Am Again :)
@  Ritesh : (09 April 2014 - 07:33 PM) :P
@  Ritesh : (09 April 2014 - 07:33 PM) I Think U R Not..
@  yordan : (09 April 2014 - 09:28 AM) I'm The Master Of The Shoutbox!
@  yordan : (05 April 2014 - 10:32 PM) He-He
@  Ritesh : (04 April 2014 - 06:59 PM) Ha Ha Ha ....
@  yordan : (04 April 2014 - 11:15 AM) Welcome Back, Starscream!
@  yordan : (03 April 2014 - 02:31 PM) And I Hope That He Will Come Back Soon :)
@  yordan : (01 April 2014 - 02:53 PM) Nice, Ritesh Came, I'm Not Home Alone Today.
@  Ritesh : (01 April 2014 - 08:51 AM) Oh!!! Poor Dear Yordan..
@  yordan : (31 March 2014 - 10:02 AM) I'm A Poor Lonesome Cow-Boy
@  yordan : (27 March 2014 - 02:22 PM) He Is Unpatient Due To His Patients!
@  Ritesh : (27 March 2014 - 10:46 AM) :(
@  Ritesh : (27 March 2014 - 10:46 AM) He Is Busy With His Patients.
@  yordan : (26 March 2014 - 08:12 PM) Ahsani, Where Are You?

Replying to Different Display In Firefox And Internet Explorer


Post Options

    • Can't make it out? Click here to generate a new image

  or Cancel


Topic Summary

Ahsaniqbal111

Posted 28 November 2010 - 09:43 AM

I usually do not use the position/left/right/top/bottom elements of css, instead I fool around with margins and paddings :P .

Now, I did notice one thing which might cause the problem: "auto". As already said, IE and FF (and other browsers) use different rendering engines, but also different default values and different algorithms for the value auto. You must understand that there are a lot of different properties which define the size of an object in html:

  • padding (space between the objects border and the objects inside)
  • defined dimensions (width/height)
  • border-size
  • margin (space around the object which is always empty and defines the actual size of the object)

So, my suggestion is to set the dimensions to a fixed value and the margin and the padding to 0px (only when dealing with visual elements (including the title of your website), if you're working with blocks of text (content of your site), it's advised to have a padding and/or margin set)

The problem is with the heading of the website. I changed the width and the height from auto to a fixed value but the problem could not be fixed. Then I saw a differences. When I used <h1> tag inside a div tag, Internet explorer did not add spaces above and below the h1 element (the space which is added above and below a block level element) while the firefor did add the space. Then I just added <p> </p> before the <h1> and the problem was corrected. For the empty paragraph firefox added nothing else but internet explorer added white space in the top and then in both browsers the position of my heading became the same.
Have you noticed such a problem before.
For information the firefox version on my pc is 3.1.6 and the internet explorer version is 8 beta.

wutske

Posted 28 November 2010 - 09:34 AM

I usually do not use the position/left/right/top/bottom elements of css, instead I fool around with margins and paddings :P .

Now, I did notice one thing which might cause the problem: "auto". As already said, IE and FF (and other browsers) use different rendering engines, but also different default values and different algorithms for the value auto. You must understand that there are a lot of different properties which define the size of an object in html:
  • padding (space between the objects border and the objects inside)
  • defined dimensions (width/height)
  • border-size
  • margin (space around the object which is always empty and defines the actual size of the object)

So, my suggestion is to set the dimensions to a fixed value and the margin and the padding to 0px (only when dealing with visual elements (including the title of your website), if you're working with blocks of text (content of your site), it's advised to have a padding and/or margin set)

Ahsaniqbal111

Posted 27 November 2010 - 04:50 PM

The issue with internet explorer and firefox is that they use different rendering engine. IE being the microsoft product is not associated with any open source or other popular kit, not evern webkit. So your site's display will look different to IE, Mozilla, safari and chrome. One thing you can do for now is to search for the IE specific div tags and modifications that will keep display consistent with both these browsers. But on serious note, stop worrying about internet explorer because more and more people are going to switch to chrome or firefox.

I have read somewhere that if you make certain declaration in the start of the HTML document, then the later versions of internet explorer will display the page properly. I was reading a book about learning HTML and CSS and as you said the book stated that different browsers have different methods of displaying the websites and the problem is especially visible when someone uses absolutely positioned div tags. The book said that different browsers handle pixels differently and that is why percentage based or "em" based calculations should be used.
I don't know whether the problem will persist with percent based calculations but what I know is that it is very easy to use pixels based calculations and for an amateur like me, percent based calculations are not easy.

starscream

Posted 27 November 2010 - 04:03 PM

The issue with internet explorer and firefox is that they use different rendering engine. IE being the microsoft product is not associated with any open source or other popular kit, not evern webkit. So your site's display will look different to IE, Mozilla, safari and chrome. One thing you can do for now is to search for the IE specific div tags and modifications that will keep display consistent with both these browsers. But on serious note, stop worrying about internet explorer because more and more people are going to switch to chrome or firefox.

Ahsaniqbal111

Posted 27 November 2010 - 01:24 PM

I am developing a website using html and css but I have a problem the way website is displayed in the different browsers.
I have a div (div class="top")for the top logo and name of the website etc. I have added a background to the div. I have made another div inside the top div. Both the top div and the logo div are absolutely positioned. I have set the float property for the logo div to be float:left;. I have added another div inside the top div for the headign h1 of the website. this div is also absolutely positioned and it has following properties
div.heading {
 position:absolute;
 width:auto;
 height:auto;
 top:35px
 left:220px
 }
now the problem is that in internet explorer the div is appearing to be about 30px above the position at which it is appearing in firefox.
what could be the problem.
Please reply

Review the complete topic (launches new window)