Firefox Scrollbar no Content?

Sarah82 · May 25, 2010

Hi thereWandered if anyone could help me. I have a document which I have created a few div's and re-positioned them. Everything works perfectly in IE. But when I open the document in Firefox, I get the page scroll bar but there is no content (as I have designed it to be) further down the page.The div's I have created are set at minus percentages, could this have something to do with it?How would I go about amending this to get rid of the page scrollbar as it is when I open it in IE?Cheers

real_illusions · May 25, 2010

Have you got a link?You will find IE will always display the scrollbar, even when its not needed. Whereas every other browser will not display the scroll bar unless it is needed.

Sarah82 · May 25, 2010

Have you got a link?You will find IE will always display the scrollbar, even when its not needed. Whereas every other browser will not display the scroll bar unless it is needed.

I have not got a link as it is not live yet.It is firefox that is showing a page scroll bar and IE is not. Which is why I am kinda baffled :s

dsonesuk · May 25, 2010

Since it is a only a few divs, could you at least post the code , then we get an better idea on what the problem is, instead of guessing.

Sarah82 · May 25, 2010

Have you got a link?You will find IE will always display the scrollbar, even when its not needed. Whereas every other browser will not display the scroll bar unless it is needed.

I have not got a link as it is not live yet.It is firefox that is showing a page scroll bar and IE is not. Which is why I am kinda baffled :s

dsonesuk · May 25, 2010

Since it is a only a few divs, could you at least post the code , then we get an better idea on what the problem is, instead of guessing.as in <html><head></head><body>your code..<div>.....</div></body></html>

Sarah82 · May 25, 2010

Since it is a only a few divs, could you at least post the code , then we get an better idea on what the problem is, instead of guessing.as in <html><head></head><body>your code..<div>.....</div></body></html>

Sorry pushed the wrong button. Will get my coding pasted up later todaythanks

Sarah82 · May 25, 2010

Hi ThereHere is the code that I am using.Thanks<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Future Limo Buses</title><style type="text/css"></style></head><body><div id="Wrapper"><div id="Logo"></div><div id="PageHeader"></div><div id="Navigation"><a class="home" href="index.html"></a><a class="about" href="aboutus.html"></a><a class="future" href="future.html"></a><a class="gallery" href="gallery.html"></a><a class="testimonials" href="testimonials.html"></a><a class="terms" href="terms.html"></a><a class="contact" href="contactus.html"></a></div><div id="Seperator"><img src="Images/Misc/seperator.png" width="3" height="302" /></div><div id="Links"><a href="http://www.facebook.com/pages/Future-Limo-Buses/113455505345741"><img src="Images/Misc/f_logo.png" width="22" height="22" border="0" align="left"/></a><a href="http://www.got-the-concept.co.uk"><img src="Images/Misc/copyright.png" width="121" height="22" border="0" align="right"/></a></div><div id="PageInfo"><p>We are Aberdeens newest and premier party and social experience. We have the only mobile, large capacity, Limo-like venue in town.<br /><br /> <img src="Images/Misc/abouttext1.png" border="0" height="19" width="234" align="middle"/> <br /> <br />The Future experience is the brainchild of a young Aberdeen entrepreneur who saw an old school bus for sale and was inspired to give it a new lease of life... and Future was born.<br /><br />A major transformation was required to the old lady to bring her smack bang, singing, dancing and partying into the 21st Century. Her insides were ripped out and the construction of her new heart and soul began. She was given a custom designed and built seating arrangement, interior panels and flooring. Then her state of the art sound system was fitted along with a Freeview LCD TV. She was illuminated with the assistance of new innovative LED and fibre optic coloured lights.<br /><br />As passengers are her greatest love and their needs her priority she was given a refreshment and comfort area, downstairs, including a serving area, fridge and WC facilities. Her heart and soul were complete. But unfortunately her aging looks let her down... she needed a facelift to make her more inviting.<br /><br />And so her exterior facelift began. A fresh coat of black paint gave her body a new lease of life. Her wheels were capped in shining chrome and most importantly her destination in life was guaranteed with the installation of a funky LED sign... showing the way to the Future!<br /><br />The Future is here and is ready to take Aberdeen by storm.<br /> <br /> <img src="Images/Misc/abouttext2.png" border="0" height="19" width="270" align="middle"/></p></div></div></body></html>

thescientist · May 25, 2010

you are forcing height in your #Wrapper.

dsonesuk · May 25, 2010

plus your have major duplication of css coding for menu, when below code will do just as well

#Navigation a {display: block; background-repeat: no-repeat; height: 18px;}a.contact, a.terms, a.testimonials, a.gallery, a.about {margin-top: 30px;}a.future {margin-top: 20px;height: 35px;width: 107px;}a.home {width: 49px;}a.about{width: 76px;}a.gallery{width: 60px;}a.testimonials{width: 107px;}a.terms{width: 52px;}a.contact {width: 90px;}/*xxxxxxxxx menu link, visited, hover, active xxxxxxxx*/a.home:link, a.home:visited {background-image: url(Images/Navigation%20Bar/homewhite.png);}a.home:hover, a.home:active {background-image: url(Images/Navigation%20Bar/homegrey.png);}a.about:link, a.about:visited, a.about:hover, a.about:active {background-image: url(Images/Navigation%20Bar/aboutusgrey.png);}a.future:link, a.future:visited {background-image: url(Images/Navigation%20Bar/thefutureexperiencewhite.png);}a.future:hover, a.future:active  {background-image: url(Images/Navigation%20Bar/thefutureexperiencegrey.png);}a.gallery:link, a.gallery:visited {background-image: url(Images/Navigation%20Bar/gallerywhite.png);}a.gallery:hover,a.gallery:active {background-image: url(Images/Navigation%20Bar/gallerygrey.png);}a.testimonials:link, a.testimonials:visited {background-image: url(Images/Navigation%20Bar/testimonialswhite.png);}a.testimonials:hover, a.testimonials:active  {background-image: url(Images/Navigation%20Bar/testimonialsgrey.png);}a.terms:link, a.terms:visited {background-image: url(Images/Navigation%20Bar/termswhite.png);}a.terms:hover, a.terms:active {background-image: url(Images/Navigation%20Bar/termsgrey.png);}a.contact:link, a.contact:visited {background-image: url(Images/Navigation%20Bar/contactuswhite.png);}a.contact:hover, a.contact:active {background-image: url(Images/Navigation%20Bar/contactusgrey.png);}

