(By the way, do you mean "I have a whole website that I am required to change so it works in FF as well as IE" ???) yes
It is everything in general all the pages are all left aligned in FF and in IE they are centered.
What i mean by this all the content in the page is either top left aligned or middle left aligned with ALL content no matter what it is when it is presented in FF but in IE it is middle middle (middle of the page vertically and horizontally - thats how I want all my pages in FF to be done).
I am using CSS and I would like a solution prefably just using a few simple css commands.
I have been searching the internet and they say to but 3 css tags within each other, I really do not plan on doing this as its alot of extra code for nothing.
You have little choice.
Vertical alignment isn't really something that can be easily done.
If the pages are 'tall' or 'long' (ie. they won't fit in the viewport and you have to scroll), then you could apply padding or margin to an outer container.
If the pages area fixed height (say 400px or someting), then it can be done... usually by trickery (suchas positioning it down by 50%, then pulling it up by 25%)... but this can get a little out of shape in some browsers (some don't like negative margins, others don't like applying padding/margins to the bottom if certain styles are applied etc.).
Can you supply a URL?
(If you don't want to list your real one, pop over to tinyurl.com and get a 'fake' one for the time being ;))
Its not that im worried its that i dont have one, its on localhost apache :P (nice link though)
I have searched the internet and this seems to be a problem always cropping up.
Because the website was working fine but now that I also need to make it FF compliant its being a real pain. I googled and the usually scenario is "my table is centered in IE but in FF it is left aligned".
Well can you tell me your best suggestion on what to do (to get my table centered vertically/horzontially)?
If you have a common style sheet that's used throughout the site, it's not hard to center your pages. Absolute position the body. Add the following attributes to the body:
You'll have to play around with the left amount until things look like you want them to. I used a percentage instead of a fixed amount because of the wide variety of monitor resolutions used these days. The top is optional but, you may find that you'd like a little more or less space from the top than what the browser gives by default.
Hope this helps.
- The viewport height is not normally something the page rendering engine takes into account. It is expected to place things against the top, and then add them on downward until it runs out of material. The emphasis is in fitting things to the page horizontally. If it won't fit, the page expands downward.
- Vertical centering is not generally provided, because of the above, and because different computers have different screen resolutions.
- It is almost impossible to make something exactly fit a page in all browsers, screen resolutions, font size settings, opened window sizes, and browser defaults.
- You can define styles for the td and th tags setting the text-align and vertical-align styles to what you want. This overrides the browser defaults.
- To keep stuff from rendering different between IE and FF, do not put size styles (height and width) and nonzero surrounding styles (margin, border, and padding) in the same tags or styles. IE and FF render them in the opposite nesting order. Use two nested tag pairs to specify the order they will be applied.
I suggest that you center things horizontally, and let the vertical parts end up where they do. Busting your buttons over trying to center stuff on the page vertically in all browsers and window sizes is a waste of time.
to center both horizontally and vertically. When the window changes size, the content adjusts to remain centered. It works in IE and FF :icon_smile:, but not sure if this is the way you would go about properly aligning multiple-celled tables though...
Horizontal centering is easy, if you don't have size styles (height, width) and nonzero surrounding styles (margin, border, padding) applied to the same tag. Nest two tags if you need both.
The Internet is not designed for vertical centering. Web pages are designed to expand downward when they need more room. Add in different screen resolutions and window sizes (The browser might be restored down - and don't forget Web TV's 320x192 pixel screen), and the impossibility of vertical centering is quite evident.