Forum Moderators: not2easy
¦ next: Page 1-----------¦ icon ¦-------- prev: Page 3 ¦
I need the icon(40px X 40px) to stay centered at all times. The problem I am running into is that one of my pages has a long name:
next: Vision, Mission & Values
The text doesn't run into the icon, but in IE it pushes the middle div over to the right when I navigate to this page, in FF it works fine. This is what it looks like in IE with the longer text string:
¦ next: Vision & Mission------¦ icon ¦-----prev: Page 3 ¦
And this is what I want it to look like (this is the FF view)
¦ next: Vision, Mission----¦ icon ¦--------prev: Page 3 ¦
Here is the code I am using:
HTML:
<div id="pagenavLeft">
...left nav text...
</div>
<div id="pagenavRight">
...right nav text...
</div>
<div id="pagenavCenter">
...small icon...
CSS:
#pagenavLeft {
padding-top: 12px;
float: left;
}
#pagenavRight {
float: right;
padding-top: 12px;
}
#pagenavCenter {
margin: 0 auto;
width: 40px;
text-align: center;
padding: 0;
}
Basically I just need to get the icon to stay centered in IE. Is there a way to accomplish this without going to fixed widths? Also, is there a special IE workaround that I should be aware of?
Any help would be greatly appreciated. Thanks!
at the bottom of a series of pagesI need the icon(40px X 40px) to stay centered at all times
a way to accomplish this without going to fixed widths?
1) I am 'guessing' that this is a footer of some sort, probably with its own wrapper if needed,
2) Assuming the icon is in fact an image.
3) What compels the need not to fix a width to your left and right floats? It sounds very static as long as the width is wide enough to accommodate the widest needs left and right. The width: 40px; is hardly going to get in the way of anything.
Sample below might be appropriate for what you are wanting. IE pushes the 'center' a shade to left at all resolutions but is it enough to matter? Will anyone ever notice? Probably a hack for it if really needed.
<html>
<head>
<style>
html, body {
margin: .5em; padding: 0; font-size: 100%;
}
#pagenavLeft {
padding-top: 12px;
float: left;
width: 35%;
}
#pagenavRight {
float: right;
padding-top: 12px;
width: 35%;
text-align: right;
}
#pagenavCenter {
text-align: center;
}
#pagenavCenter img {
width: 40px; height: 40px;
}
</style>
</head>
<body>
<div id="pagenavLeft">
Next: Vision, Mission & Values
</div>
<div id="pagenavRight">
Previous:
</div>
<div id="pagenavCenter">
<img src="aaa.jpg" />
</div>
</body>
</html>
<edit - My usual text clarification:))>
[edited by: D_Blackwell at 10:25 pm (utc) on June 22, 2008]