Sarah82 · May 26, 2010

Hi guys thanks for thank will give it a try when I get back to my laptop.ThanksSarah

Sarah82 · May 26, 2010

Hi Guys,Made the suggested changes. But now it is showing a scrollbar on IE and Firefox, when you scroll down there is no content (I do not want content).Cheers

thescientist · May 26, 2010

Hi Guys,Made the suggested changes. But now it is showing a scrollbar on IE and Firefox, when you scroll down there is no content (I do not want content).Cheers

which changes? So are you saying it is still a long box with no content at the bottom?

Sarah82 · May 26, 2010

which changes? So are you saying it is still a long box with no content at the bottom?

YeahI removed the #wrapper height restriction and I changed the multiple duplications of the navigation just for easier reading. Still a long box with no content at the bottom

Sarah82 · May 26, 2010

RESOLVED :)If anyone is interested....I have changed the position:relative; to position:float;set the margin-top and margin:left/right differently to set it in the position I need it.Scrollbar now gone.Thanks all for your help though..... much appreciated.

ShadowMage · May 26, 2010

I have changed the position:relative; to position:float;

There is no position: float; :)If setting it to position: float has fixed the problem, you can just remove that line since the browser is ignoring it anyway.

Sarah82 · May 26, 2010

Ah right,Changed it completely now, as text was not aligning properly due to the float properties. Hopefully this will work and I can post up the outcome if it does.

dsonesuk · May 26, 2010

Well, this identifies the problem in using positioning for layout, as soon as you use a invalid value, that the browser does not recognise, position is ignored, and your problem is fixed. you should have used float, along with margin, padding etc. Using position causes more problems than their worth.

Sarah82 · May 26, 2010

Does that apply for all position properties. ie - position:fixed, position:relative etc etc

ShadowMage · May 26, 2010

Does that apply for all position properties. ie - position:fixed, position:relative etc etc

Generally, yes, position should be avoided. Obviously there are situations where it could/should be used, but in general it's best to avoid positioning.

Sarah82 · May 26, 2010

Generally, yes, position should be avoided. Obviously there are situations where it could/should be used, but in general it's best to avoid positioning.

So what should you use instead of the position? Sorry that was the way I was taught.I understand that there are times were it is necessary to use it i.e.#wrapper {margin:0 auto;width:800px;position:relative;}for centering to the screen etc

dsonesuk · May 26, 2010

very rarely use positioning, used position: fixed once, not supported in ie6, had to use position absolute with javascript, to get it to finally work correctly, using positioning relative/absolute for page layout never ever hardly use, once used for a map to position text links, relating to country's, and that's about it!.

Sarah82 · May 26, 2010

So how would you code this #PageInfo { font-family:Verdana, Geneva, sans-serif; font-size:11px; position:relative; text-align:justify; height:360px; width:550px; top: 130px; left:200px; background-color:#009;}without using the position element, and so it stayed in the exact place when the browsers size was minimized?Just to give me an example. For the records, i do not know and have never touched javascript.

ShadowMage · May 26, 2010

So what should you use instead of the position? Sorry that was the way I was taught.I understand that there are times were it is necessary to use it i.e.#wrapper {margin:0 auto;width:800px;position:relative;}for centering to the screen etc

Actually for centering you don't need position: relative. This will work just fine:

#wrapper {   width: 800px;   margin: 0px auto;}

So how would you code this #PageInfo { font-family:Verdana, Geneva, sans-serif; font-size:11px; position:relative; text-align:justify; height:360px; width:550px; top: 130px; left:200px; background-color:#009;}without using the position element, and so it stayed in the exact place when the browsers size was minimized?Just to give me an example. For the records, i do not know and have never touched javascript.

Depends on what it is and what you need to do with it. Margins might work:

#PageInfo {	font-family:Verdana, Geneva, sans-serif;	font-size:11px;	text-align:justify;	height:360px;	width:550px;	margin-top: 130px;	margin-left:200px;	background-color:#009;}

But it may also be possible that you need to have positioning. For example, if this were a popup tooltip.EDIT:Just to give an example of the wrong way, I have seen a lot of people use absolute positioning for headers, footers, and navigation menus. The proper way to position those types of things is with float, clear, margin, and padding.Wrong:

#content {   margin-left: 450px;}#nav {   position: absolute;   left: 0px;   width: 445px;}

Right:

#content {   margin-left: 5px;}#nav {   width: 445px;   float: left;}

Sarah82 · May 26, 2010

that bit of code is for the main text of the site, I only need it to stay in position and be readable. no fancy bits added at all, except a few images in between paragraphs.thanks for all this help very useful!

Firefox Scrollbar no Content?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived