CSS puzzle

design

#1

I have a very basic problem. I have a page displaying very differently in Firefox than IE. I have one div that is suppose to be centered. In IE 6, there is a green background and a tan block in the horizontal center of the page. This is what I want it to look like. In Firefox 1.5, the tan bock does not center - it rests on the left margin.

I have looked over the code again and again and everything that all of my i’s are dotted and t’s are crossed, but apparently something is wrong. According to this article, it should be compatable with both browsers: http://www.wpdfd.com/editorial/wpd0904news.htm
The page is here: http://www.apt131.com/new/
Obviously, this is just the very beginning of a page.

What in the world am I doing wrong?


#2

try adding “margin-left: auto; margin-right: auto;” to your style declaration for the div

Check out Gordaen’s Knowledge, the blog, and the MR2 page.


#3

As Gordaen said, you need to specify the left and right margin to be ‘auto’ - this is mentioned in the article, BTW.

The problem is a design flaw with Internet Explorer.

Elements are rendered using rectangles, and these rectangles have margins, and naturally the way to center a rectangle inside another is to give it left and right margins of equal width. This works given that the element is block-level and not inline, and not positioned.

However Internet Explorer does a lot of things a different way, and one of them is to use “text-align” property to center elements instead of just text. So the article first told you the proper way to do it, then told you the way to do it for Internet Explorer.

Internet Explorer gets it right though if you trigger its standards-compliance mode.

:cool: [color=#6600CC]Atropos[/color] | openvein.org


#4

not always
http://setsuna-xero.com
is up to xhtml 1.0 strict and still doesn’t render the navbars correctly
but FF renders almost correctly
I say almost because I havn’t gotten it to align the comments the way I want them too yet…

point being - its bloody hard to get stuff to look the same in IE and FF and opera and [insert alternitive browser here]

anyways
you can trick IE into giving you the box you want with a hack
here I’ll give you an example

~~
#content {
border: 10px solid black;
padding: 10px;
width:300px;
}
~~
so doing the math
Left border 10px +
Right border 10px +
Left padding 10px +
Right padding 10px +
Box width 300px =
340 pixels total width

and the way IE manages it
Box width 300px -
Left border 10px -
Right border 10px -
Left padding 10px -
Right padding 10px =
260 pixels total width

and the hack for this example
div.content {
width: 340px;
voice-family: “”}"";
voice-family: inherit;
width: 260px;
}

the reason
IE doesn’t parse the “voice-family: “”}”";" correctly and is tricked into giving you the correct box size
or so my books says <.<


#5

There is a list of differences between Quriks mode and Standards-Complaint Mode in IE 6 available here: CSS
Enhancements in IE 6

As for “rendering correctly” - do you mean correctly according to the standard, correctly according to how the browser interprets the code, or correctly as to how you want it to appear? These are three different things. Not all browsers follow the standards the same way, and browsers have different bugs, and not everyone understands both standards and browsers well enough to know how to make what they want appear on screen.

In your CSS, you have a #Content set the property text-align to ‘center’. Which explains why the posts are centered in IE 6 and not centered in Firefox.

Other than that, if you ask anyone to look at your design, you should specify in detail how you want it too look, otherwise all one can do is compare how the browsers render it differently.

:cool: [color=#6600CC]Atropos[/color] | openvein.org


#6

I also have the #news set to auto margins to align the news posts; as per standards
and I tried a z-index hack for testing - didn’t work out in IE either

and I mean up to standards - thats how I learnt. It’s rather annoying to have it do something differant than what learnt its supposed to do. But I’m rebuilding the CSS to try this a diffant way, now that I’ve read up on a couple other ways to do it.


#7

I don’t think anyone has even bothered to look at your code in their replies. What you’re doing wrong is you’re using absolute positioning which IE6 deals with differently than pretty much any other browser out there. It’s not that difficult of a fix to keep using abosolute positioning (and hint, it doesn’t involve margin:auto at all), but from what I can see there’s no good reason for you to use AP in this situation.

So here’s how to fix it. First, remove everything that you’ve done thus far. Download the webdeveloper extension for firefox and the html tidy extension. Close IE6 and keep it closed until your site looks perfect in firefox.

Now go to http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php to have it generate a site for you based on your parameters. (Why re-invent the wheel?) Then simply pop your various bg images and colors in and be done with it. Once it looks good in firefox follow it up by hacking IE where necessary.

Definitely stay away from absolute positioning unless you’re absolutely sure what you’re doing.