CSS - Rounded Scrollbar

Thanks for reading my question

Here is the link to the two pages in question.

http://www.pierced.ca/Kelly/cardsRound.htm http://www.pierced.ca/Kelly/indexRound.htm

I know my images for the rounded corners aren't round, that's not the problem. My problem is the positioning of the images.

When I view the pages using IE, the "Menu" images line up perfectly, and it's just the bl.jpg and br.jpg images on the "Info" section that don't.

When I view the pages using FireFox, the bl.jpg and br.jpg images on the "Menu" section are off.

Any words of wisdom to get both to work?

Thanks again,

Brad

What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial.

Am having a problem with turning a design into a tableless layout.
I've attached the part of the layout I'm trying to code and this is the code I'm using:

xhtml Code:
Original - xhtml Code <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div>

  
    <div class="content">
        <div class="bar">Devshed Rocks the socks of oneself</div>
        <div class="leftcon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
        esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, 
        consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lu ptatum zzril 
        delenit augue duis dolore te feugait nulla facilisi.</div>
        <div class="rightcon">Hey</div>
    </div>

And here is the css:

css Code:
Original - css Code .content { width:570px; float:right; margin-top:20px; background-color:#CCCCCC; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } .leftcon { width:450px; padding:5px; float:left; border-right:1px solid black; background-color:#FFFFFF; padding-left:15px; background-image:url(images/cornerbot.jpg); background-repeat:no-repeat; } .bar { background-color:#66CC00; font-size:12pt; padding:10px; padding-left:15px; background-image:url(images/corner.jpg); background-repeat:repeat-y; }

  

 .content {


 width:570px;


 float:right;


 margin-top:20px;


 background-color:#CCCCCC;


 font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;


 }


  


 .leftcon {


 width:450px;


 padding:5px;


 float:left;


 border-right:1px solid black;


 background-color:#FFFFFF;


 padding-left:15px;


 background-image:url(images/cornerbot.jpg);


 background-repeat:no-repeat;


 }


  


 .bar {


 background-color:#66CC00;


 font-size:12pt;


 padding:10px;


 padding-left:15px;


 background-image:url(images/corner.jpg);


 background-repeat:repeat-y;


 } 

The corner image simply won't line up with the bottom half of the corner which I have as the left floated background image. Anyone able to point out what I'm doing wrong or perhaps offer another solution?

Thanks

Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

I have copied this tutorial, but my divs are not showing rounded, but still square. http://www.sitepoint.com/article/ro...-css-javascript Tut link

Can anyone see what I've done wrong?

I have attached a screenshot as the webpage is located on a protected server. The header is what I'm trying to make round. I have stroked it in black to show you

My html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Test Rounded Div</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="container" align="center">
  <div class="header">
   <div>  <!-- upper left corner-->
     <div> <!-- bottom right-->
       <div> <!-- bottom left -->
         Header
       </div>
     </div>
   </div>
  </div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="footer">Footer</div>
 </div>
</body>
</html>

My CSS:

Code:

div.header {
  width: 200px;
  background: #4095BF url(img/blue_top_rt.gif) no-repeat top right;
}

div.header div {
  background: transparent url(img/blue_top_left.gif) no-repeat top left;
}

div.header div div {
  background: transparent url(img/blue_bottom_rt.gif) no-repeat bottom right;
}

div.header div div div {
  background: transparent url(img/blue_bottom_lt.gif) no-repeat bottom left;
  padding: 15px;
}

Hi:

I'm told that forms cannot have rounded corners and that tables can.

Question: How do you do it?

Hi, I'm still trying to learn CSS. Using CSS instead of tables really increases the versatility of the page, but, don't the graphics suffer? I'm trying to make a 3column layout which resizes according to the resolution. I've made it, but IMO it would look more appealing if I could make the corners curved as in... the menu box corners and the content space corners. Is there anyway to do this?

www . gameyin . com

It shows as the border image twice. Er...I mean the image is showing twice and no matter what I do I can't seem to get the bottom part to stretch more to meet the content. I don't want to try pixels though because that wouldn't be fluid : \. Any help?

I am writing in hopes someone can help me figure out some problems I am having. All problems occur on the following page: http://cbo4edu.org/newSite/home.html

PROBLEM #1
I cannot figure out why Column 3 is positioned outside the wrapper div. I need the solid black border to align with the other borders on the right-hand side.

PROBLEM #2
As you can see I am having trouble getting the rounded corner divs to display correctly in the 3rd column. Why are the top-right corners displaying the top-left? Why is the top edge of the lower rounded corner div absent? And why is the bottom-left corner have a blue line under it? I used the method presented he http://kalsey.com/2003/07/rounded_corners_in_css/

PROBLEM #3
I need to add a border between Column 1 & 2 and a border between Column 2 & 3. I have tried adding a border attribute to the CSS file but that does not display anything.


Any help on any of these problems are much appreciated.

I copy code to make a rounded corner and test it with my images

It is a mess as I get 1 image out of 4 displaying and i did get the names correct.

How do I assemble cut my image sizes for this? I create a rounded corner in Gimp and cut it up.

I am ANNOYED at the time spent doing this.
Images enclosed and here is code i use from

http://www.vertexwerks.com/tests/sidebox/

Code:

<html>
<head>

<style type="text/css">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

body { background-color:Green  }

.sidebox {
	margin: 0 10; /* center for now */
	width: 27em; /* ems so it will grow */
	background: url(wbright2.png) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(whright2.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(whleft2.png) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;

}
.boxbody {
	background: url(wbleft2.png) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}

</style >
<title>
</title>
</head>
<body><h1>It works!</h1>
<div class="sidebox">
	<div class="boxhead"><h2>Test Headline</h2></div>
	<div class="boxbody">
		<p>This is a short sample paragraph.</p>
		<p>And another onsdasdadsadsadsadsadsadsad
		asdsadadsaffffffffffffffffffffffffffffff dsdsf sdfdsf sdfdsf sdfsdf sdfsd 
		sdfffffe.</p>
	</div>
</div>
<br />

asSADSADSAD
<img src="whleft2.png" />

</body></html>

Hi all,

I would like to create a menu that has the following:
current - top left rounded corner, top right rounded corner and background of the same colour (see the below image for example).
These have to be in Validate CSS and without images
I have found the following but it is not a Validate CSS and those not work in IE

Any help please?

Underneath please find the following:
What I have found (not CSS Validate) Link for the webpage (work only in Firefox - rounded corners) Image (example) CSS (code) XHTML (code)
Thanks in advance

Ziffa27

1
Code:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;

2
http://www.amaze.com.mt/menu/index.html

3


4
Code:

html, body, header, menu, ul, li {
	margin: 0;
	padding: 0;
}

#header {
	background: #000000;
	height: 120px;
}

#menu {
	background: #000000;
	height: 40px;
	padding-left: 100px;
}

