Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Another problem with border-bottom-style (works in Firefox, not in IE7 1

Status
Not open for further replies.
Gert74

Gert74

Technical User
Jan 26, 2001
48
NL
Hi,

Since I was helped so well with my last question, I'm hoping to solve this problem too with a little help. My mane navigation is coded like this (html):
Code: 
	<div id="header">
             <ul>
              <li>home</li>
              <li><a href="/portfolio.php">portfolio</a></li>
              <li><a href="/over-mij.php">over mij</a></li>
              <li><a href="/werkwijze.php">werkwijze</a></li>
              <li><a href="/prijzen.php">prijzen</a></li>
              <li><a href="/contact.php">contact</a></li>
          </ul>
    </div>

The relevant styles in the stylesheet:
Code: 
		#header ul {margin-left:490px;}
		#header li {float:left;color:#FFFFFF;list-style:none;font-size:14px;margin-right:10px;margin-top:115px;font-weight:bold;}
		#header li a {color:#FFFFFF;text-decoration:none;border-bottom-style:dotted; border-bottom-width:1px; border-bottom-color:#FFFFFF;}
		#header li a:hover {color:#FFFFFF;text-decoration:none;border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#FFFFFF;}

A dotted underline is visible in Firefox but isn't in IE7. Any thoughts?

Gert

Gert
 
Sort by date Sort by votes
internet explorer is a bitch i hate it lol...

your code looks fine to me

have you tried it using blocked names for colors...

like...

{border-bottom: 1px dotted white;}
 
Upvote 0 Downvote
I just tried blocked names for colors, but no luck :-(

Someone else maybe.

Just to be complete, the header-div is surrounded by a div called wrapper.


Gert
 
Upvote 0 Downvote
Not sure if you have this solved yet or not, but here was the problem. Anchors are inline elements, so in IE they can't have borders. To solve that, we give the anchor tags display:block, and float them left.

Code: 
<style type="text/css">
#header ul {
   margin-left:490px;
}

#header ul li {
   float:left;
   color:#FFFFFF;
   list-style:none;font-size:14px;
   margin-right:10px;
   margin-top:115px;
   font-weight:bold;
}

#header ul li a {
   display:block; 
   float:left;
   text-decoration:none;
   color:#FFFFFF; 
   border-bottom-style:dotted; 
   border-bottom-width:1px; 
   border-bottom-color:#FFFFFF;
}

#header ul li a:hover {
   color:#FFFFFF;
   text-decoration:none;
   border-bottom-style:solid; 
   border-bottom-width:1px; 
   border-bottom-color:#FFFFFF;
}

</style>

[monkey][snake] <.
 
Upvote 0 Downvote
Anchors are inline elements, so in IE they can't have borders.
Click to expand...

Huh? I get borders on links in IE 6 on:w3C tryit css_text-decoration

using:
Code: 
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none;
border-bottom: 1px dotted black;}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<p>Testing <a href="[URL unfurl="true"]http://www.w3schools.com/default.asp">This[/URL] is a link</a> links</p>
</body>

</html>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
@monksnake: I do not fully inderstand why the same kind of code already worked within another div, but you solved my problem. Thank you very much!

Gert
 
Upvote 0 Downvote
me said:
Anchors are inline elements, so in IE they can't have borders.
Click to expand...

Apparently that isn't true. Let me rephrase.

For some reason, anchors within unordered lists don't show borders when the list items are floated.

Here is a test.

I'm sorry I misfed information, truth is I don't know what the hell IE ever does, perhaps I said that because I generalized a situation.

Code: 
<html>
<head>
<style type="text/css">
a {
text-decoration: none;

border-bottom: 1px solid black;
}

li {float:left}
</style>
</head>
<ul>
<li>
<a href="[URL unfurl="true"]http://www.w3schools.com/default.asp">This[/URL] is a link</a> 
</li>
</ul>
</html>


And @Gert: [cheers]

[monkey][snake] <.
 
Upvote 0 Downvote
It has to do with the default padding differences between browsers for the <li> tag. To see what I mean, try:
Code: 
<html>
<head>
<style type="text/css">
a {
text-decoration: none;

border-bottom: 1px solid black;
}
li {float:left ; [COLOR=blue][b]padding-bottom: 1px;[/b][/color] }
</style>
</head>
<ul>
<li>
<a href="[URL unfurl="true"]http://www.w3schools.com/default.asp">This[/URL] is a link</a> 
</li>
</ul>
</html>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top