homepage Welcome to WebmasterWorld Guest from 50.17.107.233
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Absolute Div positioning slightly different in IE vs FireFox
Browser compatibility issues with IE
myk3




msg:4100926
 10:39 am on Mar 19, 2010 (gmt 0)

Hi there,

I have created a new website for our business in DW. For SEO reasons I have reconfigured the DIV order so that my main content is at the top (in the HTML) rather than the top NAV as this is the main content i want the spiders to crawl first and i can easily manipulate the first URL which the spider will index which is usually has the most weight.

I have used CSS to give the bottom of the mainpic div some margin, then used absolute positioning for the body to move it down in to this area so it look correct and as it should.

I have positioned it in DW so it looks correct in IE. but when i open it in FF, Chrome etc there is around a 5pix gap between the bottom of the mainpic DIV and the Body DIV.

Below is the link to a test page i have created where you can see the problem. Open the page in both IE and FF and you will see my problem.

http ://www(dot)sphereitconsulting(dot)co(dot)uk/divtest/thank_you.html

I would be so grateful if anyone can help a newb to point out where in the CSS is causing this incompatibility?

Best,

Mike

 

myk3




msg:4100942
 11:50 am on Mar 19, 2010 (gmt 0)

i have been hacking around with parts of the CSS and found that if i make the following changes it works fine:

body {
background-image: url(images/img01.gif);
background-repeat: repeat-x;
padding-top: 30px;
margin: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

I have uploaded the changes and you can test this live now.

can anyone advise if this is an accepted method to tackle this? i dont want to use CSS that is not needed.

best,

michael.

drhowarddrfine




msg:4100977
 1:53 pm on Mar 19, 2010 (gmt 0)

I have positioned it in DW so it looks correct in IE. but when i open it in FF, Chrome etc

You did it backwards. Never, ever use IE as a reference for how things should work. Always, always use a modern browser to check your markup first. THEN look to see if/when IE screws things up. As evidence of this, notice how you saw the modern browsers performed the same as each other.

Never, ever trust IE to do anything right.

More in a bit (though I'm deathly ill today).

EDIT: Haven't checked to see if it affects this but you have two HTML errors and 5 CSS errors.

drhowarddrfine




msg:4100982
 2:02 pm on Mar 19, 2010 (gmt 0)

You have a serious case of divitis (the need to wrap everything in a div) while I have a serious case of the flu. I have to go back to bed.

myk3




msg:4101040
 4:01 pm on Mar 19, 2010 (gmt 0)

lol yes i know MS always have to be different. and i agree my site needs cleaning up with DIV etc but im very new to CSS and taught myself from research on the web.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved