Jump to content
mboehler3

Scrollbar Appears In Footer On Mac, Not Pc

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!

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...