/    Sign up×
Community /Pin to ProfileBookmark

DIV borders, Firefox = good, IE6 = bad

I’ve got a link list that is in <div>s and <ul>s for their layout. Every thing works great in Firefox but in IE the borders do not show up until you hover over the links. (I’m not talking about the link border, text-deco) Except for the first <li> which has it’s own class “first” ’cause I want border’s on top and bottom of it, those do not show up at all. I’m so sick of IE and these type of bugs. Anyway I appreciate the help, thanks in advance.

Link List:

[CODE]
<div id=”linkList”>
<!–extra div for flexibility –>
<div id=”linkList2″>
<!– If you’re wondering about the extra &nbsp; at the end of the link, it’s a hack to meet WCAG 1 Accessibility. –>
<div id=”subLink1″>
<h3 class=”subLink1Title”><span>Main</span></h3>
<!– list of links begins here. –>
<ul>
<li class=”first”><a href=”<% =vSiteLink %>default.asp”>Home</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>viewnews.asp”>News</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>viewdownloads.asp”>Downloads</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>viewpolls.asp”>Polls</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>contact.asp”>Contact Us</a>&nbsp;</li>
</ul>
</div>

<% If Session(“userGood”) = True then %>
<div id=”subLink2″>
<h3 class=”subLink2Title”><span>Members</span></h3>
<ul>
<li class=”first”><a href=”<% =vSiteLink %>members/”>My Homepage</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>members/projects.asp?mode=list”>My Projects</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>members/projects.asp?mode=search”>Search Projects</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=editprofile”>Edit Profile</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=changepassword”>Change Password</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=listusers”>Member List</a>&nbsp;</li>
<li><a href=”<% =vSiteLink %>members/users.asp?mode=search”>Search Members</a>&nbsp;</li>
</ul>
</div>

<% If Session(“userAdmin”) = 1 then %>
<div id=”subLink3″>
<h3 class=”subLink3Title”><span>Admin</span></h3>
<ul>
<li class=”first”><a href=”<% =vSiteLink %>members/admin/”>Admin Panel</a>&nbsp;</li>
</ul>
</div>
<% End If %>
<% End If %>
</div>
</div>
[/CODE]

CSS:

[CODE]
/* Nav —————————————————– */
#linkList {
position: relative;
top: 5px;
left: 0;
width: 175px;
}

#subLink1 ul, #subLink2 ul, #subLink3 ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 40px;
}

#linkList #subLink1 ul li {
font-size: 13px;
border-top: none;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}

#linkList #subLink2 ul li {
font-size: 13px;
border-top: none;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}

#linkList #subLink3 ul li {
font-size: 13px;
border-top: none;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}
#linkList ul li.first {
font-size: 13px;
border-top: 1px dotted #CCCCCC;
border-right: none;
border-bottom: 1px solid #CCCCCC;
border-left: none;
display: block;
padding: 5px 0;
}

#linkList ul li.newscat {
text-indent: 10px;
}

#linkList ul li a.newscat {
font-size: 12px;
color: #616161;
}

#subLink3 h3.subLink3Title {
font-weight:bold;
width: 125px;
height: 15px;
margin: 30px 0 5px 40px;
}

#subLink2 h3.subLink2Title {
font-weight:bold;
width: 125px;
height: 15px;
margin: 30px 0 5px 40px;
}

#subLink1 h3.subLink1Title {
font-weight:bold;
width: 125px;
height: 15px;
margin: 30px 0 5px 40px;
}
[/CODE]

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzAug 30.2007 — Try giving hasLayout to the <li>s. To understand what hasLayout is, read some of these: (I discourage the use of the underscore hack, which the first one recommends though.)

http://www.satzansatz.de/cssd/onhavinglayout.html

[url=http://dean.edwards.name/weblog/2005/06/layout/]On Having "Layout"[/url]

[url=http://msdn2.microsoft.com/en-us/library/bb250481.aspx]"HasLayout" Overview[/url]

[url=http://msdn2.microsoft.com/en-us/library/ms533776.aspx]hasLayout Property[/url]

[url=http://www.tanfa.co.uk/css/examples/haslayout/tripswitch-demo.asp]A TripSwitch? - set hasLayout to true without a dimension[/url]

[url=http://www.brunildo.org/test/InlineBlockLayout.html]IE/Win: inline-block and hasLayout[/url]

[url=http://www.sitepoint.com/forums/showthread.php?p=3208176#post3208176]Clarification of inline-block and hasLayout[/url]
Copy linkTweet thisAlerts:
@pizzabotauthorAug 31.2007 — Funny, I read up on this earlier today. I checked the code with Microsoft's Web Dev Toolbar, the value for hasLayout is set at -1, which if memory serves isn't that TRUE? I give it a try tomorrow I guess. Thanks. Oh and I do program for Firefox. I use IE as little as possible, IE tab when I have too, and only the real IE when it's a must.
Copy linkTweet thisAlerts:
@KravvitzAug 31.2007 — Yes, for hasLayout the value -1 means the same as true.

I suggested it because I didn't see anything in the CSS rules you posted that would trigger hasLayout on those elements.
×

Success!

Help @pizzabot spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...