Jump to content

Scrollbar Appears In Footer On Mac, Not Pc


mboehler3
 Share

Recommended Posts

I am having a problem with viewing my website on a Mac computer. In all browsers on my PC, the footer looks fine, like this:footer-nice.gifBut on a Mac, in both Safari and Firefox, a horizontal scrollbar is added to the footer, seen here:footer-bad.gifHere is my code:

<div class="footerBody">	<div id="content-outer">		<div class="container_12">			<div class="grid_4 leftTextAlign">				<!-- #include virtual = "/Include/960/globals/footer_leftcolumn.asp" -->			</div>			<div class="grid_4 leftTextAlign margin0">			 <div class="footerTitle">Quick Links</div>				<div class="lineheight">				<a href="/spsite/service/faq.asp">FAQ</a><br />				<a href="/SecurityCenter/BcrhWare/">Privacy & Security</a><br />				<a href="/contactus/">Contact Us</a><br />				<a href="/sitemap.asp">Site Map</a><br />				<a href="/login/login.asp">Login</a>				</div>			 </div>			<div class="grid_4 gridBirthday">				<div class="footer_10yrs"><img src="/images/960/global/footer_10years.gif" /></div>				</div>				</div>				</div>				</div>

And here is the CSS:

.footerBody {background-color:#88ac2e; width:100%; font-family: Arial; color:White; overflow:auto; height: 152px;}.container_12 .grid_4{width:300px;}.grid_4{display:inline;float:left;margin-left:10px;margin-right:10px}.leftTextAlign {text-align:left;}.margin0 {margin-left:0px;}.footerTitle {font-family:Arial; font-size:14pt; font-weight:bold; color:white; margin:10px 0 5px 0;}.lineheight {line-height:20px;}.gridBirthday {text-align:left; margin-left:-10px;}.footer_10yrs img {position:absolute; z-index:5; margin-top:-10px;}

I don't know if this will help, but I have the Web Developer toolbar installed on my Firefox (on PC), and when I rollover the middle grid_4, this is what I see... notice how the red box doesn't have a right side, which I think contributes to the scrollbar problem...footer-info.gifAny help is greatly appreciated, thanks!

Link to comment
Share on other sites

Well, .footerBody having overflow:auto is what is letting the scrollbar appear. What isn't as obvious is why it's needed. It is clear that the text in the mac version is bigger. Perhaps the screen is set to a lower resolution? When you scroll right, is there anything there? If not, and you are not creating any of that stuff dynamically, then you can probably safely just put overflow: hidden and forget about it.

Link to comment
Share on other sites

Well, .footerBody having overflow:auto is what is letting the scrollbar appear. What isn't as obvious is why it's needed. It is clear that the text in the mac version is bigger. Perhaps the screen is set to a lower resolution? When you scroll right, is there anything there? If not, and you are not creating any of that stuff dynamically, then you can probably safely just put overflow: hidden and forget about it.
that worked, thanks
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...