gatormancl Posted August 24, 2011 Share Posted August 24, 2011 So i have this problem where my active page link has a blue top border. It looks fine but ther is an issue i can't get my finger on where the text would align itself to the left and the border extends beyond the width of the text. Ive tried setting text align to center, a transparent border left, and tried stying the li to inline-block with no luck. Some help would be appreciated.here is the illustration in two dif browsers. i'd like to have the border centered over the text instead of like this:IEthis browser renders it better but you can still see the border hangs over the right side some.Webkit Link to comment Share on other sites More sharing options...
Drycodez Posted August 24, 2011 Share Posted August 24, 2011 <span style="display:inline-block; border-top:2px solid blue; padding:0px 10px">OVERLINED TEXT</span> Link to comment Share on other sites More sharing options...
gatormancl Posted August 24, 2011 Author Share Posted August 24, 2011 <span style="display:inline-block; border-top:2px solid blue; padding:0px 10px">OVERLINED TEXT</span> thats about what i have for the list item. heres my code. <nav> <ul> <li><a href="home.html">HOME</a></li> <li><a href="trailers.html" rel="tag">TRAILERS</a></li> <li class="active"><a href="gallery.html">GALLERY</a></li> </ul> </nav> li {list-style: none;} nav li { display: inline; font-size: 1.2em; margin: 0 12px;}ive set the li to display: inline block with no luck Link to comment Share on other sites More sharing options...
Drycodez Posted August 24, 2011 Share Posted August 24, 2011 <nav> <ul> <li><a href="home.html">HOME</a></li> <li><a href="trailers.html" rel="tag">TRAILERS</a></li> <li class="active"><a href="gallery.html">GALLERY</a></li> </ul> </nav> li {list-style: none;} nav li { display: inline; font-size: 1.2em; margin: 0 12px;} there is an erorr in ur CSS! u told the browser to render nav li as inline and not inline-block. Link to comment Share on other sites More sharing options...
gatormancl Posted August 24, 2011 Author Share Posted August 24, 2011 ok I think i see where my problem is. Applying the border to the LI was the issue because it will take the width of the LI, and not my A tag. I've edited my code so that it takes precedence on the anchor tag and not the LI...previous.active { border-top: 2px solid #777777; color: #488FCD; text-shadow: 0 0 24px #0099FF;}edited.active a { border-top: 2px solid #777777; color: #488FCD; text-shadow: 0 0 24px #0099FF;} Link to comment Share on other sites More sharing options...
gatormancl Posted August 24, 2011 Author Share Posted August 24, 2011 <nav> <ul> <li><a href="home.html">HOME</a></li> <li><a href="trailers.html" rel="tag">TRAILERS</a></li> <li class="active"><a href="gallery.html">GALLERY</a></li> </ul> </nav> li {list-style: none;} nav li { display: inline; font-size: 1.2em; margin: 0 12px;} there is an erorr in ur CSS! u told the browser to render nav li as inline and not inline-block.the reason i declared "nav li" inline is because LIs are Block level elements. I'm using a horizontal navigation, so i set "nav li" to inline. I feel that's the best approach. @O. Samuel Why are you suggesting setting it to inline-block? Link to comment Share on other sites More sharing options...
Drycodez Posted August 24, 2011 Share Posted August 24, 2011 Oopse! I thought you said you want it to be alined to the center, while the top-border will be longer than the text (just like the one demostrated in the pix you posted)! I guess i mis-understood you! Lol... Link to comment Share on other sites More sharing options...
gatormancl Posted August 24, 2011 Author Share Posted August 24, 2011 haha no prob. I was trying to figure out why the border was hanging over to the right when i had text-align set to center. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.