Jump to content

issue w/ borders and with text


Recommended Posts

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:IECapture.JPGthis browser renders it better but you can still see the border hangs over the right side some.WebkitCapture2.JPG

Link to post
Share on other sites
<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 post
Share on other sites

<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.

Edited by O. Samuel
Link to post
Share on other sites

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...Capture3.JPGprevious.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 post
Share on other sites
<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? Edited by gatormancl
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...