#menu ul {
	list-style: none;
}

#menu li {
	float: left; width: inherit;
	margin: 0 0.4em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 10px;
}

#menu li a {
	color: #999999;
	display: block;
	padding: 15px 10px;
	text-decoration: none;
}

#menu li a:hover {
	color: #FFFFFF;
}

#menu ul li.current a {
	background-color: #FFFFFF;
	-moz-border-radius-topleft: 5px;	/*work only in Firefox*/
	-moz-border-radius-topright: 5px;	/*work only in Firefox*/
	color: #000000;
}

#menu ul li.current a:hover  {
	color : #000000;
}

5
Code:

<html>
<head>
<title>Welcome to Amaze! - Menu</title>
<style type="text/css" media="all">@import url(style.css);</style>
</head>
<body>
	<div id="header">
	</div>
	<div id="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li class="current"><a href="#">Services</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
</body>
</html>

Thanks so much for taking the time to read my question.

I have a rounded corner that isn't working. For now, I have a red corner, so that it stands out and I know it's position.

I would like the right side to look the same as the left side of the contentheaderbox (this is where the page title goes like Home, or Contacts, or Site Map).

Not sure how to do this, I've run out of ideas. I have no where to post it, so I've attached the files.

Thanks for the help.

Brad

Working to set up a template that has containers with rounded corners WITH outlines. I have the round corners and sides...just can figure out how to add the top and bottom line to complete the container.

If I use a border-top it extends past the rounded corners.

Any help would be greatly appreciated

