i need help desperately!
i have styled my site to 1000px width and have set the content and header margins to 'auto' so that the pages will be centered.
this is fine and works beautifully in firefox 2 + 3
most pages work fine in IE 7 also, however 3 or so pages do not center and are displayed to the left which looks disgusting! this is strange because it is only some pages in IE7, but i really want the site to be centered correctly for every page, this is killing me i cannot see where i have coded wrong as the site displays fine in firefox and most pages are fine in IE also...it makes no sense to me - please help! thanks
here is my style.css file i have modified - i worked from a bluemarine base (website - www.fullforcefitness.com.au)
/* $Id: style.css,v 1.19 2006/12/27 13:17:15 drumm Exp $ */
/*
** HTML elements
*/
body {
margin: auto;
padding: 0;
background: url('pagbg11.png') no-repeat scroll center top;
color: #000;
font: 76% Arial, Helvetica, sans-serif;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
h2, h3, h4, h5, h6 {
margin-bottom: 0.5em;
}
h1 {
background-image: url('h12bg.png');
padding: 7px;
font-size: 1.1em;
color: #ffffff;
text-align: center;
margin-bottom: 0.3em;
margin-top: 0.3em;
}
h2 {
background-image: url('h12bg.png');
font-size: 1.1em;
text-align: center;
color: #ffffff;
a:link #ffffff;
margin-bottom: 0.3em;
margin-top: 0.1px;
padding: 7px 7px 7px 7px;
}
h3, h4, h5, h6 {
font-size: 1.0em;
}
p {
margin-top: 0.5em;
margin-bottom: 0.9em;
}
a {
text-decoration: none;
font-weight: bold;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #CD0000;
text-decoration: underline;
}
fieldset {
border: 0px solid #000000;
}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 1px solid #ddd;
}
table {
/* make
font-size: 1em;
}
.form-item label {
font-size: 1em;
color: #222;
}
.item-list .title {
font-size: 1em;
color: #222;
}
.links {
margin-bottom: 0;
}
.comment .links {
margin-bottom: 0;
}
/*
** Page layout blocks / IDs
*/
#content {
width: 1000px;
margin: auto;
position: center;
}
#content h2 a {
color: #ffffff;
}
#page {
background:#FFFFFF url('pagbg2.png') no-repeat scroll center top;
margin: auto;
}
#header {
background: #FFFFFF url('header17oct2.png') no-repeat scroll center top;
width: 1000px;
height: 115px;
margin: auto;
}
#logo {
vertical-align: middle;
border: 0;
}
#logo img {
float: center;
padding: 0 1em;
border: 0;
}
#menu {
padding: 0em 0em 0 0em;
text-align: right;
vertical-align: middle;
}
#navlist {
font-size: 1.0em;
padding: 0 0.8em 1.2em 0;
color: #9cf;
}
#navlist a {
font-weight: bold;
color: #fff;
}
#subnavlist {
padding: 0.5em 1.2em 0.4em 0;
font-size: 0.8em;
color: #9cf;
}
#subnavlist a {
font-weight: bold;
color: #9cf;
}
ul.links li {
border-left: 1px solid #9cf;
}
ul.links li.first {
border: none;
}
#search .form-text, #search .form-submit {
border: 1px solid #369;
font-size: 1.1em;
height: 1.5em;
vertical-align: middle;
}
#search .form-text {
width: 8em;
padding: 0 0.5em;
}
#mission {
background-color: #369;
padding: 1.5em 2em;
color: #fff;
}
#mission a, #mission a:visited {
color: #9cf;
font-weight: bold;
}
.site-name {
margin: 0.6em 0 0 0;
padding: 0;
font-size: 2em;
}
.site-name a:link, .site-name a:visited {
color: #fff;
}
.site-name a:hover {
color: #369;
text-decoration: none;
}
.site-slogan {
font-size: 1em;
color: #eee;
display: block;
margin: 0;
font-style: italic;
font-weight: bold;
}
#main {
/* padding in px not ex because IE messes up 100% width tables otherwise */
padding: 5px;
vertical-align: top;
}
#mission, .node .content, .comment .content {
line-height: 1.4em;
}
#help {
font-size: 0.9em;
margin-bottom: 1em;
}
.messages {
background-color: #eee;
border: 1px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
#sidebar-left, #sidebar-right {
background-color: #ffffff;
width: 150px;
/* padding in px not ex because IE messes up 100% width tables otherwise */
vertical-align: top;
}
#content {
width: 1000px;
margin: auto;
position: center;
}
#footer {
background-color: #eee;
padding: 1em;
font-size: 0.8em;
width: 100%;
}
/*
** Common declarations for child classes of node, comment, block, box, etc.
** If you want any of them styled differently for a specific parent, add
** additional rules /with only the differing properties!/ to .parent .class.
** See .comment .title for an example.
*/
.breadcrumb {
display: none;
}
}
.links {
color: #999;
}
.links a {
font-weight: bold;
}
.submitted {
color: #fff;
font-size: 0em;
margin: 0px;
}
.block, .box {
padding: 0 0 1.5em 0;
}
.block {
border-bottom: 1px solid #bbb;
background-image: url('blockbg3.png');
padding-bottom: 0.75em;
margin-bottom: 0.2em;
}
.block .title {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.box .title {
font-size: 1.1em;
}
.node {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #ffffff;
}
.sticky {
background-color: #FBFBFB;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.node .content, .comment .content {
margin: .5em 0 .5em 0;
}
.node .taxonomy {
color: #999;
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
margin: 0.5em;
}
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title a {
font-size: 1.1em;
font-weight: normal;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 1px solid #abc;
float: right;
margin: 0.5em;
}
/*
** Module specific styles
*/
#aggregator .feed-source {
background-color: #eee;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
color: #999;
font-style: italic;
font-size: 0.9em;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#forum table {
width: 100%;
}
#forum td {
padding: 0.5em;
}
#forum td.forum, #forum td.posts {
background-color: #eee;
}
#forum td.topics, #forum td.last-reply {
background-color: #ddd;
}
#forum td.container {
background-color: #ccc;
}
#forum td.container a {
color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #abc;
padding: .5em;
margin: 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
div.admin-panel .description {
color: #999;
}
div.admin-panel .body {
background: #f4f4f4;
}
div.admin-panel h3 {
background-color: #69c;
color: #fff;
padding: 5px 8px 5px;
margin: 0;
}
Comments
which pages? browser cache?
could you show us, which pages exactly aren't working in IE7
also, have you tried refreshing your browser cache on the offending pages by pressing CTRL+F5
less == more
Check your doctype and make
Check your doctype and make sure it is valid, IE is very sensitive and confused or dumb sometimesss that even auto margin-centering does not work
Also try to add some text-align: center; on your body declaration.
Note: This method will center all your content, so make sure you apply proper text-align on your block elements.
----------
My Drupal site: Captivating Capiz - Come and Visit the beautiful Philippine Paradise!
Are you attempting to create
Are you attempting to create everything at one shot at one time inside Drupal? You should always develop your layout outside Drupal in pure HTML/XHTML/CSS and then test against each browser. After you have proven your HTML/XHTML/CSS is clean and works, *THEN* rework the pages into Drupal replacing with variables, modules, etc.
Try using XHTML Strict. Thats what I use for fixed width centered layouts and it works fine:
Also, I believe 1000 pixels is too big. For 1024x768 users, you have to account for the scroll bar on the right. Also think of the divisibility factor for creating grids. Its best to use 960 pixels as its divisible by many numbers (3,4, 5, 6, 8...). Better to play it safe than be sorry and have to redo your template.
Kerry Kobashi
thanks guys
i figured out what it was, basically i spent hours and all it needed was a '0' in front of auto in margin!
so from margin: auto;
it became margin: 0 auto; and all is fixed i believe!
thank you for your feedback on the site, any more tips for making it better would be appreciated, i changed it to 960px which was a great idea, thank you
and yes your right im pretty much doing it all from inside drupal, how would i go about not doing this, im relatively amateur if you could point me in the right direction that would be great - basically i run a fitness business and have designed the site myself and learnt a lot along the way! i think i have done ok for a fitness expert and web design novice!
feedback is much appreciated, if you have any more id love to hear thanks again guys!
also im not sure how it looks in IE6, i dont have it and cant get it! if anyone does please let me know if it displays ok, thanks again look forward to hearing more in future =)
tom cotton
Full Force Fitness
IE6
I skimmed your site and as far as I saw it looked good in IE6. Not pixel-perfect but still :)
The text in the blocks with the grey background are hard to read though because of the background image. I suspect that is because you used transparent png's and IE6 doesn't do transparency. Maybe you should change them to gifs.
Furthermore I would advice you to validate,
Anyway, you being a fitness guy, you do a better job at building a site than I would do running a fitness business :)
---------------------------------------------------------------
www.opstijgendenevel.nl
www.opstijgendenevel.nl
haha thanks bud!
ta mate!
could u please explain to me how to validate my XHTML? and also any ideas with the pixels?...its set to 960px width with auto margins...
ur right with the png's, i will get around to changing the images over!
thanks again