Topic: Another CSS bug in IE? (Page 1 of 1)

I just lost my written post when my IE window suddenly disappeared so I'm going to make it a little shorter:

I've created a little CSS-only navigation and added 20 buttons to it to show you which strange things IE is doing with it: www.kussatz.com/asylum/cssnav1.html

All the buttons are using the same CSS classes, and as you might guess the text is intended to start at the same horizontal position in every line. But IE 6 moves it some more pixels to the left with every line I add while Opera 6 and Netscape 6.2 are displaying it without any problems.

Did anyone come across a similar 'effect' before and knows a way to get rid of this IE-only behaviour? Or did I overlook a strange mistake in the CSS code? I'd be happy about any help (of course!)

kuckus

I don't really see any problems. The Contacts are all lined up and then the sublinks are intented and they all line up with each other. Or am I misreading your problem

Are the sublinks supposed to be lined up with the main buttons?

Later,
C:\


~Binary is best~

You can't see it? That's strange. Which browser are you using?

Here's how I see it when I'm looking at it with IE6 / WinXP: www.kussatz.com/asylum/cssnav1.gif

Again, I don't have any problems looking at it with NN 6 or Opera...

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

kuckus: I am using IE6. Now my resolution is 1280x1024 at home but at work it is 800x600. When I just looked at it at work the positioning was all screwed up. My guess is that Ini is right, there is something wrong with you absolute positioning.

I can take a look at it when I get home.


Later,
C:\


~Binary is best~

Thanks for the guesses so far. But the thing is, I don't think I'm using any positioning at all! (Apart from margins and paddings)

My CSS looks like this:

.mainnav { background: #ffffff; margin: 12px 0px; border-top: 1px solid #444400; border-bottom: 1px solid #444400; cursor: pointer; }
.mainnav p { font-family: "Lucida Sans Unicode", Arial, sans-serif; margin: 5px 20px; }
.subnav { margin: -12px 0px 0px 45px; border-left: 1px solid #444400; padding: 5px 0px 5px 7px; }
.subnav p { font-family: "Lucida Sans Unicode", Arial, sans-serif; font-size: 13px; margin: 0px; cursor: pointer; }

And that's the HTML code, this code is repeated twenty times on the sample page:

<div>
<div id="nav_kontakt" class="mainnav" onclick="location.href='#';">
<p><a href="#">Kontakt</a></p>
</div>
<div class="subnav">
<p onclick="location.href='#';"><a href="#">Webmaster</a></p>
</div>
</div>

Any other ideas?

IE 5 the text drops away to the left a couple of pixels on every line 1024 x 768

Weird............

www.scansped.co.uk

Why do you have this:

.subnav p { font-family: "Lucida Sans Unicode", Arial, sans-serif; font-size: 13px; margin: 0px; cursor: pointer; }

this:

.subnav { margin: -12px 0px 0px 45px; border-left: 1px solid #444400; padding: 5px 0px 5px 7px; }


and this:

<p onclick="location.href='#';"><a href="#">Webmaster</a></p>


???

That is where your problem is I think. That <p onclick . . > is causing some problems. I took it out and it seemed to work fine. Try it and see.


Later,
C:\


~Binary is best~

CPromt: Thanks for the hint again

I took the CSS lines apart and came to the result that this padding

.subnav { padding: 5px 0px 5px 7px; }

is causing the special effect in IE. I guess I'll try to move it into another div and see if it helps.
BTW, removing the onclick... didn't change anything, that would have been strange indeed!

kuckus

[edit: Problem sorted out, thanks a lot! Though I'd be happy about an explanation for this strage behaviour... it's still the same code, the only differece is that's it's on its own div now. Really weird! ]

[This message has been edited by kuckus (edited 04-19-2002).]

Glad that you fixed it. Sometimes CSS and IE do some strange things!. I have seen borders disappear when you scroll and all kinds of crazy shit.



Later,
C:\


~Binary is best~

Heh, it's not as if only IE did strange things with CSS code:

Have a look at this with Netscape 6.2 (6.0 might also 'work') and move your mouse over the navigation.