Link to the page in progress:

http://www.rustbug.com/test/journey-home-page.html

Here is my code:

Code:

<!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>Untitled Document</title>

<style type="text/css">
	      	body {color:#000000;background-color:#ffffff;background-attachment:fixed;font-family: Arial, Helvetica, sans-serif;line-height:1.25em;font-size:100%;}
			#wrapper {margin:0 auto;width:720px;background-color:#f6f5f3;padding-top:1em;padding-bottom:2em; overflow:hidden;}
			#container1 {float:left; display:inline; width:435px; height:auto; background-color:#FFF; border-top:1px #e3e2e1 solid; margin-left:1em; margin-bottom:1em;}
			#container2 {float:right; display:inline; width:235px; height:auto; background-color:#FFF; margin-right:1em;}
			p.roundcont { font-size:90%; margin:0 10px 0 10px; color: #999999;}			
			.roundtop { background: url(images/tr.gif) no-repeat top right;}
			.middle { border-left:1px #e3e2e1 solid; border-right:1px #e3e2e1 solid;}
			.roundbottom { background: url(images/br.gif) no-repeat top right;}
			img.corner { width: 8px; height: 8px; border: none; display: block !important;}


			
        </style>   


</head>

<body>

<div id="wrapper">
	<div id="container1">
    	<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
       	<div class="middle"><p class="roundcont">Hello</p></div>
        <div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
	</div>
    
    	<div id="container2">
    	<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
       	<div class="middle"><p class="roundcont">aasdf s asdf sdf sfsdfsdf asdf sdf. afas sdf sfsdf. adf asdf sdf .asdfsdfsdgfga fasdf adfdaf asdf a.</p></div>
        <div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
	</div>
    
    	<div id="container1">
    	<div class="roundtop"><img src="images/tl.gif" alt="" width="8" height="8" class="corner" style="display: none" /></div>
       	<div class="middle"><p class="roundcont">Hello</p></div>
        <div class="roundbottom"><img src="images/bl.gif" alt=""width="8" height="8" class="corner" style="display: none" /></div>
	</div>

</div>
</body>
</html>

I was looking for the best way to implement rounded corners for my website and its been difficult evaluating the different methods and deciding which way is the best way to go.

So far the mountaintop method looks the most promising. The idea is to create a transpatent gif with the corners of the image as a white mountain shape. When you make this the background of the CSS div, the color of the background offsets and creates the image of rounded corners.

I am having a small issue implementing that as well, for example, ive created two images one for the top and one for the bottom, but I am not quite sure how to implement it as you cannot specify two background images per CSS div.

Anyone have any thoughts on this?

OK so what i'm trying to do, obviously, is create a rounded box. I'm using 6 images and the thing is divided into 3 parts vertically (the top part, the content part and the bottom part). Those parts are divided into 3 parts as well (left corner part, looping background part and right corner part). It works like a charm in real browsers, but IE is screwing things up as always. To simplify things, i'll just illustrate the concept of the top part of the box.

Code:

<div id="thebox">
<div class="dbtopleft"><div class="dbtopright"><div class="dbtoploop"></div></div></div>
</div>

So we have a wrapping div that is, let's say, 500 pixels wide and inside we have the top part: topleft div contains a left corner image, topright div contains a right corner image and is padded 25 pixels (the width of the corner) left and right. The middle div (toploop) has a top looping picture and is, obviously, 25 pixels away from each side. Here's css illustrating that:

Code:

#thebox {
    position: absolute;
    left: 500px;
    top: 300px;
}
.dbtopleft {
    background: url(cb_tl.png) no-repeat;
    height: 25px;
}
.dbtopright {
    background: url(cb_tr.png) no-repeat top right;
    height: 25px;
    padding: 0 25px 0 25px;
}
.dbtoploop {
    background: url(cb_t.png) repeat-x;
    height: 25px;
}

So, as i've already mentioned, this thing works in normal browsers, but in ie it doesn't take the full width of the wrapper div. Instead it displays an ~50px box with both corners and the wrapper is ... well ... 500px. Does someone know of any hack to make this code work in stupid IE?

Update: if i specified the width of the wrapper, it would seem to work, but i don't want to do that, since the width may vary.