grabenair Posted May 6, 2011 Report Share Posted May 6, 2011 I used -moz-border-radius and -webkit-border-radius to round my corners. The box has scoll bars I can not figger out how to make it look right. In my code I used auto instead of scroll for I do not have a empty bar at the bottom. Here is the link to the page that I am working on. http://robertbonnerswebdesigns.com/bg_testing.htm what I am looking to do is make the corners rounded with the scroll bars. I am going to change the the page to html 5 also. My client does not care what it looks like in IE he said "I don't care about IE.. It can look crappy for all I care" Lets just say he hates IE. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 6, 2011 Report Share Posted May 6, 2011 The scroll bars are caused by setting overflow:auto and a height on #interview. Remove those two, and the scrollbars should go away. Quote Link to comment Share on other sites More sharing options...
grabenair Posted May 6, 2011 Author Report Share Posted May 6, 2011 (edited) Sorry I am not very good at explaining what i am trying to do. I want to keep the box at a fixed size, with the scroll bars. Because my client wants the background to stretch the way it does. The background that is there is for testing for now along with my css not in an external file. I do not want the background to move I am going to add parts of photos superimposed on top and need the content to be in a small box. What I mean is I need to take parts of photos like my clients head and put it in a div some where on the page on top of the background. So I have to have all the content on the page without having to scroll to see it all. Back to my prob I made the mistake of showing him the rounded corners, because I like the look, but that was before I added the content. My prob is that I can not figer out, or find any info on this, how to keep my scroll bars inside the rounded corners. I tried html5 also same prob. By the way I learned html5 from this site very good tut. I had fun working along. Edited May 6, 2011 by grabenair Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 6, 2011 Report Share Posted May 6, 2011 Well, the scroll bars can't be rounded, so there will be a gap on the right side between the scroll bars and the right border. Probably the easiest way to do what you have in mind is to use two divs -- one outside div that creates the rounded corners, and an inner div that includes the scroll bars and a narrower width than the outer div so the scroll bar doesn't conflict with the rounded corners. Quote Link to comment Share on other sites More sharing options...
grabenair Posted May 6, 2011 Author Report Share Posted May 6, 2011 Thanks, I did not even think of that. Do not know why because I have had to that before. Quote Link to comment Share on other sites More sharing options...
webzarus Posted May 8, 2011 Report Share Posted May 8, 2011 Actually, you can sytle the scroll bars using CSS. Width, color, transparency and you can replace the up and down arrow buttons with images... so technically you can "round" the scrollbars Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 9, 2011 Report Share Posted May 9, 2011 Actually, you can sytle the scroll bars using CSS. Width, color, transparency and you can replace the up and down arrow buttons with images... so technically you can "round" the scrollbars As far as I understand it, styling via CSS is limited to either IE specific styling, or to Webkit specific browsers (Safari/Chrome) that support modern specialized properties. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 6, 2011 Report Share Posted June 6, 2011 http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html You can try using this to replace the default scrollbars with javascript ones. Might work, might not, but worth a try? You decide Quote Link to comment Share on other sites More sharing options...
BeeDev Posted June 6, 2011 Report Share Posted June 6, 2011 Sorry looks like they updated the plugin, the new version is here: http://jscrollpane.kelvinluck.com/ Quote Link to comment Share on other sites More sharing options...
grabenair Posted June 6, 2011 Author Report Share Posted June 6, 2011 (edited) Thanks BeeDiv for the link. I will book that as I probly will use it in the future. What I did to salve my prob is here http://www.r obertbonnerswebdesigns.com/first_interview.htm I give all the credit to Ben. Don't forget to remove the space. I put a div inside of a div. Edited June 6, 2011 by grabenair Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.