but when I reference the same CSS in Umbraco nothing happens... everything is left aligned. I read up on "hasLayout" and all my divs indeed have layout but still nothing will center.
You can drive yourself crazy sometimes trying to figure out why something is not working with CSS. Use firefox and use the fire-bug add-on. You can then right click on a element and inspect it. In this example for you might find another style is overwriting your styles or your styles are not getting applied for some reason.
Have you a link to the page? Also, if the css is okay, check there aren't errors in the html. I use the HTML Validator plugin for Firfox to always validate my pages as I browse.
What do you mean by "in Umbraco", is it in the rich text editor you're trying to use your CSS? I've found it a bit tricky at times to get all styling as wanted in the RTE but as Paul says firebug is a great tool for debugging CSS (although it might not help as much if you're only having the problem in IE7).
I used do use firebug..., in IE and Opera via Firebug Lite, thanks for the suggestion, my problem turned out to be a quote being outside an element, and a mis-spelled style in my html which I found after reviewing the markup in the IE Dev Toolbar. However, to solve my centering issue I had to do the following.
I had to add body{text-align: center} to center my layout. It's ironic, I do NOT have to do this outside of umbraco. My CSS in IE7 on a regular aspx page just works. It appears that IE7 in umbraco ignores:
margin-right:auto; margin-left:auto;
Oh well thanks for the help, it was very much needed.
Umbraco doesn't change anything about the front end css/html of your site. You are in complete control. If you post a link to a sample page, I'm sure someone will be able to tell you what it is. Did you validate both your html and css and check the rendering mode in use (standards or quirks)?
IE can also be a bit fussy about spacing or ommission of attribute values in shortcuts. I used to come across this all the time with background images not appearing in IE for example.
Yes, I did yesterday and now that I remember,The validator did yell at me for not having a Doctype defined... I commited the great sin that web developers should never make. I left our the Doctype, and never went back and fixed it. So I added it back just now and GUESS WHAT... Centering Works... margin-right:auto; and margin-left:auto; is no longer ignored. My page is perfectly centered with the correct markup.
FYI: I didn't mean to make Umbraco sound less than what it is (The most AWESOME CMS on the Planet). I just explained what I noticed. However, I admitted where my error was above. I'm commited to Umbraco which is why I purchased the PRO Version. I very much want to see this project stay around for decades to come.
Here is HTML + CSS to centre align content cross all browsers:
<!doctype html>
<head>
<title></title>
<style type="text/css">
body {
width: 100%;
}
#content {
margin: 0 auto;
width: 900px; /* this is the width that you're wanting for your body, 900px is safe for a 1024 res */
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<!-- content here -->
</div>
</body>
</html>
Centering in IE7 Using Umbraco 4.0.3
I have the following CSS that centers my layout perfectly in IE7.
but when I reference the same CSS in Umbraco nothing happens... everything is left aligned. I read up on "hasLayout" and all my divs indeed have layout but still nothing will center.
Hi,
You can drive yourself crazy sometimes trying to figure out why something is not working with CSS. Use firefox and use the fire-bug add-on. You can then right click on a element and inspect it. In this example for you might find another style is overwriting your styles or your styles are not getting applied for some reason.
Cheers
Paul
Have you a link to the page? Also, if the css is okay, check there aren't errors in the html. I use the HTML Validator plugin for Firfox to always validate my pages as I browse.
HTH
Tom
What do you mean by "in Umbraco", is it in the rich text editor you're trying to use your CSS? I've found it a bit tricky at times to get all styling as wanted in the RTE but as Paul says firebug is a great tool for debugging CSS (although it might not help as much if you're only having the problem in IE7).
Regards,
Magnus
I used do use firebug..., in IE and Opera via Firebug Lite, thanks for the suggestion, my problem turned out to be a quote being outside an element, and a mis-spelled style in my html which I found after reviewing the markup in the IE Dev Toolbar. However, to solve my centering issue I had to do the following.
I had to add body{text-align: center} to center my layout. It's ironic, I do NOT have to do this outside of umbraco. My CSS in IE7 on a regular aspx page just works. It appears that IE7 in umbraco ignores:
margin-right:auto;
margin-left:auto;
Oh well thanks for the help, it was very much needed.
Kevon,
Umbraco doesn't change anything about the front end css/html of your site. You are in complete control. If you post a link to a sample page, I'm sure someone will be able to tell you what it is. Did you validate both your html and css and check the rendering mode in use (standards or quirks)?
IE can also be a bit fussy about spacing or ommission of attribute values in shortcuts. I used to come across this all the time with background images not appearing in IE for example.
Regards
Tom
Yes, I did yesterday and now that I remember,The validator did yell at me for not having a Doctype defined... I commited the great sin that web developers should never make. I left our the Doctype, and never went back and fixed it. So I added it back just now and GUESS WHAT... Centering Works... margin-right:auto; and margin-left:auto; is no longer ignored. My page is perfectly centered with the correct markup.
THANKS quixltd you rock!
FYI: I didn't mean to make Umbraco sound less than what it is (The most AWESOME CMS on the Planet). I just explained what I noticed. However, I admitted where my error was above. I'm commited to Umbraco which is why I purchased the PRO Version. I very much want to see this project stay around for decades to come.
I hope this clear things up.
I'm using the 960 grid system for some time now and it save lots of time, have a look at:
http://960.gs/
I've created a package to install some sample templates and examples(based upon the 960 grid framework):
http://dibbus.com/umbraco/umbraco-template-package/
@Folkert 960 is nice. I'll have to take a look at in on my future projects.
Here is HTML + CSS to centre align content cross all browsers:
<!doctype html> <head> <title></title> <style type="text/css"> body { width: 100%; } #content { margin: 0 auto; width: 900px; /* this is the width that you're wanting for your body, 900px is safe for a 1024 res */ text-align:center; } </style> </head> <body> <div id="content"> <!-- content here --> </div> </body> </html>thanks slace.
is working on a reply...