Sign in to follow this  

[web] A weird CSS problem

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

If you intended to correct an error in the post then please contact us.

Recommended Posts

I use the following html code for a navigation bar:
<div id="sidebar">
  <div id="section1">
    <h1>section 1</h1>
    <ul>
      <li>link one</li>
      <li>link two</li>
    </ul>
  </div>
  <div id="section2">
    <h1>section 2</h1>
    <ul>
      <li>link one</li>
      <li>link two</li>
    </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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites
Quote:
Original post by CoffeeMug
Looks 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.

Share this post


Link to post
Share on other sites

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

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this