I tested all my solutions in this thread before posting so we must be crossing paths somewhere, although it seems like you git it fixed (note that the margin:0 auto is used to center elements, however with the width:100% there it basically nulls hte margin:0 auto (it makes it useless))
width: 100% was necessary as IE7 wouldn’t center it otherwise on my end. I had to leave it there, I guess because the other inner div’s all don’t have a set width, and as IE7 wants a width I had to give it one.
EDIT: You’re right, I can remove “margin: 0 auto;” if I leave “width: 100%;” in there, but not vice versa. Thanks again.
I’ve taken a few deep breathes, studied each line of code for discrepancies, did some ad hoc tests and…something must be interfering as most online articles on this topic seem to insist that only any of the below tweaks are necessary for IE7:
a) float: left;
b) text-align: center
c) overflow: hidden
All concerning the parent.
Below is all the CSS code within which the buttons are enclosed. Does it interfere? I can’t see why but perhaps it does, I certainly can’t find out any other reason why there’s this bias in IE7 to push things to the right.
I would rather not redo the buttons code approach as there’s lots of pages which use the current method well (even IE7 is fine providing you don’t ask it to center them).
It’s worth mentioning that Centered Widthless Blocks can also be done with display:inline-block; as a shrinkwrapping container. Most effectively that would be done with a UL which would be the container.
You can avoid the problem with whitespace nodes by floating the LI & A (float them both to kill the IE staircase bug) instead of setting them as inline-block.
It does require an extra div to nest the UL in but the centered widthless float method requires one as well. The benefit I see to it is that you do not have to use overflow:hidden; to hide relative positioned elements when they extend beyond the viewport.
Something like this would be a starting point -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Widthless Blocks</title>
<style type="text/css">
h1 {
font-size:1.4em;
text-align:center;
}
/*=== Demo Code ===*/
#nav {
width:1000px;
margin:0 auto;
background:#CCC;
text-align:center; /*center the entire ul*/
}
#nav ul {
display:-moz-inline-box;/* for FF2 if needed */
display:inline-block;/* shrinkwrap the ul */
vertical-align:bottom;
margin:0;
padding:0;
list-style:none;
background:#FF0;
}
* html #nav ul {display:inline;}/* IE6 inline-block trip */
*+html #nav ul {display:inline;}/* IE7 inline-block trip */
#nav li, #nav a {float:left}
#nav a {
padding:5px 15px;
text-decoration:none;
color:#000;
font-weight:600;
}
#nav a:focus,
#nav a:hover {
background:#000;
color:#FFF;
}
</style>
</head>
<body>
<h1>Centered Widthless Blocks</h1>
<div id="nav">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div>
</body>
</html>
[ot]and i’m a GUI and i meant it as a general solution, not directed at Sp.
so, how could i say otherwise than wife?
let me tell you this though, i was tempted to say girl, but what if my wife sees it? i predicted a lot of one hand clapping sounding really red marked so i decided to stick with the wife
from there, everybody can apply the solution to their own situation and hearth desire ;)[/ot]
I couldn’t get it to work (and try I did) so I ended up thinking up the one liner below, works great. Maybe it’s not a top notch solution however it’s all I could think up. The div acts as a wrapper round all buttons.
I changed .button-button and .button-button-center (2 different attempts, not at the same time) as below and IE7 refuses to give in. The changes however doesn’t negatively affect the other browsers.
float: left might be the answer but IE7 seems to suggest it wants something more.
Hi, the problem is that IE7 doesn’t like it when a right floated element is inside a left floated element (both no widhts). THe parent will stretch to 100% width and thus since the widths are bigger then the floated shrinkwrap, the 50% left offset goes a longer way
This can be fixed very easily by changing hte float direction
.button-button {
float: right;
display: block;
}
To this
.button-button {
float: left;
display: block;
}
Though the display:block isn’t even needed sinnce <div> is block already
[/ot]