Can't get a div to horizontal align in ie 7
Works fine in all browsers other then ie6 and ie7 but I am concerned only with ie7 for this issue.
I am trying to have a nav bar stick to the bottom of the browser window and stay in position when the page is scrolled
Nav Bar Code
<div id="quickcontactbar" style="align: center;">
<p class="leftp">
<a><img src="/images/searchbutton.png" style="border-right: 1px solid #888;"></a>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=micrimdefense&link_color=ffffff" style="width:165px; height:20px;"></iframe>
<g:plusone size="medium" count="false"></g:plusone>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=140269382715400&href&send=false&layout=button_count&width=60&show_faces=false&action=like&colorscheme=light&font&height=21;" scrolling="no" frameborder="0" style="border-right: 1px solid #888; overflow:hidden; width:60px; height:21px;padding-left: 3px;" allowTransparency="true"></iframe>
<span style="padding-left: 75px;"><img src="/images/phonenumber.png" style="border-right: 1px solid #888;border-left: 1px solid #888;"></span>
<img src="/images/copyright.png">
</p>
</div>
This is the css for the navbar
#quickcontactbar {
position: fixed;
width: 808px;
height: 36px;
bottom:0px;
left:0px;
right:0px;
background: url(images/bgquickbar.png);
border-bottom: 1px solid #ffffff;
margin: 0 auto;
display:block;
text-align: center;
}
#quickcontactbar .leftp {
color: #e3fe54;
margin: 5px;
font-weight: bolder;
font-family: Verdana, Helvetica, sans-serif;
font-size: 16px;
padding-top: 7px;
padding-left: 5px;
height:16px;
}
I suspect it has something to do with the left:0px and right:0px, but when I remove those it breaks in all other browsers and moves the nav bar off the screen to the right.
Thanks for the help, Stack Overflow rocks
also, I force standards mode with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
In ie7 showing the problem...
开发者_C百科
It should display like in chrome/ie8/safari...
Remove style="align: center;" from this...
<div id="quickcontactbar" style="align: center;">
making it into this...
<div id="quickcontactbar">
AFAIK, there is no such thing as align: in CSS and you already have text-align: center; applied to the <div> in your CSS.
Also validate your code with the W3C Validator.
EDIT:
Looking at part of your CSS here...
#quickcontactbar {
width: 808px;
left:0px;
right:0px;
}
The width is in constant conflict with the left/right positioning. How can it be both 0px from the left and right while also being 808px wide? When your browser window is 1000 pixels wide, the left/right is positioning the div 0 pixels from the left edge and 0 pixels from the right edge which forces the <div> to be 1000 pixels wide. That is how that is supposed to work. Now how can the browser reconcile that with your declaration that it must only be 808 pixels wide?
EDIT 2:
Use an 808 pixel wide wrapper <div> to horizontally center everything within.
http://jsfiddle.net/8rvQ3/4/
<div id="wrapper">
<div id="quickcontactbar">
<p class="leftp">
.....
</p>
</div>
</div>
#wrapper {
position: relative;
width: 808px;
margin: 0 auto;
}
#quickcontactbar {
position: fixed;
width: 808px;
height: 36px;
bottom: 0;
background: url(images/bgquickbar.png);
border-bottom: 1px solid #ffffff;
display:block;
text-align: center;
}
#quickcontactbar .leftp {
color: #e3fe54;
margin: 5px;
font-weight: bolder;
font-family: Verdana, Helvetica, sans-serif;
font-size: 16px;
padding-top: 7px;
padding-left: 5px;
height: 16px;
}
What happens when you remove left:0 and right:0?
Another way would be to set left: 50%, remove right: 0 and set margin-left: -404px;
加载中,请稍侯......
精彩评论