Jump to content
  • Advertisement
Sign in to follow this  
CoffeeMug

[web] A weird CSS problem

This topic is 4672 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
Advertisement
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
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 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
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 this post


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

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!