# [web] A weird CSS problem

This topic is 4822 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I use the following html code for a navigation bar:
<div id="sidebar">
<div id="section1">
<h1>section 1</h1>
<ul>
</ul>
</div>
<div id="section2">
<h1>section 2</h1>
<ul>
</ul>
</div>
</div>

My goal is to style it with CSS to create rounded corners. I apply a background image to #sidebar. This gives me rounded corners at the top. However, when I try to apply another background image at the bottom of #sidebar #section2 it appears that #section2 doesn't run all the way down to the end of #sidebar. I can see the image at the end of #section2 and then there's some more space after it (filled with background color of #sidebar). It doesn't appear to be a padding or margin issue. The interesting thing is that when I add a border with a single pixel width to #section2, the problem disappears (the space between the end of #section2 and #sidebar goes away). Of course the border screws up the look [smile] Does anyone have any idea of what I am doing wrong?

##### Share on other sites
Maybe paddings/margins on section1 are screwing things up for you? Could you post the CSS you are using? A screenshot would be nice as well BTW [smile]

##### Share on other sites
I know it's hard, sorry [smile] I have to get home from work to grab the css and the screenshot. I'll post it in the evening. Thanks for your help.

##### Share on other sites
Here's a link to the screenshots with and without borders. Below are relevant bits of css:
#navigation {	background: url(nav_top.gif) no-repeat top left;	background-color: #D7DEEB;	position: absolute;	top: 110px;	width: 190px;}#navigation #about {	background: url(nav_bottom.gif) no-repeat bottom left;	border-style: solid;	border-width: 1px;}

##### Share on other sites
Here is a quick solution. Not sure if it's what you are looking for.
Nav bar example
Just view the source in that page.

A tip is also to ad anti-aliasing to the picture making the corners smoother.

##### Share on other sites
That works, thank you very much. I don't particularly like adding markup to get the styling to work but I guess CSS isn't perfect.

##### Share on other sites
I'm sure there is a better way to do it without markup but this was just a quick fix. I'm a bit tired since it's 5 in the morning here and I should get some sleep ;)

##### Share on other sites
One way to fix this properly would be to use CSS3 markup. Ofcourse, IE won't show it so you would get square corners in that. But in FireFox and the like you can use the border-radius CSS property (-moz-border-radius in FireFox. Mozilla requires a -moz- prefix before some CSS3 properties that may change).

Take a look at http://www.jejik.com/dev/corners.html and view the source of the document. Try it out with various browsers.

##### Share on other sites
Looks like that CSS3 technique doesn't work in Opera either. I suppose it doesn't like the 'moz' prefix [smile]

One would think that after sending a man to the moon and back, sending a robot to Mars, decoding human genome, and creating nuclear power plants, something trivial like document styling would be a solved problem. It's interesting how getting a few groups of people to cooperate turns out to be a much harder problem than all the problems above put together.

##### Share on other sites
Quote:
 Original post by CoffeeMugLooks like that CSS3 technique doesn't work in Opera either. I suppose it doesn't like the 'moz' prefix [smile]

In that case Opera just doesn't support it yet (I though it did....) because I added the CSS attribute without the -moz- prefix to that page as well.

1. 1
Rutin
39
2. 2
3. 3
4. 4
5. 5

• 12
• 17
• 12
• 14
• 9
• ### Forum Statistics

• Total Topics
633358
• Total Posts
3011510
• ### Who's Online (See full list)

There are no registered users currently online

×