Sarah82 Posted May 25, 2010 Share Posted 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 Link to comment Share on other sites More sharing options...
real_illusions Posted May 25, 2010 Share Posted 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. Link to comment Share on other sites More sharing options...
Sarah82 Posted May 25, 2010 Author Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 25, 2010 Share Posted 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. Link to comment Share on other sites More sharing options...
Sarah82 Posted May 25, 2010 Author Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 25, 2010 Share Posted 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> Link to comment Share on other sites More sharing options...
Sarah82 Posted May 25, 2010 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Sarah82 Posted May 25, 2010 Author Share Posted 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"><!--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> Link to comment Share on other sites More sharing options...
thescientist Posted May 25, 2010 Share Posted May 25, 2010 you are forcing height in your #Wrapper. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 25, 2010 Share Posted 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);} Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted May 26, 2010 Hi guys thanks for thank will give it a try when I get back to my laptop.ThanksSarah Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted 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 Link to comment Share on other sites More sharing options...
thescientist Posted May 26, 2010 Share Posted 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).Cheerswhich changes? So are you saying it is still a long box with no content at the bottom? Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted 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 Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted 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. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 26, 2010 Share Posted 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. Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 26, 2010 Share Posted 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. Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted May 26, 2010 Does that apply for all position properties. ie - position:fixed, position:relative etc etc Link to comment Share on other sites More sharing options...
ShadowMage Posted May 26, 2010 Share Posted May 26, 2010 Does that apply for all position properties. ie - position:fixed, position:relative etc etcGenerally, yes, position should be avoided. Obviously there are situations where it could/should be used, but in general it's best to avoid positioning. Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 26, 2010 Share Posted 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!. Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted 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. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 26, 2010 Share Posted 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 etcActually 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;} Link to comment Share on other sites More sharing options...
Sarah82 Posted May 26, 2010 Author Share Posted 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.