11 replies [Last post]
sanch3x
Offline
Enthusiast
Last seen: 9 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Hey guys,

I made a navigation bar using unordered lists. I decided to style my top list item and bottom list item with a background image to round out the square look. It works fine in FF but in IE I get a weird rectangular bar in the way.

To the left is in IE and to the right is in FF.

<ul>
		<li>
			<!--<span>This is the navigation.</span>-->
		</li>
		
		<REMOVED>

		<li>
			<!--<span>This is the end of the navigation.</span>-->
		</li>
	</ul>

And the CSS:

.topImage{
	width: 150px;
	height: 20px;
	background: url(../../images/ncb_nav_top.jpg) no-repeat;
}

.botImage{
	width: 150px;
	height: 20px;
	background: url(../../images/ncb_nav_bot.jpg)
				no-repeat;
}

My nav bar doesn't spill when it expands/collapse and all my widths are tailored to fit the padding/margin/borders.

Thanks!

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 16 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

&lt;solved&gt; Weird behaviour in IE

Not tested.

Set the font-size in those elements to some small value, say 1px. IE preserves an inline-box tall enough for the line height of the font. Which means it expands the container enough to enclose it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 9 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&lt;solved&gt; Weird behaviour in IE

I thought that might of been the problem and so I had set the font-size to 0px but it didn't change anything. That was my initial idea, I just tried with 1px and it still doesn't work.

I've tried messing with the width thinking it might be spilling or something of the sort but I'm fairly certain it's not the problem. (After trying various alterations hehehe)

Do you need any extra information? Also, why do the boards hide all my html attributes, I noticed from my code that you can't even see the class of the tags...

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 16 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

&lt;solved&gt; Weird behaviour in IE

Tick the "Disable HTML in this post" box. Go to your profile and tick it as the default, and you won't have to worry about it on individual posts.

Can you give us a live link? Or at least go back to the OP and edit the code.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 9 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&lt;solved&gt; Weird behaviour in IE

<div id="navigation">
	<a name="startNavigation"></a>
	<ul class="level1">
		<li class="topImage">
			<!--<span class="invisibility">This is the navigation.</span>-->
		</li>
<li onClick="showhide('section1'); return false;" onkeypress="this.onClick()">
		Section 1
		</li>
		
		<li id="section1" class="showhide">
			<ul class="level2">
				<li>
				Link1
				</li>
				<li>
				Link2
				</li>
			</ul>
		</li>

<!-- REMOVED THE REST OF THE NAVIGATION -->

		<li class="botImage">
			<!--<span class="invisibility">This is the end of the navigation.</span>-->
		</li>
	</ul>
</div>

I'm sorry for adding all the css for the navigation but if you can find an error it'll probably be in there somewhere I can't see Wink

#navigation{
	float: left;
	position: relative;
	width: 150px;
	font-size: 14px;
}

#navigation ul.level1{
	list-style: none;
	list-image: none;
	margin: 0;
	padding: 0;
	width: 150px;
	background: #844AA3;
	text-align: left;
	font-weight: bold;
	color: #ffffff;
}

#navigation ul.level1 li
	{
	width: 148px;
	border: solid #fff 1px;
	border-top: 2px;
	}

#navigation ul.level1 li + li
	{
	border-top: none;
	}

#navigation ul.level2
	{
	position:relative;
	list-style: none;
	list-image: none;
	margin: 0;
	padding: 0;
	width: 148px;
	background:#DDF8F9;
	text-align: left;
	font-weight: normal;
	color: #000;
}

#navigation ul.level2 li
	{
	width: 148px;
	border: 0;
	border-bottom: #fff solid 2px;
	font-size: 12px;
	}
	
.showhide{
	display:none;
	width: 100%;
}

.topImage{
	width: 150px;
	height: 20px;
	background: url(../../images/ncb_nav_top.jpg) no-repeat;
	font-size: 1px;
}

.botImage{
	width: 150px;
	height: 20px;
	background: url(../../images/ncb_nav_bot.jpg) no-repeat;
	font-size: 1px;
}

.invisibility{
	display: none;
	font-size: 1px;
}

Seb

"Don't worry about Blank let me worry about Blank"

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 48 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;solved&gt; Weird behaviour in IE

Have you zeroed your margins and padding.

From the looks of things, there is some margin-bottom or padding-bottom affecting those two elements.

