xbl1 Posted June 15, 2008 Share Posted June 15, 2008 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 More sharing options...
Ingolme Posted June 15, 2008 Share Posted June 15, 2008 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 More sharing options...
xbl1 Posted June 15, 2008 Author Share Posted June 15, 2008 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 More sharing options...
Ingolme Posted June 15, 2008 Share Posted June 15, 2008 Give your #image class a centered text align property: text-align: center Link to comment Share on other sites More sharing options...
rzea Posted June 15, 2008 Share Posted June 15, 2008 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 More sharing options...
xbl1 Posted June 15, 2008 Author Share Posted June 15, 2008 Give your #image class a centered text align property: text-align: center sorry, it still doesn't work in this way Link to comment Share on other sites More sharing options...
xbl1 Posted June 15, 2008 Author Share Posted June 15, 2008 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 More sharing options...
rzea Posted June 15, 2008 Share Posted June 15, 2008 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 More sharing options...
xbl1 Posted June 16, 2008 Author Share Posted June 16, 2008 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 More sharing options...
rzea Posted June 16, 2008 Share Posted June 16, 2008 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 More sharing options...
xbl1 Posted June 16, 2008 Author Share Posted June 16, 2008 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 More sharing options...
xbl1 Posted June 16, 2008 Author Share Posted June 16, 2008 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 More sharing options...
rzea Posted June 16, 2008 Share Posted June 16, 2008 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 More sharing options...
xbl1 Posted June 17, 2008 Author Share Posted June 17, 2008 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 More sharing options...
Synook Posted June 17, 2008 Share Posted June 17, 2008 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 More sharing options...
rzea Posted June 17, 2008 Share Posted June 17, 2008 ...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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.