margin:auto produces different margins on different pages

&nbsp

zafra

10:07 pm on Feb 20, 2012 (gmt 0)

Hello all - I'm a novice css user, working in dreamweaver cs5. My pages have almost identical content, all centered using 0 auto margins. But one page (index) has different margins than all the others, so that the top banner logo shifts annoyingly to the left when you go from that page to any other. For the life of me I can't figure out why that one page would come out with different margins than the rest, when they're all linked to the same css. I've tinkered endlessly to no avail, and finally have given in to needing help from some pros.

The margins that show up in design view when I highlight the "container" div are left 296 and right 297 on the offending index page, 288 both right and left on all the other pages. Can anybody guess what could be causing this? Any feedback will be most appreciated. Thanks in advance!

zafra

12:39 pm on Feb 21, 2012 (gmt 0)

I assume you're referring to the colspan 3 and the fact that there are only 2, but actually I added the extra colspan just to see if it would have an affect on the problem because it was the only difference I was seeing in the code. It didn't help, but I forgot to change it back. I just changed it back and it still didn't do anything. Thanks for trying! (If you're referring to something else, I'm not getting it :/)

lucy24

8:02 pm on Feb 21, 2012 (gmt 0)

Well, drat. Not sure I could have got the numbers to add up anyway.

Does it behave the same way if you expand the CSS to say #container1, #container2 (with the same set of styles) and similarly for banners, and then put both versions on the same page? That's how I did it to make visual comparison easier. But the two areas always came out as exact matches, even in MSIE 5. (It did refuse to center the table, but that's a known MSIE 5 Thing.)

What I did notice however is that you don't say anything explicit about two important sets of table properties:

It doesn't matter what the actual numbers are. They just have to be declared explicitly so the the user's browser doesn't get a chance to try any funny business. You can also add visible borders to everything in the world, to make it easier to see what's different.

Oh, and

img {margin: 0; padding: 0;} a {text-decoration: none;}

The idea here is to regularize absolutely everything that a browser could possibly change. The last line is because some rare browsers put a blue link-type border around illustrations acting as links. In fact I've got one set of pages where I like this effect and wish I could persuade other browsers to do it! This border in turn would add 1 or 2 pixels to the size of everything.

:: off to continue racking brains ::

zafra

12:07 am on Feb 22, 2012 (gmt 0)

Sorry for the slow response I was out all day working on a whole other kind of project. I will now start playing with all your suggestions - it may take me a little while because I'm, as I said, no expert, but for SURE I will let you know my findings. Thanks SO much for all your help so far! (I am always amazed by the kindness of strangers on web design forums :) ). Off to tinker!

zafra

12:27 am on Feb 22, 2012 (gmt 0)

Oops - spoke too soon about tinkering when I actually don't understand what you're suggesting - now my ignorance will become quite apparent. Can you specify where that code goes? The border-collapse thing, if it refers to the tables, is it a class that is table specific or is it in the rules for body or... I have no idea. And the other is the img margin and padding - where do I put that one? I already have the no text decoration thing covered, I think. Sorry for my newbieness. :)

zafra

11:14 am on Feb 22, 2012 (gmt 0)

You know, I'm going to remake the index page by doing a save as with one of the other pages, and eliminating one element at a time to see if that reveals the issue. If not, I should at least arrive at an index page that doesn't have this issue, right? Then we'll just have to chalk it up to some kind of code poltergeist or something. I'll keep you posted.

zafra

11:34 am on Feb 22, 2012 (gmt 0)

Well, that did the trick. Here's the code that was making the difference - <div id="main_image">, which is another container that all the other pages have, but the index doesn't. Here is the css for the main image div: #main_image { position: relative; text-align:center; margin: auto; height: 600px; width: 700px; }

The funny thing is it doesn't even need the </div> to solve the problem - with just the opening the logo in the banner div shifts over. I closed the tag to have cleaner code, and of course deleted all the main image content and there you go. If anyone can see why that main image div would be shifting the content of the banner div, I'd love to have that little bit of knowledge for the next time something like this happens. Thanks!

lucy24

9:05 pm on Feb 22, 2012 (gmt 0)

You can get a lot of information simply by giving each of your css classes a border of some kind: red solid here, blue dotted there, et cetera. Then you look at the page and say "wtf? There's not supposed to be any padding there!" It isn't a foolproof trick, because the border itself adds one px to everything. But it's an easy test.

Anyway, that extra container explains why the two tables looked identical on all my browsers. They were identical!

alt131

8:34 am on Feb 23, 2012 (gmt 0)

Hi Zafra, and welcome to css,

Thanks for the great explanation, code samples and updates - it's an intriguing problem. Is this happening in browsers, or just in Dreamweaver?

To answer some of your questions, border-collapse is a css property. You can read about it at 17.6.2 The collapsing border model [w3.org] The css table model can be heavy reading, but come back with more questions if you need.

Your problem solving approach (slowly deleting elements) is exactly what is recommended in the CSS Trouble-shooting guide [webmasterworld.com] pinned to the top of the form, so if you are new to coding, well done.

I'm also having problems understanding why the margins are different, but my first thought is whether there is a clue in your statement that merely inserting the div - without closing it - resolves the issue. Unclosed elements should cause problems - not resolve them, so that makes me wonder if there is an error earlier in the code. Have you validated the html?

Also where is <div id="main_image"> located (inside #container, before #banner, etc)? Finally, you've said the "page" has different margins. Do you mean the <body> has different margins, or #banner has different margins - and are you sure this is margins and not padding, widths or positioning?

As Lucy suggests a quick check is to put a border around the elements as that will help identify where elements begin and end. Another useful tool is to inspect the elements using firebug for firefox. The "layout tab" has a diagram that reports the margins, padding and dimensions which makes it easy to see which element and property is actually different.

4serendipity

6:03 am on Feb 25, 2012 (gmt 0)

zafra,

Building on lucy's excellent tip of giving each element a border. You can use the web developer addon for firefox or Chrome's developer tools to do this capriciously.