hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : IE7 UL Nav, want to underline each link, bottom border only as long as txt length
Reply

Forum Jump

IE7 UL Nav, want to underline each link, bottom border only as long as txt length

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 01-27-2011, 01:39 AM
damainman damainman is offline
Web Hosting Guru
 
Join Date: Nov 2003
Posts: 320
Question

IE7 UL Nav, want to underline each link, bottom border only as long as txt length


Greetings,

Okay so i came across an issue that is driving me crazy and I am guessing it is because I am just going about it the wrong way.

1. I have a nav setup in a normal UL.
2. With css I set the "li" element to have a bottom border.
3. The bottom border only extends enough to underline the contents inside the "li" tag.

4. I tried giving the li tag a width of 100% and a width of auto.

5. Because certain pages have different links, the UL for the nav is set to automatically size the width based on the dynamic contents inside. So the UL is always the correct width.

But the li is only the width of the content in the li, causing some links to have a wider bottom border. I want all the links in the list to have a bottom border with the width of the ul and not the li.

-----

Should i just nix the ul list, and use divs for each item or am i looking at this all wrong?

How can I set the width of the li to always be the width of the UL?

Thank you in advance for any advice and or comments to show me the right direction to proceed!



Sponsored Links
  #2  
Old 01-27-2011, 11:33 AM
damainman damainman is offline
Web Hosting Guru
 
Join Date: Nov 2003
Posts: 320
I found the solution... sort of ...

Below is a sample of how I am able to replicate the issue. It is a snippet of the css I am using with a jquery script but the code below is enough to duplicate the issue.

1. The issue only happens with IE7
2. If I remove "height: 20px;" from the ".sub ul li" class, it fixes the issue.... However I am not sure why it fixes the issue or why height causes the issue in the first place...

3. On my page I need the height in the ".sub ul li" because that UL is nested inside another "UL" which has a taller "li" height than the one I want to use in ".sub ul li"

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
.sub ul li.section_header{
    border-bottom:1px solid #ccc;
    margin-bottom:10px;
    padding-bottom:5px;
}

.sub ul{
    list-style: none;
    margin: 0; padding: 0;
    width:auto;
    float: left;
}

.sub ul li {
    width: auto; /*--Override parent list item--*/
    color: #ccc;
    padding-left:10px;
    padding-right:10px;
    display:block;
    float:none;
    height:20px;
}

</style>

<body>
    <div  class="sub">    
        <ul>
            <li class="section_header">test</li>
            <li class="section_header">test 2</li>
            <li class="section_header">test 123</li>
            <li class="section_header">test 12345</li>
            <li class="section_header">test 123456789</li>
        </ul>
    </div>
</body>
</html>
Thank you in advance for any comments and insight !!!

  #3  
Old 01-27-2011, 12:44 PM
damainman damainman is offline
Web Hosting Guru
 
Join Date: Nov 2003
Posts: 320
Found the answer with the assistance of someone on another site.

Their answer:

Quote:
Yes this is a bug in IE7 and when you apply the height to the list element you force haslayout (http://www.satzansatz.de/cssd/onhavinglayout.html) on the list element and IE7 (and 6) have a lot of bugs when list items hav a layout.

The only solution is remove the height and use either padding or line-height to make the height you need. You can negate the inherited height and turn off haslayout at the same time by using height:auto.
I was unable to get the li items to increase their height with a line-height(no matter what value I used it didn't change).. but was able to achieve the results with a bottom padding.

Sponsored Links
Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Border-Bottom On Hover - Avoid Content Shifting Jamie Harrop Web Design and Content 3 12-15-2010 09:27 PM
Border bottom hopesfall Programming Discussion 2 06-23-2008 04:23 PM
getting a nav header to expand length of page brad_the_beast99 Web Design and Content 2 04-15-2008 04:48 PM
CSS Help: Can't get border-bottom off of linked images Volconvo Web Design and Content 6 11-08-2005 12:51 PM
change border length wseyller Web Design and Content 2 01-28-2005 01:57 PM

Related posts from TheWhir.com
Title Type Date Posted


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?