Really strange IE phenomenon

[JYM]

Hi

It is really late right now but this is bugging me so much that I can't go to sleep without posting this.

I do not know what happens with IE6.0, but with IE7.0, this is what my site looks like:


The red rectangles mark the extra break which IE puts and FF doesn't.

I think the reason is because of my HTML code:

<ul>
<li class="menu"><a href="/music">Music</a>
<ul class="submenu" id="sm1">
<li><a href="/rh">Rap/Hip-Hop</a></li>
<li><a href="/rock">Rock</a></li>
<li><a href="/rs">R&B/Soul</a></li>
<li><a href="/tt">Trance/Techno</a></li>
<li><a href="/pop">Pop</a></li>
<li><a href="/classical">Classical</a></li>
<li><a href="/country">Country</a></li>
</ul>
</li>
<li class="menu"><a href="/movies">Movies</a>
<ul class="submenu" id="sm2">
<li><a href="/action">Action</a></li>
<li><a href="/animation">Animation</a></li>
<li><a href="/anime">Anime</a></li>
<li><a href="/comedy">Comedy</a></li>
<li><a href="/documentary">Documentary</a></li>
<li><a href="/drama">Drama</a></li>
<li><a href="/family">Family</a></li>
<li><a href="/horror">Horror</a></li>
<li><a href="/romance">Romance</a></li>
<li><a href="/scifi">Science Fiction</a></li>
<li><a href="/sports">Sports</a></li>
<li><a href="/thriller">Thriller</a></li>
</ul>
</li>

To make it easier for me to edit, I hit enter after each <li></li>, so that they get their own line. Now, the problem is that it seems by pressing enter, I am creating a space (" ") and that is why IE is making the break.

Is there anyway I can write my HTML code so that it is editable yet will not do this? The only solution I have right now is to stick ALL the menu code onto one line. It has solved my problem but now my code is virtually uneditable (since it gets so messy I can't tell head from toe).

Maybe this might bring to light some issues you never realized before?

 

[mch]

Try changing the margin and padding for li and ul elements in CSS.

 

[JYM]

They are already set to 0. Either way, the default values for margin and padding are always 0 so it does not matter whether I put include it or not.

I have looked at other websites and didn't notice this problem, so I'm wondering what I did wrong... our code looks nearly identical aside from the fact that they use indents while I just left align everything.

 

[CreedFeed]

See here: http://www.csscreator.com/css-forum/ftopic9016.html

 

[adam_uk]

can you post your css

if each link needs to be the same height and width set your width on the li and do overflow:hidden;

 

[JYM]

See here: http://www.csscreator.com/css-forum/ftopic9016.html

Thank you so much! That is exactly what I needed. However, contrary to the article, I believe it is necessary to modify the HTML to remove the "/n" space rather than edit the CSS because when you depend solely on CSS, and try all sorts of mods and hacks here and there, some will disable others. What can be done with HTML should be done with it if it is effective.

I have decided to just do the following:

<li><a href="">Music</a>
</li><li><a href="">Movies</a>
...

Rep added.

 

[apexad]

I am glad you were able to fix it, but, I would suggest not worrying all that much about how IE 7 screws up your site until it is out of beta.