Jump to content

Strange Browser Troubles...


SteveFrost
 Share

Recommended Posts

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

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

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. Edited by SteveFrost
Link to comment
Share on other sites

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

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

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

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...