Jump to content

Problem With Css On Asp.net Page


AndyMoireASP

Recommended Posts

HiI have page, which consists of a master page and of course content pages. My master page has a sticky header, footer and navigation bar, which sits on the left. To scroll the content pages, the div tag on the master page uses a css attribute of overflow-x:scroll.However, I have noticed that on some of pages the bottom of my scroll bar, the down arrow, is hidden or missing under my footer, making it impossible to see the bottom of the page, and also my navigation bar on the left moves out of position by going up the page when the mouse rolls over it. This does not happen other pages, where the entire scroll bar is visible and navigation bar stays where it should be.I am not sure whether this is anything to do with some of div tags not having the correct size, or whether something else is going on.Can someone please advise me on this?Thanks

Link to comment
Share on other sites

code or link?
Sorry, but there is no link, and my code is on another machine. What I can say is that the design is fluid in order to fit browser resolution. My footer uses the CSS attribute of clear:both.I know this is hard, but can you give me some ideas of any possible causes or directions of what might be causing the problem? With your answers I can then look at theses on Monday and report back.Thanks
Link to comment
Share on other sites

It sounds like you're using absolute positioning. There's hardly a way to fix that, actually.The only way is to give your header and footer percentage heights, subtract their height from 100 and apply that much percent height to the content box.

Link to comment
Share on other sites

It sounds like you're using absolute positioning. There's hardly a way to fix that, actually.The only way is to give your header and footer percentage heights, subtract their height from 100 and apply that much percent height to the content box.
Sorry for the delay in replying, but I now have the markup, albeit those relevant to the problem are. So, here it is:<body> <div id="fit"> <div id="header"> ---header info goes here <div id="links"> ---links goes here </div> <div id="timer"> ---clock goes here--- </div> </div> <div id="content"> <div id="menu"> ---menu goes here--- </div> ---content placeholder goes here--- <div id="footer"> ---label goes here </div> </div></body>CSS#body { width:100%; height:100%; top:0; right:0; left:0; bottom:0 }#html { top:0; width:100%; overflow:hidden; }#header { top:0; width:100%; min-width:40em; position:relative; }#fit { height:100%; }#footer { position:absolute; width:100%; min-width:10em; clear:both; }#content{ overflow-y:scroll; overflow-x:hidden; height:100%; width:100%; }#menu{ width:100%; height:100%; float:15%; position:relative; display:inline;}Can you see what the problem is?Thanks
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...