Unwanted space in IE?

They have: 173 posts

Joined: Feb 2005

I have a navigation bar that goes something like this:

<div id="nav">
    LINK 1
    LINK 2
    LINK 3
</div>
<div id="shadow">
    IMG OF SHADOW...5PX high
</div>
'

This displays as expected in opera and firefox, but there is space between the nav and shadow in IE.

If i move everything in the NAV div to a single line, it works. If I unindent the links it doesn't.. it seems that I need to have the entire div on one line to overcome this.. am I missing something!?

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

It's because IE reads the extra space that you have put in for tabbing and making things easier to read. This is why putting things on a single line works. However, I have seen one or two people code like the following to solve this IE thing:

<div id="nav"
><ul
><li
>Link 1</li
></ul
></div>
'

They have: 173 posts

Joined: Feb 2005

Renegade wrote: It's because IE reads the extra space that you have put in for tabbing and making things easier to read. This is why putting things on a single line works. However, I have seen one or two people code like the following to solve this IE thing:

<div id="nav"
><ul
><li
>Link 1</li
></ul
></div>
'

Yikes that's ugly! Smiling

Is there anything else I can do, allowing for the indents?

The other solution I thought of it so "build" it through PHP... then each echo statement wouldn't print out these tab issues...

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

They have: 173 posts

Joined: Feb 2005

Here is a test page:

http://www.triexa.com/temp/test.php

Its JUST the menu+shadow..

Roo's picture

She has: 840 posts

Joined: Apr 1999

Yes IE had quirks when things are not on the same line for example:

If you have
Contnent

IE will leave a gap.

If you do
Content

The gap would close.

Roo

They have: 173 posts

Joined: Feb 2005

So what about a solution...? Anyone? Smiling

Roo's picture

She has: 840 posts

Joined: Apr 1999

How is this supposed to display? You have it posted like it's supposed to be a list, but there isn't the list tags?

This would display the links horizontally...
LINK 1 LINK 2 LINK 3
IMG OF SHADOW...5PX high

'Course we don't know how this is supposed to display, and we don't know what is in the css for those id's.

Roo

They have: 173 posts

Joined: Feb 2005

Roo wrote: How is this supposed to display? You have it posted like it's supposed to be a list, but there isn't the list tags?

This would display the links horizontally...
LINK 1 LINK 2 LINK 3
IMG OF SHADOW...5PX high

'Course we don't know how this is supposed to display, and we don't know what is in the css for those id's.

I posted the page (http://www.triexa.com/temp/test.php) which shows the code, and how the shadow is pushed down in IE... ?

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Well, I just had a quick try at it and this is what I came up with:
http://chengeu.orcon.net.nz/temp/twf/

Works in IE and FF (most probably Opera too) is validates as XHTML strict. CSS is also valid. Why don't you give it a try and see how it works for you. Feel free to change the text links to images, it should work the same.

Good luck Smiling

They have: 173 posts

Joined: Feb 2005

Seeing as how I am just starting the layout... I wonder if I should go for XHTML... or 4.01 transitional Smiling

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Well, I think if you're just starting out, you should go for XHTML Transitional. That way, it will be easier for you to move to strict. If you're serious about the web, you're going to learn XHTML. Just miss an extra step and go straight to it Smiling

They have: 173 posts

Joined: Feb 2005

What is "so" different about XHTML though? Like really the only thing I truly notice is closing of non-closing tags.. like BR. And fewer attributes, more configured through CSS... what else is there to it? 'Cause that's easy, haha!

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

Busy's picture

He has: 6,151 posts

Joined: May 2001

Thats about it, and all tags lowercase.
XHTML is just a cleaned up version of HTML really, with a side serving of CSS to spruce things up

Roo's picture

She has: 840 posts

Joined: Apr 1999

Ah but the best thing about xhtml is that it won't let you screw up! Go ahead and forget one measly little quote mark and watch a whole page get tossed into a hissy fit!

If you've got an an issue, you know that you've left someting out or forgotten to put something in.

Roo

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.