|
HTML - Horizontal Scrolling With Fixed Header And Footer Problems With Older Browsers
Hello. First time here asking for help. Hope there's a solution!
The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped. The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms. On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen. So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation. On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE) The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly. In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE. Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up. The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer. Hope someone can help me out here! Cheers, Jason. Similar TutorialsOkay, so. Im completely new here! But I really need help fixing a tumblr theme code. The content/images is scrolling over/infront of the fixed header image, so what would be the code to fix that up? There is no CSS for the header as the original style didnt really include one. The HTML for the header is: <body> <head> <div style="width: 488px; height: 288px; margin: 0 auto; background: url(http://i56.tinypic.com/mwto2t.png) no-repeat top center fixed;"></div> <div id="yes"> <div id="center"> <div id="info"> <a href="/"></a><br><br> Thank you for any help greetings! i found an excellent scrolling marquee generator at: http://www.htmlbasix.com/marquee.shtml but i am having a problem. the scrolling marquee does not work in all browsers. for instance, check out the scrolling marquee in for "FREE MLS" at this url: http://www.phoenixfinder.com/ it scrolls perfectly in firefox, but it does not scroll and looks really bad in windows explorer and google chrome. i am pulling my hair out trying to resolve this. any advice as to what i am doing wrong will e greatly appreciated! please email advice to me at: backcountryjournal@hotmail.com thanks in advance! mike Hi, I have a website working perfectly in newer version of browsers. However, older version are not working properly. This is my website mis510proj . Any help? HTML Code: <!-- Page (2 columns) -->
<div id="page" class="box">
<div id="page-in" class="box">
<!-- Content -->
<div id="content">
<div class="article">
<h2><span><a href="#">Improvements for mis510proj :: Dataholics</a></span></h2>
<p class="info noprint">
<span class="date">2011-05-01 @ 22:46</span><span class="noscreen"></span>
</p>
<p>
<b>mis510proj</b> :: Our Golf Course DB is need to be update :)
We have recieved feedbacks from many golfers that they considered the quality of the grass and the house's beverage! and menu.
We are working on to get those info in order to meet golfer's expectation.<br>
</br>
Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a>
</p>
</div>
<div class="article">
<h2><span><a href="#">Check your golf course</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-27 @ 19:00</span><span class="noscreen"></span>
<!-- <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span>
<span class="user"><a href="#">My name</a></span><span class="noscreen">,</span>
<span class="comments"><a href="#">Comments</a></span> -->
</p>
<p>
<b>mis510proj</b> :: Now our golf recommendation engine is here! Just for your dreamed golf courses!
mis510proj :: You can simply click either "basic recommendation" or "advanced recommendation". You will find the golf courses!<br></br>
Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a>
</p>
</div>
<div class="article">
<h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span>
</p>
<img src="./img/mis510proj.png" alt="MIS510PROJ" /> <a href="http://128.196.27.167:8080/">MIS510PROJ</a>
<p>
<strong>MIS510PROJ :: The DATAHOLICS
We are here to help you live your dream of playing golf! As part of a course, Web Computing and Mining, we have designed a MIS510PROJ portal that provides golf course recommendations to interested golf players. The MIS510PROJ portal also has a strong business model to it through its linkage to the ebay website that permits buying of Golf equipment. The idea behind MIS510PROJ is novel since it is unique and contains a lot of unique features that many websites do not. So please have a look at the MIS510PROJ portal and tell us what you feel!!</strong>
</p>
</div>
<!-- Article -->
<div class="article">
<h2><span><a href="#">MIS510PROJ :: DATAHOLICS</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-21 @ 11:49</span><span class="noscreen">,</span>
</p>
<p>
<strong>We want to hear from you!</strong><br/>
<strong>Do you have any suggestions to make? Write back to us!</strong><br/>
</p>
<!-- begin htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
<script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24CLBUSgJb.7rZSJVxzsM8Z1"+"&opts=414&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com -->
</div>
<div class="article">
<h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span>
</p>
<p>
MIS510PROJ :: DATAHOLIC ,
Golf Course Recommendation.
What is your preferences when it comed to choose golf course?
</p>
</div>
<div class="article">
<h2><span><a href="#">MIS510PROJ :: DATAHOLIC</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-19 @ 02:00</span><span class="noscreen">,</span>
</p>
<p>
MIS510PROJ :: DATAHOLIC ,
we will tell the best golf courses for you by dedicated golfcourse recommending algorithm.
This website is part of MIS510PROJ.
</p>
</div>
<div class="article">
<h2><span><a href="#">Plan your Game Today!</a></span></h2>
<p class="info noprint">
<span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span>
</p>
<p>
Golf is one of the most stress relieving and enjoyable sports played in the world!
Come and choose a course closer to you!
We are here to help you out!
</p>
</div>
<!-- my addition for Amazon -->
<div class= "article">
<h2><span><a href= "equipment.jsp"> Buy Golf Equipment here!</a></span></h2>
<p class= "info noprint">
<span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span>
</p>
</div>
</div> <!-- /content -->
Thanks, DH Hi i was wondering if anyone can help me with making my page compatible with older browsers IE7+. My page is www.marksbodyshop.org The css is: Code: html,body {
height:100%;
margin:0;
background-color:#000;
background-image:url(../images/firstpage.gif),
url(../images/firstpage-backup-for-safari.gif); /* required by Safari */
background-size:100% 100%;
}
#container {
height:73%;
background-image:url(../images/update.png);
background-size:100% 100%;
}
#nav {
position:absolute;
padding:0;
margin:0;
list-style-type:none;
height:7%;
width:57%;
top:20%;
left:20%;
z-index:1;
}
#nav li {
width:16%;
margin:1%;
height:100%;
}
#nav a {
display:block;
width:100%;
height:100%;
outline:none;
text-indent:-9999px;
background-size:100% 300%;
}
#about {background-image:url(../images/aboutus.png);}
#about1 {background-image:url(../images/contactus.png);}
#about2 {background-image:url(../images/freelunch.png);}
#about3 {background-image:url(../images/map.png);}
#about4 {background-image:url(../images/meettheteambutton.png);}
#nav a:hover {background-position:0 -100%;}
#nav a:active {background-position:0 -200%;}
Hey all, I've been trying to fix up my carpet cleaning website. The bee.png image in the top left of my menu bar is giving me problems with older browsers & most hand-held devices, e.g., iTouch, cellphones, etc. Is there any kind of trick (hack) I could use so that it will properly align with all devices? Website: www.honeydocarpetcare.com Also, please let me know if you are noticing things that are out of place. If so, please tell me what browser and version you are using! Thanks all! Hi everyone, http://www.eveningtweed.com/laura At the above site, I've got a div called 'work' which needs to contain a long line of images which I want users to horizontally scroll through using the DIV scrollbar. I've looked through countless forum posts and solutions on Google but nothing works. Can anyone tell me why this won't scroll horizontally and how to achieve it? Current CSS for the DIV: Code: .work {
border:0px;
height:350px;
overflow-x:scroll;
overflow-y:hidden;
width:100%;
}
Thanks in advance, Jez. Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover I dont know how to explain it better but how do i do this http://www.target.com/Movies-MMB/b/r...ode=1259488011 so at the bottom of my page i can add 4 to 5 different products and allow for those left and right buttons show more... any direction would help thanks I want the side columns on my website, http://www.thethuglife.com to be fixed, like a frame, while scrolling. They contain my ads and I want my ads visible to the visitor at all times. How can I make these side columns fixed like a frame, but still centered vertically and horizontally on any viewing size? Any help would be appreciated. can someone outline the steps to making a page with a fixed background and a scrolling foreground such as can be found here? http://www.paul-wallas.co.uk/ i've looked at the code and what information i've found on the web but i don't see how it is done. tia, Hello, I have a demonstration site set up at: http://www.sikhfaith.com/demo The site works perfectly in Firefox 2.0. However, in Internet Explorer 7.0, there's a huge blank space on the right side of the page which causes IE to display a horizontal scrollbar. I haven't been able to pinpoint what is causing this. Any help would be appreciated. Thank you. I'm trying to get horizontal scrolling of images that scroll behind a block of fixed text. I attached a mock up. And here is one of the staging pages if you want to see the html/css. I'm trying to accomplish a "layered" effect of image gallery and text. As you can see in the mockup, the block of text has a transparent background to help this effect. I tried to do a hiden overflow for the horizontal navigation container and have the block of text be a container with a fixed position. But its a mess. Any advice on achieving this? **Edit: This site has the same kind of architecture I'm looking for - http://csaustodesign.com/work_ns.html I can't seem to figure out how this person did it though, their source code is a mess... I figured this out. Three hours of searching before posting, then 30 minutes later it is resolved. http://knexinnovation.net/store/ I thought that if your background is wider than the window, it won't create a scrollbar to show the full image. Or is this not the case? Currently it has a horizontal scroll bar for 1024px users. The footer image is actually the body { } background, aligned to the bottom center. Is there any way that I can set up a page with frames where the frames remain a fixed width and will stay that size even if the browser cannot show them in their entirety? This is a simplified version of what I'm trying to do (with two random sites in the frames for an example) <html> <frameset cols="800, 800"> <frame src="google.com"> <frame src="yahoo.com"> </frameset> </html> How that is working right now is that if you reduce the size of the browser then the frames also reduce in size so that they both remain on the page... I don't want this. I want the frames to remain the fixed width (800) and if the browser is not large enough to display them (<1600), I want it to have a scroll bar along the bottom to scroll further right to view them. I don't really ever use frames though, so I'm not quite sure if there's a command to throw in either frameset or frame tags or if there's something else I need to do. Thanks! Hi, I have a template in the making but i have got to a point now where the footer isnt working. I want the footer to stick to the bottom of the browser and for it to work when there is a small amount of content which doesnt require scrolling and also when scrolling is required. At the moment it works when scrolling isnt required but as you will see on my example below when scrolling happens the footer doesnt stay stuck to the bottom of the browser it just moves up with the rest of the site. Any ideas how to fix this? I have been testing in FF2 but i need it working in IE 6 + 7 + FF 2. The site is here any ideas or help would be great Cheers Evening one and all, I'm having a little problem. I've created a webpage that's 1280 pixels wide using HTML tables to structure my layout. I've tried viewing my page on a lower screen resolution - for example 800x600 but the page doesn't hold it's structure and allow me to view the page properly by placing a horizontal scroll bar at the bottom of the screen. Instead the browser squashes all the data to fit within the 800 pixel width of the screen. Is there some code I can insert in the page that commands the browser to display a scroll bar instead of squashing all the data to fit the 800 pixel width? I'm testing at the moment in Firefox 3.6.15 on Mac OSX 10.6.3. Thanks. I've seen on some sites that images show up within a block and they scroll left and right when user clicks a button. And many times, these are not flash files, but html, or xhtml or dhtml or asp or php or some other extensions. I am trying to create a database of images all with labels (multiple), so that I can pull all images of a label to a window and have them scroll right and left with buttons. does anyone here know how this may be done? Thanks Navs First of all im sorry if i double posted but i dunno what to search for and i tried lookin thru the forum b4 i posted .. Well, my problem is im a total beginner (noob) in html/css/javascript codin..but i was doin site to try coding..i divided my site into 4 main sections usin <div> as u can see in the pic (pic at end of ma post), but the my problem is i had to copy the codes of the header and the two menus in every page, then after endin it, i misspelled something in a menu..so had to change it in every page (about 20),so i wanted to make the header and menus each in a file and make them fixed, so i put each in a html and made an iframe and inserted and it worked but (i knw too many buts XD) the side menu was a spry menu..it cant go out of its frame so i had to make it expanded menu So,My question is i wanna do the spry menu..so is there any other way to make the side menu & header each in a document and link it to every page..so when i wanna change something..i can change from one document and it changes all, coz it seems tht iframes tht is the only thing tht gnna work. I knw i wrote alot..sorry >.<..well, i hope u cud help me out..thnx in advance |
|||||||