Possibly, its line-height. If you have set line-height to a fixed value (rather than em/ratio/%) IE will expand the element to fit the required line box. In which case add a line-height: 1px or something less than the required height.

/edit, actually line-height is more likely as FF would display any margins or padding, whereas it would overflow the line-height rather than expanding the element as IE does.

I take it your aware, IE doesn't support the sibling selector, "+".

sanch3x
Offline
Enthusiast
Last seen: 9 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&lt;solved&gt; Weird behaviour in IE

Chris..S wrote:

I take it your aware, IE doesn't support the sibling selector, "+".

Yes, thanks I was about to look into that Wink

As for the line-height... Did you change your mind or should I give a go (which I'll end up trying anyways hehehe). I did try playing with my height property to try and compensate for some of the borders I was adding but it never did anything.

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 16 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

&lt;solved&gt; Weird behaviour in IE

Chris makes a point. If you have set line-height somewhere, and it cascades to the li, it will have the same effect as the font-size in forming an inline-box.

It would be a Good Thing at this point if you could give us a live link. If of nothing other than a working model of the list. We need to find the root cause somewhere.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 9 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&lt;solved&gt; Weird behaviour in IE

I can't give you guys a live link since I'm working off of my machine but I would be glad to pm you guys the files archived together. I essentially have my index file, the css styles, and a small .js files with two functions.

However, I'll have to do this tomorrow as I'm about to miss my bus! Tongue

Thanks for the help guys.

Seb

"Don't worry about Blank let me worry about Blank"

sanch3x
Offline
Enthusiast
Last seen: 9 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&lt;solved&gt; Weird behaviour in IE

Sorry for double posting, just wanted to let you know that I PMed the skimmed version of the index files with the styles and js files. (Sorry to PM but it seems like the only way to give you the files)

Feel free to criticize how I've done my CSS. This is my second attempt at making site entirely in CSS and I think I've improved a lot since the first (having a serious divitis problem Wink) but I'd still appreciate any dirt you can sum up Tongue

Seb

"Don't worry about Blank let me worry about Blank"

sanch3x
Offline
Enthusiast
Last seen: 9 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

&lt;solved&gt;

I had read the the attachment upload script was broken but since it seems I was able to use it I decided to upload it... Here are the files for anyone who would like to take a minute and take a peek.

Thanks

<edit>

I think what's going on is that the background colour of the ul class is being inherited to the list. Even though the list is given it's own style it still keeps having the purple background.

</edit>

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 16 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

&lt;solved&gt; Weird behaviour in IE

Here is a minimal test case.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
        
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />

  <title>Title</title>
  <link href="styles.css"
        rel="stylesheet"
        type="text/css" />
</head>

<body>

  <div id="navigation">
    <ul>
      <li id="topImage">.</li>

      <li>What is the ...</li>

      <li>Library</li>

      <li id="botImage">.</li>

    </ul>
  </div>
</body>
</html>
====================
body{
    margin: 25px;
    }

#navigation{
    float: left;
    width: 150px;
    font-size; 14px;
    }

#navigation ul { 
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: bold;
    color: #fff;
    background-color: orange;
    }

#navigation li {
    margin: 1px 0 0;
    background-color: #844aa3;
    }

li#topImage { 
    background: url(images/ncb_nav_top.jpg) right bottom no-repeat;
    height: 20px;
    color: #844aa3;
    }

li#botImage{
    background: url(images/ncb_nav_bot.jpg) right top no-repeat;
    height: 20px;
    color: #844aa3;
    }

When making a test case, remove everything that doesn't affect the problem. That way, whatever's left must be involved. A lot of side issues are avoided. Once solved, you can add stuff back in a bit at a time until something else breaks, in which case, you know what caused the breakage, or all is well.

Note the removal of {position: relative;} from #navigation. That causes problems with borders and backgrounds of its descendents in IE. Use it only if you must.

As you noticed, move the background coloring to the real element that needs it.

IE drove me crazy with what it did with comments. W3C strongly suggests that empty block elements be ignored, so I put an empty comment in the top and bottom <li>s. IE put a 4px margin? (add a comment to one to see it in action) at the bottom of each. I ended up putting a dot in the li, hiding it by giving it the same color as the background. I didn't want to futz up the markup with hidden spans, etc.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.