Topic: Damn positioning (Page 1 of 1)

OK I am having a little problem with this positioning.....I have the code and IE6 and Mozilla look very different. I just can't seem to figure out what the issue could be so I ask for a little help. I am trying to get the three boxes centerd and in IE they appear to be centered with this code and Mozilla they are still too far left....any suggestions?? I don't think that I should have to have the margin-left:90px but it's the only thing that will push the items more the where I want them.

body {
font-family: georgia, veranda, arial, sans-serif;
color: #999999;
text-align:center;
background: #000000;
}
#frame {
width:793px;
height:506px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
background: black url("images/fpimages/bkgroundimg.gif");
background-repeat:no-repeat;
text-align:left;
}
#left {
margin-top:140px;
margin-left:90px;
float:left;
padding:0px;
width:150px;
}
#middle {
margin-top:177px;
margin-left:8px;
float:left;
padding:0px;
width: 150px;
}
#right {
margin-top:140px;
margin-left:8px;
float:left;
padding:0px;
width: 150px;
}

Indus: Can we see the actual page? I'm not sure why you are using margin top and left at all.

___________________
Emps

FAQs: Emperor

You want the boxes centered, eh? Yeah, centering can be a real pain...

You could make a dummy div, give it "text-align:center;" and then put the stuff you want centered inside it. This works for IE, but I'm not sure about Mozilla. It's not the right way to do it, of course.

You could also give "position:absolute; left:50%;" and then give it a negative left margin that is half the width of the box (in other words, you put the left edge in the center of the screen, then move it half of the box width to the left with the margin).

Also (despite what I just wrote above), positioning is usually done with "left" and "right," rather than with the margins.

Ah, you could also use JavaScript to find the width of the browsing area, calculate a centered position, and then move the boxes there (all with JS). It's been so long since I've done anything like that (years...) that I don't really remember how to do it, but I think H][RO mentioned that Drac used it for the page he put up in the site reviews a while ago... let me see if I can fish that out for you.

[Edit: OK, got it. Check out Drac's page for an example of JS centering. You'll notice that it "jumps" into the center... you can avoid this by keeping all of your elements hidden until all of the calculations are done, then just show all the elements once they're positioned (all with JS, of course). Man, I used to do a lot of this stuff... it's starting to come back to me a little.]



Cell 270

[This message has been edited by Suho1004 (edited 10-25-2002).]

Indus, following what Suho said, I think that may be your best bet. That is what I did, and as far as I know it works in Moz just fine. You are more than welcome to see it here -----> http://electricanvil.com/curtadkins/

Later,
C:\


~Binary is best~

There's a lot of talk lately about Google changing its ranking algorithms... apparently it's worse than I thought! Indus, I'm certain you ran a Google search for "CSS centering," and you only posted your question here after you came up empty. Apparently Google is so screwed up that this perfect explanation showed up in the first three results for me and not for you. Maybe we should write them a letter?

Edit: Plus, I'm inclined to avoid JavaScript, since I usually surf with it turned off, and I can only assume other people do as well.

(Backing information: TheCounter.com provides hit counters to crappy web pages around the world, and their statistics for September 2002 say that 10% of their counters were hit by clients with JavaScript disabled. Are you willing to code for Netscape 4, with 4% of the market ... and Opera 6, with 1% of the market ... and not JavaScript-crippled clients, with 10% of the market?)

[This message has been edited by Perfect Thunder (edited 10-25-2002).]

Good point about the JavaScript... that was just one of several options. I would try the others before going with JS. I'm sure you could get it to work without having to resort to scripting.

FAQ:
http://faq.ozoneasylum.com/841/

___________________
Emps

FAQs: Emperor

Nice thanks guys.....I have to get to work but I will try that later on and I will upload that page if you want to see it......I hope one of these solutions fixes that issue that I am having.

Emps: I actually tried to position a div using the auto margins + text-align... no dice. The only way I could get it to work in IE6 was wrapping it in a dummy div that had text-align:center. I'm still trying to figure that one out.

Suho1004: Its because text-align: center only works on elements inside the DIV whilst margin:auto works on the DIV - have a look at the blue robot example - you set the text-align: center on the body and the margins on the DIV.

___________________
Emps

FAQs: Emperor

Ok guys.....here is the page
Like I said it looks ok in IE6 but Mozilla not what I want it to look like.

Looking at your style sheet, and comparing to the page, it looks like Mozilla is rendering it correctly, and IE 6 is incorrect.

You have a 793px width div centered on the page. Both browsers get this correct. (I know this thanks to my "show divs" bookmarklet, which has this url:

javascript:a=document.getElementsByTagName('div');for(b=0;b<a.length;b++){a[b].style.border='1px solid #F00';}void(0);

add it to your favorites and bookmarks if you want.)

Then, Mozilla is putting the first div (#left) 90px from the left of the centered div. exactly right. IE, for some reason, is putting it much farther to the right.

In any case, I think what you want to do is reduce the width of the #frame div so that it tightly holds on to its contents.

Note also that IE6 doesn't recognize the DOCTYPE tag if it's preceeded by an <?xml...?> tag. Since the xml tag is optional, I suggest you leave it out and specify character encoding with a meta tag. That way IE 6 will render the page in standards mode.

Emps: Ah.... I could have sworn I did it exactly the way it was shown at Blue Robot, but I must have screwed it up somehow. I'll have to try it again when I get the chance.

Slime: You are awesome. I now have that little javascript function in my favorites.

Indus: Well, the experts are here now, so I'll stop clogging up your thread...

Slime: Thanks again....you are the man when it comes to answering the code questions. I eliminated the margin-left:90px; and tighted the div up and it perfect now. Exactly what I was looking for.

Thanks for all the help guys.....I gotta finish this page before I leave for BMT

*brews another pot of coffee for the long night ahead*

I'm going to resurrect this thread for the moment to address the question I asked Emps above (about auto width margins and text-align:center). I went back and looked at my page, and I think the reason it doesn't work is because I'm working directly with an image (that is, I'm assigning styles to a class of image). I tried it every which way I can think of, but nothing worked, which leads me to believe that neither text-align or auto width margins apply to images.

My original workaround for this was to slap the image into a div that has text-align:center (my "dummy div" suggestion above). It seems to be the most efficient solution to this particular problem, and I think I'm going to stick with it. I don't know of any other way to center an image at the moment.