Jump to content

why they sit in different position from IE and Firefox browser


xbl1
 Share

Recommended Posts

Hi:I'd like to ask you why my image sit in different position from IE and Firefox browser.my code as following;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><style type="text/css">#image{position: absolute;right: 18px;top: -10px;padding:0;border: 2px dashed red;}#img1{position: relative;padding: 0;border: 2px dashed #32ed19;margin:auto;}</style></head><body><div id="image"><img id="img1" src="firstcar.JPG" alt="myfirstcar"></div></body></html>

Link to comment
Share on other sites

First: Internet Explorer and other browsers have a different default margin for the <html> and <body> elements. Add this CSS to your code:html,body { margin: 0; padding: 0; }Second: margin: auto; will cause elements to be centered in all browsers but Internet Explorer. There are two solutions:1. Align the image to the left in all browsers:remove the margin: auto line from the #img1 id2. Aling the image to the center in all browsers:Add text-align: center; to the #image class

Link to comment
Share on other sites

i added the following on, but it doesn't work.in fact, your idea is right, but i don't why?in IE the whole container of #image move to left.

html,body { margin: 0; padding: 0; }#img1{position: relative;padding: 0;border: 2px dashed #32ed19;margin-left: 10%;}
Link to comment
Share on other sites

Second: margin: auto; will cause elements to be centered in all browsers but Internet Explorer.
Ingolme, I'm sorry but this is incorrect.margin:auto; WILL center elements in IE6 and IE7. I've done this A TON of times.However xbl1, this doesn't mean that you will be centering EVERYTHING now with margin:auto;, use it mostly to center DIVs, but you can also use it to center images, tables, form fields, etc. If you're going to justify text to the center for example you'd use text-align:center; instead.Now, to center an image it's easier to just center the image, not the DIV it's contained in. Here's a simple HTML and CSS code (note that I removed the id="img1" from your HTML since it's not needed):
HTML:<div id="image"><img src="firstcar.JPG" alt="myfirstcar"></div>

CSS:#image img {	  margin:auto;}

And if you want to center the DIV #image, you need to give it a width and then center it too.Here's the CSS code, the HTML is the same:

#image {  width:200px; /*You can specify the width either in px or in %... even on em (which is the same as % functionality-wise)*/  margin:auto;}

Let us know how it goes.

Link to comment
Share on other sites

Ingolme, I'm sorry but this is incorrect.margin:auto; WILL center elements in IE6 and IE7. I've done this A TON of times.However xbl1, this doesn't mean that you will be centering EVERYTHING now with margin:auto;, use it mostly to center DIVs, but you can also use it to center images, tables, form fields, etc. If you're going to justify text to the center for example you'd use text-align:center; instead.Now, to center an image it's easier to just center the image, not the DIV it's contained in. Here's a simple HTML and CSS code (note that I removed the id="img1" from your HTML since it's not needed):
HTML:<div id="image"><img src="firstcar.JPG" alt="myfirstcar"></div>

CSS:#image img {	  margin:auto;}

And if you want to center the DIV #image, you need to give it a width and then center it too.Here's the CSS code, the HTML is the same:

#image {  width:200px; /*You can specify the width either in px or in %... even on em (which is the same as % functionality-wise)*/  margin:auto;}

Let us know how it goes.

they sit in same position now from IE and Firefox. at the movement, they sit in the left top of the corner, but i want it sit in right top of the corner, how to do it?
Link to comment
Share on other sites

Do you have a link so we can see the problem? Dang, is so hard without seeing. :) A solution would be to put your "firstcar.JPG" as a background image on the DIV #image.Here's a code for that:

#image{  background:url(firstcar.JPG) no-repeat top right;  width:800px; /*put the width of the container your #image is*/  height:250px; /* put the height of the image itself here*/}

With the above code you will be able to have a big area (the DIV #image) to position your "firstcar.JPG" image. As you can see on the background: property you can specify the value (where you want to position the background image to be) with 'words'. You can also use pixels or %.Hope this helps.

Link to comment
Share on other sites

In fact, you were right for the question i asked.But could you click the following link and see the code. note that you can see the picture in the IE but Firefox could not.click me, pleasei got some question as following;1) how i put the picture on the upper of the right corner of the navigate bar, and also let the navigate bar come down 30px, and also the position of the image is same from the IE and Firefox browser. Firefox is 2.0.0.14 2) i don't known why i could not see the picture in firefox, it was ok last night, but it can see in IE.

