<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>
[web] A weird CSS problem
Author
I use the following html code for a navigation bar:
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]
Author
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.
Author
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;}
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.
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.
Author
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.
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 ;)
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.
Take a look at http://www.jejik.com/dev/corners.html and view the source of the document. Try it out with various browsers.
Author
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.
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.
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
