SteveFrost Posted October 28, 2009 Share Posted October 28, 2009 Hi,I have been working on a website but it is not displaying correctly in both Chrome and Safari. It's displaying fine in Firefox, IE and Opera though.Does anyone have any suggestions on how to center the main wrapper? I'm using javascript to allow the page to dynamically re-size with the browser window which seems to be forcing the page to the left hand side.http://problem.frostysoftware.com/Thanks in advance,Steve Link to comment Share on other sites More sharing options...
Ingolme Posted October 28, 2009 Share Posted October 28, 2009 First, remove all the Javascript, it interferes with the CSS and isn't necessary.All you have to do is assign a min-width and max-width to the main wrapper and give it margin: 0 auto.Do not give it any width declarations. A <div> without a width declaration automatically resizes itself with its container (the window in the case). Link to comment Share on other sites More sharing options...
SteveFrost Posted October 28, 2009 Author Share Posted October 28, 2009 First, remove all the Javascript, it interferes with the CSS and isn't necessary.All you have to do is assign a min-width and max-width to the main wrapper and give it margin: 0 auto.Do not give it any width declarations. A <div> without a width declaration automatically resizes itself with its container (the window in the case). Thanks for the reply but after removing the javascript and editing the CSS, I now have the entire bottom half of the website expanding as if I set the width to 100%. However, the navigation bar is perfectly normal.This, again, is only in Chrome and Safari. Every other browser is not affected by this. Link to comment Share on other sites More sharing options...
thescientist Posted October 28, 2009 Share Posted October 28, 2009 hm, unfortunately I don't have any of those browsers. You do have a <div> nested within an <a> tag down at the bottom (for Next >), which could be an issue. I think since a <div> is block level and anchor's are inline, it might be worth fixing. maybe a <span> would help in that case? Link to comment Share on other sites More sharing options...
SteveFrost Posted October 28, 2009 Author Share Posted October 28, 2009 hm, unfortunately I don't have any of those browsers. You do have a <div> nested within an <a> tag down at the bottom (for Next >), which could be an issue. I think since a <div> is block level and anchor's are inline, it might be worth fixing. maybe a <span> would help in that case?Thanks for the suggestion but it didn't fix my problems Link to comment Share on other sites More sharing options...
SteveFrost Posted October 28, 2009 Author Share Posted October 28, 2009 Got the problem fixed, It was another bit of conflicting code :)Thanks for your help Link to comment Share on other sites More sharing options...
thescientist Posted October 28, 2009 Share Posted October 28, 2009 what was it? Link to comment Share on other sites More sharing options...
roundcorners Posted October 30, 2009 Share Posted October 30, 2009 sounds like the bottom half of your page was not within the container you set max and min width on. P.S. min and max width and height are not supported in IE6. IE6 treats all four variants as their non- min, max counterparts.If you want the main wrapepr to expand and contract in relation to the browser window, use a relative unti of measurement, such as %. margin:0 auto; will centre your div and if you want to be really backwards compatible, use text-align:center; too and nest all your content in another div with text-align:left; Note: If you float the centred element either way, it'll overwrite the margin:0 auto; rule. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.