Link to comment
Share on other sites

Thanks for the link :) Actually I can see the image in Firefox 2.0.0.14 and in IE6 and IE7, so this answers your second question.Now:

1) how i put the picture on the upper of the right corner of the navigate bar,... and also the position of the image is same from the IE and Firefox browser.
It should work with the following code:
CSS:#image {  width:790px;  height:117px;  background:url(hotel.jpg) no-repeat top right;  z-index:10;}

With the above CSS you won't need to put the image in the HTML, this way you will have more control over the position of the image. The z-index:10; property is to have the image above everything else.

HTML:<div id="container">   <div id="image"></div>   <div id="logincontainer">...

Notice how I removed hotel.jpg file from the DIV #image in the HTML.This code is supported by FF 2.x and IE6/7.And:

...and also let the navigate bar come down 30px...
CSS:#navcontainer {  margin-top:30px;}

Hope this helps.Let us know how it goes.

Link to comment
Share on other sites

Thanks for the link :) Actually I can see the image in Firefox 2.0.0.14 and in IE6 and IE7, so this answers your second question.Now:It should work with the following code:
CSS:#image {  width:790px;  height:117px;  background:url(hotel.jpg) no-repeat top right;  z-index:10;}

With the above CSS you won't need to put the image in the HTML, this way you will have more control over the position of the image. The z-index:10; property is to have the image above everything else.

HTML:<div id="container">   <div id="image"></div>   <div id="logincontainer">...

Notice how I removed hotel.jpg file from the DIV #image in the HTML.This code is supported by FF 2.x and IE6/7.And:

CSS:#navcontainer {  margin-top:30px;}

Hope this helps.Let us know how it goes.

Thanks for your time, i have to find out why my Firefox browser could not display my image first, it can display in another machine from the Firefox browser, but i don't known why my one could not.i will come back after i solve the above problem.Thanks again
Link to comment
Share on other sites

thanks Ricardo Zea;sorry, i was spending some time to fix my Firefox browser as it just load the image first time but not after. Finally i find out the problem already.ok, come back to my main problem about trying to display the image on same position from Mozilla and IE browser.

#image {  width:790px;  height:117px;  background:url(hotel.jpg) no-repeat top right;  z-index:10;}

your solution works very well for me, and this is first time to see people write the code like that, thanks a lot.but i am trying to write the code adapt for more version, do you still have any more idea to help me to solve that ? thanksplease to click the link again, and i'd like the image sit like the Firefox does. but the image moves up from the IE browser, could you tell me how to fix it ?click me, please

Link to comment
Share on other sites

I don't really understand what you mean with "...i am trying to write the code adapt for more version...".What I can think of is browser versions...so...the code I'm giving you should work on any modern browser. If this is not what you are referring to, then you need to be more clear.Now, about the image position, I can't help you anymore if you are not using the code I gave you, I see that you're still using your own HTML and CSS which at some point they are generating the problem you have.Until you actually try the code I gave you, I will not be able to help you because instead of fixing the problem from the root we are just putting out fires and not solving anything properly.Let me know when you have used the HTML+CSS code I gave you :)

Link to comment
Share on other sites

This code is supported by FF 2.x and IE6/7.
because you said as above, than i worry the user use the firefox version is not FF2.x could not see the image.But anyway, thanks for you spending too much time to me, it was very helpful.
Link to comment
Share on other sites

I think the code will work for even Firebird (the browser that came before FF, not the DBMS) - its not that new.

Link to comment
Share on other sites

...than i worry the user use the firefox version is not FF2.x could not see the image.
For your information, almost whatever HTML+CSS code that works on IE6 will work on any browser :).Bytes,
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...