Issues with Rounded Corners

HTML & CSS
1

Hello everyone. I have been looking for an answer to this question for the past few days but I just can’t seem to figure out what I am doing wrong. It is a really basic issue it seems but I have not the slightest idea how to correct it.

Basically, I have 8 images (I realize that you can decrease this number to lessen HTTP requests but I am not worried about that at this point in time) to create a box with rounded corners. Eight divs are used (inside a container div) to create a grid of these images (with 3 rows and 3 columns). I used absolute positioning to position each image correctly in the grid. The first two rows of divs display perfectly but the last one doesn’t.

I assume that this happens because I have not set a definite height or width to the container div. It re-sizes according to size of the browser window.

Below is a screenshot that shows exactly what happens: (grid lines show where the div borders are)

And here is my code:

HTML:

<div id="container">
<div class="window-topLeft"></div><div class="window-top"></div><div class="window-topRight"></div>
<div class="window-left"></div><div class="window-middle"></div><div class="window-right"></div>
<div class="window-bottomLeft"><div class="window-bottom"></div><div class="window-bottomRight"></div>
</div>

CSS:

#container { // containing div
	position: absolute;
	top: 100px;
	left: 10px;
	bottom: 50px;
	right: 400px;
}

.window-topLeft { // top-left div
	position: absolute;
	top: 0px;
	left: 0px;
	width: 6px;
	height: 6px;
	background: transparent url('topleft.png') repeat top left;
}

.window-top { // top-middle div
	position: absolute;
	top: 0px;
	left: 6px;
	right: 6px;
	height: 6px;
	background: transparent url('top.png') repeat bottom right;
}

.window-topRight { // top-right div
	position: absolute;
	top: 0px;
	right: 0px;
	width: 6px;
	height: 6px;
	background: transparent url('topright.png') repeat top right;
}

.window-left { // middle-left div
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 0px;
	width: 6px;
	background: transparent url('left.png') repeat bottom right;
}

.window-middle { // middle div
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 6px;
	right: 6px;
	background: transparent url('middle.png') repeat bottom right;
}

.window-right { // middle-right div
	position: absolute;
	top: 6px;
	bottom: 6px;
	right: 0px;
	width: 6px;
	background: transparent url('right.png') repeat bottom right;
}

.window-bottomLeft { // bottom-left div
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 6px;
	height: 6px;
	background: transparent url('bottomleft.png') repeat bottom left;
}

.window-bottom { // bottom-middle div
	position: absolute;
	bottom: 0px;
	left: 6px;
	right: 6px;
	height: 6px;
	background: transparent url('bottom.png') repeat bottom right;
}

.window-bottomRight { // bottom-right div
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 6px;
	height: 6px;
	background: transparent url('bottomright.png') repeat bottom right;
}

Any help would be greatly appreciated!

2

Have you tried turning borders off for each div?

3

After quickly glancing over your css rulesets, I noticed you’re using two contradicting properties [right | left] simultaneously.

You must choose one or the other.

4

That isnt contradictory lol :slight_smile:

5 
#top_menu ul li a{float:left}
6

So you’re saying this is correct?

.window-middle { // middle div
	position: absolute;
	top: 6px; /* */
	bottom: 6px; /* */
	left: 6px;/* */
	right: 6px;/* */
	background: transparent url('middle.png') repeat bottom right;
}

One or the other should be used /* */

Variations:
top left
top right

bottom left
bottom right

7

You can use both :slight_smile:

8

AFAIK, when declaring the width/height property in the same ruleset with position absolute:

left will override right
top will override bottom

If the width/height is not explicitly stated in the ruleset, then you may include top/bottom, right/left.

I just realized that the OP’s example is correct, as I overlooked it and just assumed :confused:

9

Thank you very much everyone for all your help! Unfortunately, it still isn’t working.

By default borders aren’t displayed for divs in any case but I did add “border-style: none;” to the divs to see what would happen but this (as expected) had no effect. I also tried setting the border style to solid and the border width to 1. Again, this did not solve the problem but if you are interested in how it looks after applying these properties, here is a screenshot: (note that all divs including the containing div have a borders around them)

450×180 47.8 KB

Was that directed at me or in response to cooper.semantics? If it was for me, I am not quite sure what you mean. Could you please elaborate?

Yeah, the reason I am using left and right properties instead of specifying the width and height of the containing div is that I need the div to re-size depending on the size of the window. I think that this is what is causing the issue with the positioning of the last row of divs.

10

First, comments in css is not the same as in javascript. :slight_smile:

It should be:


.window-right { [COLOR="Red"]/*[/COLOR] middle-right div [COLOR="Red"]*/[/COLOR]

The cause to the bottom borders not showing would be the missing end tag:

<div class="window-bottomLeft">[COLOR="Red"]</div>[/COLOR]

(If you care about IE6, it needs lengths as it doesn’t support dimensions by left-right or top-bottom.)

11

What about using transparent PNG? It will be a single image.

12

Wow. I feel extremely stupid now! :stuck_out_tongue: Thanks for pointing that out!

I don’t know why I did that for the CSS comments. They aren’t in my actual code (I just added them for some additional explanation) which is probably why I didn’t notice.

As for the ending div tag: Wow. Just wow. I can’t tell you how long I sat there staring at that code trying to figure out what exactly I did wrong. :lol: Oh well, now I can continue my project!

Thanks again to everyone that contributed and helped me find the solution to my problem. I have been truly overwhelmed by how many people pitched in to help. I am glad I stumbled upon this community. Thank you! :slight_smile:

13

It’s quite alright :slight_smile:

Sorry about that, I had that code from a different thread and I guess somehow it got onto this thread by mistake. I thought I deleted it when I posted but I guess it didn’t happen :confused:

Glad everything is sorted :slight_smile:

14

Not a problem! Thanks for your help! :smiley: