11 replies to this topic

[Duke]

Hello masters.

Got a wee problem here. These is a fairly simple navigation using lists with background images.

HOWEVER

IE7 (not sure about 8) throws a spaz at this and for the life of me I cannot find a way around it.

Firefox, Opera and Chrome all show it nice-like

IE7:


Chrome:

#navigation li a {
		width: 176px;
		height: 100px;
		background: url(img/navbutton.png) no-repeat;
		color: #c7c7c7;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 18px;
		letter-spacing: 12px;
		text-align: center;
		text-decoration: none;
		margin-right: 0;
		display: block;
		float: left;
	}
		#navigation li a:hover {
			background: url(img/navbuttonh.png) no-repeat;
			color: #FFF;
		}

Anyone got any ideas?

Edited by Duke, 02 October 2009 - 08:16 AM.

[Beowulf]

I've run into shit like this before. What's the HTML look like? And the nav li/ul elements?

Hard to tell from a screen shot and the anchor CSS alone.

[Duke]

<div id="navigation">
			<ul>			  
				<li><a href="#">Home</a></li>
				<li><a href="#">Factions</a></li>
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Forums</a></li>
				<li><a href="#">Crew</a></li>
			</ul>
		</div>

Lol. Like I said, complicated stuff

[Jeeves]

I'm always online, my kiwi friend.
Looks like the float, so try putting clear: none; on the <li>, or giving them a little space with margins.
And rule-of-thumb for IE8 is, if it works in everything else, it works. Can't do some fancy stuff but the layouts tend to hold out.

[Bart]

I think you need to apply float to the li, not the a in it.

[Beowulf]

I think you need to apply float to the li, not the a in it.

That's what I thought. I had a bug vaguely similar to that with IE7 a while back. Seems like IE still can't handle block level elements all that well...

[Duke]

I'm always online, my kiwi friend.
Looks like the float, so try putting clear: none; on the <li>, or giving them a little space with margins.
And rule-of-thumb for IE8 is, if it works in everything else, it works. Can't do some fancy stuff but the layouts tend to hold out.

But you weren't!

I think you need to apply float to the li, not the a in it.

Yep that got it.

Thank you all

[Bart]

That's what I thought. I had a bug vaguely similar to that with IE7 a while back. Seems like IE still can't handle block level elements all that well...

I don't think that it would have worked in a good browser. If I float something inside a block, it shouldn't be doing what it did and start semi-floating the containing block. Now that seems more like a bug. Haven't tested it though...

[Clement]

http://hosted.crea2clic.net/gaw/

Just grab the code...

Edited by TDP, 04 October 2009 - 11:03 AM.

[Duke]

Oh I love the communication. -.-

I had nearly finished too.

[Bart]

Nice communication

[Clement]

Nice communication

LOL, it's because I have too many things almost done, and not finished completly, and I hate to show unfinished work... Thus so many things are sleeping on my Hard Drive.