Jump to content
Sarah82

Firefox Scrollbar no Content?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.:)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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"><!--body { font-family:Verdana, Geneva, sans-serif; color:#FFF; border:none; background-color:#000; margin: 0 auto;}#Wrapper { height: 600px; width: 800px; margin: 0 auto; background-image:url(Images/Background%20images/aboutus.png); background-repeat:no-repeat; position:relative;}#Logo { position: relative; border: none; background-image: url(Images/Misc/gold%20logo.png); background-repeat: no-repeat; height: 89px; width: 281px; top:5%; left:60%;}#PageHeader { position:relative; border:none; background-image:url(Images/Page%20Headers/About%20us.png); background-repeat:no-repeat; height:26px; width:215px; left:10%;}#Navigation { position: relative; border: none; height: 350px; width: 153px; top: 10%; left: 10%;}.home:visited { background-image: url(Images/Navigation%20Bar/homewhite.png); height: 18px; width: 49px; display: block; background-repeat: no-repeat;}.home:hover { background-image: url(Images/Navigation%20Bar/homegrey.png); height: 18px; width: 49px; display: block; background-repeat: no-repeat;}.home:active { background-image: url(Images/Navigation%20Bar/homegey.png); height: 18px; width: 49px; display: block; background-repeat: no-repeat;}.home:link { background-image: url(Images/Navigation%20Bar/homewhite.png); height: 18px; width: 49px; display: block; background-repeat: no-repeat;}.about:visited { margin-top: 30px; background-image: url(Images/Navigation%20Bar/aboutusgrey.png); height: 18px; width: 76px; display: block; background-repeat: no-repeat;}.about:hover { margin-top: 30px; background-image: url(Images/Navigation%20Bar/aboutusgrey.png); height: 18px; width: 76px; display: block; background-repeat: no-repeat;}.about:active { margin-top: 30px; background-image: url(Images/Navigation%20Bar/aboutusgrey.png); height: 18px; width: 76px; display: block; background-repeat: no-repeat;}.about:link { margin-top: 30px; background-image: url(Images/Navigation%20Bar/aboutusgrey.png); height: 18px; width: 76px; display: block; background-repeat: no-repeat;}.future:visited { margin-top: 20px; background-image: url(Images/Navigation%20Bar/thefutureexperiencewhite.png); height: 35px; width: 107px; display: block; background-repeat: no-repeat;}.future:hover { margin-top: 20px; background-image: url(Images/Navigation%20Bar/thefutureexperiencegrey.png); height: 35px; width: 107px; display: block; background-repeat: no-repeat;}.future:active { margin-top: 20px; background-image: url(Images/Navigation%20Bar/thefutureexperiencegrey.png); height: 35px; width: 107px; display: block; background-repeat: no-repeat;}.future:link { margin-top: 20px; background-image: url(Images/Navigation%20Bar/thefutureexperiencewhite.png); height: 35px; width: 107px; display: block; background-repeat: no-repeat;}.gallery:visited { margin-top: 30px; background-image: url(Images/Navigation%20Bar/gallerywhite.png); height: 18px; width: 60px; display: block; background-repeat: no-repeat;}.gallery:hover { margin-top: 30px; background-image: url(Images/Navigation%20Bar/gallerygrey.png); height: 18px; width: 60px; display: block; background-repeat: no-repeat;}.gallery:active { margin-top: 30px; background-image: url(Images/Navigation%20Bar/gallerygrey.png); height: 18px; width: 60px; display: block; background-repeat: no-repeat;}.gallery:link { margin-top: 30px; background-image: url(Images/Navigation%20Bar/gallerywhite.png); height: 18px; width: 60px; display: block; background-repeat: no-repeat;}.testimonials:visited { margin-top: 30px; background-image: url(Images/Navigation%20Bar/testimonialswhite.png); height: 18px; width: 107px; display: block; background-repeat: no-repeat;}.testimonials:hover { margin-top: 30px; background-image: url(Images/Navigation%20Bar/testimonialsgrey.png); height: 18px; width: 107px; display: block; background-repeat: no-repeat;}.testimonials:active { margin-top: 30px; background-image: url(Images/Navigation%20Bar/testimonialsgrey.png); height: 18px; width: 107px; display: block; background-repeat: no-repeat;}.testimonials:link { margin-top: 30px; background-image: url(Images/Navigation%20Bar/testimonialswhite.png); height: 18px; width: 107px; display: block; background-repeat: no-repeat;}.terms:visited { margin-top: 30px; background-image: url(Images/Navigation%20Bar/termswhite.png); height: 18px; width: 52px; display: block; background-repeat: no-repeat;}.terms:hover { margin-top: 30px; background-image: url(Images/Navigation%20Bar/termsgrey.png); height: 18px; width: 52px; display: block; background-repeat: no-repeat;}.terms:active { margin-top: 30px; background-image: url(Images/Navigation%20Bar/termsgrey.png); height: 18px; width: 52px; display: block; background-repeat: no-repeat;}.terms:link { margin-top: 30px; background-image: url(Images/Navigation%20Bar/termswhite.png); height: 18px; width: 52px; display: block; background-repeat: no-repeat;}.contact:visited { margin-top: 30px; background-image: url(Images/Navigation%20Bar/contactuswhite.png); height: 18px; width: 90px; display: block; background-repeat: no-repeat;}.contact:hover { margin-top: 30px; background-image: url(Images/Navigation%20Bar/contactusgrey.png); height: 18px; width: 90px; display: block; background-repeat: no-repeat;}.contact:active { margin-top: 30px; background-image: url(Images/Navigation%20Bar/contactusgrey.png); height: 18px; width: 90px; display: block; background-repeat: no-repeat;}.contact:link { margin-top: 30px; background-image: url(Images/Navigation%20Bar/contactuswhite.png); height: 18px; width: 90px; display: block; background-repeat: no-repeat;}#Seperator { position: relative; border: none; height: 350px; width: 3px; top:-47%; left:27%;}#Links { height:22px; width:160px; position: relative; top:-45%; left: 75%;}#PageInfo { font-family:Verdana, Geneva, sans-serif; font-size:11px; text-align:center; position:relative; height:370px; width:550px; top:-116%; left:30%;}--></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>

Share this post


Link to post
Share on other sites

you are forcing height in your #Wrapper.

Share this post


Link to post
Share on other sites

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);}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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? Edited by thescientist

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. Edited by ShadowMage

Share this post


Link to post
Share on other sites

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.

Edited by Sarah82

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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!.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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;}

Edited by ShadowMage

Share this post


Link to post
Share on other sites

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!

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...