MySQL_Narb Posted July 2, 2012 Share Posted July 2, 2012 As you can see, the border on the left side is not lined up properly with the bottom part of the navigation menu. Yet, the right half is perfectly fine. Is there a way to fix this? Here's my resources: CSS: .navbar{ float:left; width:22%; } #navbarbg{ text-align:center; vertical-align: top; margin-left:auto; margin-right:auto; width:114px; } .navbar ul{ list-style-type: none; padding: 0px; margin: 0px; margin-left:auto; margin-right:auto; } .navbar li{ text-align:left; margin:0px; padding:0px; background-image:url('../img/highscores/derp.png'); background-repeat:repeat-y; border-right:1px solid black; border-left:1px solid black; } HTML: <div class="navbar"> <div id="navbarbg"> <ul> <li> <a href="#">Overall</a></li> <li> <a href="#"><img src="../img/highscores/skills/attack.png">Attack</a></li> <li> <a href="#"><img src="../img/highscores/skills/defence.png">Defence</a></li> <li> <a href="#"><img src="../img/highscores/skills/strength.png">Strength</a></li> <li> <a href="#"><img src="../img/highscores/skills/hitpoints.png">Hitpoints</a></li> <li> <a href="#"><img src="../img/highscores/skills/ranged.png">Ranged</a></li> <li> <a href="#"><img src="../img/highscores/skills/prayer.png">Prayer</a></li> <li> <a href="#"><img src="../img/highscores/skills/magic.png">Magic</a></li> <li> <a href="#"><img src="../img/highscores/skills/cooking.png">Cooking</a></li> <li> <a href="#"><img src="../img/highscores/skills/woodcutting.png">Woodcutting</a></li> <li> <a href="#"><img src="../img/highscores/skills/fletching.png">Fletching</a></li> <li> <a href="#"><img src="../img/highscores/skills/fishing.png">Fishing</a></li> <li> <a href="#"><img src="../img/highscores/skills/firemaking.png">Firemaking</a></li> <li> <a href="#"><img src="../img/highscores/skills/crafting.png">Crafting</a></li> <li> <a href="#"><img src="../img/highscores/skills/smithing.png">Smithing</a></li> <li> <a href="#"><img src="../img/highscores/skills/mining.png">Mining</a></li> <li> <a href="#"><img src="../img/highscores/skills/herblore.png">Herblore</a></li> <li> <a href="#"><img src="../img/highscores/skills/agility.png">Agility</a></li> <li> <a href="#"><img src="../img/highscores/skills/thieving.png">Thieving</a></li> <li> <a href="#"><img src="../img/highscores/skills/slayer.png">Slayer</a></li> <li> <a href="#"><img src="../img/highscores/skills/farming.png">Farming</a></li> <li> <a href="#"><img src="../img/highscores/skills/runecraft.png">Runecraft</a></li> </ul> </div> <img src="../img/highscores/Bottomwithbg.png"> </div> Quote Link to comment https://forums.phpfreaks.com/topic/265118-navigation-border-on-left-side-is-off-by-two-pixels/ Share on other sites More sharing options...
anevins Posted July 2, 2012 Share Posted July 2, 2012 I assume you have the background image of the flag split into sections. You could add padding-left: 2 pixels to one of the containing elements, such as ul or divs, then margin-left: -2px. Quote Link to comment https://forums.phpfreaks.com/topic/265118-navigation-border-on-left-side-is-off-by-two-pixels/#findComment-1358676 Share on other sites More sharing options...
MySQL_Narb Posted July 3, 2012 Author Share Posted July 3, 2012 I assume you have the background image of the flag split into sections. You could add padding-left: 2 pixels to one of the containing elements, such as ul or divs, then margin-left: -2px. .navbar ul{ padding-left: 2px; margin-left: -2px; list-style-type: none; padding: 0px; margin: 0px; margin-left:auto; margin-right:auto; } Added that, but it didn't seem to change a thing at all. :/ Quote Link to comment https://forums.phpfreaks.com/topic/265118-navigation-border-on-left-side-is-off-by-two-pixels/#findComment-1358808 Share on other sites More sharing options...
anevins Posted July 3, 2012 Share Posted July 3, 2012 You may need to also increase the width of #navbarbg Quote Link to comment https://forums.phpfreaks.com/topic/265118-navigation-border-on-left-side-is-off-by-two-pixels/#findComment-1358811 Share on other sites More sharing options...
anevins Posted July 3, 2012 Share Posted July 3, 2012 Do you have an on-line version that you could show us? Quote Link to comment https://forums.phpfreaks.com/topic/265118-navigation-border-on-left-side-is-off-by-two-pixels/#findComment-1358813 Share on other sites More sharing options...
Drummin Posted July 5, 2012 Share Posted July 5, 2012 I think it's the borders messing it up. Also being an image background, I think a width should be defined. Also 0 is not defined with px, just 0. You could try a padding of 1 OR a margin of -1. .navbar li{ text-align:left; margin:0 -1px; padding:0px; background-image:url('../img/highscores/derp.png'); background-repeat:repeat-y; border-right:1px solid black; border-left:1px solid black; } Quote Link to comment https://forums.phpfreaks.com/topic/265118-navigation-border-on-left-side-is-off-by-two-pixels/#findComment-1359482 Share on other sites More sharing options...
Mahngiel Posted July 6, 2012 Share Posted July 6, 2012 You need to either increase the width of #navbarbg or decrease the width of your footer image. Quote Link to comment https://forums.phpfreaks.com/topic/265118-navigation-border-on-left-side-is-off-by-two-pixels/#findComment-1359550 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.