IE Shows Spaces Between Boxes

V

VUNETdotUS

Hello,
IE shows spaces between a few boxes made of ul-li elements in CSS
unlike Firefox. I tried padding/margin in different places but cannot
fix it. The URL is http://www.vunet.us/wic/test/ztop.asp, see pop-up
menu over link "My Test"
Please, recommend a fix for IE. The menu keeps disappearing because of
the gaps (spaces) when moving mouse up and down.
Thanks.
 
E

Els

VUNETdotUS said:
Hello,
IE shows spaces between a few boxes made of ul-li elements in CSS
unlike Firefox. I tried padding/margin in different places but cannot
fix it. The URL is http://www.vunet.us/wic/test/ztop.asp, see pop-up
menu over link "My Test"
Please, recommend a fix for IE. The menu keeps disappearing because of
the gaps (spaces) when moving mouse up and down.
Click to expand...

Since this is an 'on hover' effect only, it's difficult to trouble
shoot with the usual browser plugins. How about giving the same
example with static code? (i.e. the result of the csshover.htc)
 
J

Jonathan N. Little

VUNETdotUS said:
Hello,
IE shows spaces between a few boxes made of ul-li elements in CSS
unlike Firefox. I tried padding/margin in different places but cannot
fix it. The URL is http://www.vunet.us/wic/test/ztop.asp, see pop-up
menu over link "My Test"
Please, recommend a fix for IE. The menu keeps disappearing because of
the gaps (spaces) when moving mouse up and down.
Thanks.
Click to expand...

You're in quirks mode IE will use old non-standard rendering. First
switch to the 4.01 strict doctype. Remove all those z-index properties
they are not needed. Many times to successfully debug you need to
*remove* not *add* things...
 
E

Els

Jonathan said:
You're in quirks mode IE will use old non-standard rendering. First
switch to the 4.01 strict doctype. Remove all those z-index properties
they are not needed. Many times to successfully debug you need to
*remove* not *add* things...
Click to expand...

As far as I can see, his page is rendered in standards mode; a
transitional doctype doesn't mean quirksmode. Only IE5 does quirksmode
on this page, but it would do that on a Strict page too.
 
V

VUNETdotUS

You're in quirks mode IE will use old non-standard rendering. First
switch to the 4.01 strict doctype. Remove all those z-index properties
they are not needed. Many times to successfully debug you need to
*remove* not *add* things...
Click to expand...

I removed most z-indexes, removed .htc file, changed doctype to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
.... same thing. Only when I am over "right div" bar, IE7 does not hide
menu.
Sorry, I did not changed my example online: no access at the time. I
implemented your suggestions locally by copying code.
Isn't it some CSS box properties I need to look at?
Thanks.
 
E

Els

VUNETdotUS said:
Sorry, I did not changed my example online: no access at the time. I
implemented your suggestions locally by copying code.
Isn't it some CSS box properties I need to look at?
Click to expand...

Now that I know it's not the htc file, I copied your page locally, and
found what's causing it: white space between the <li> elements. I'm
not sure if there is another way to get rid of it without a lot of
hacking, but if you just put the <li> elements connected, the space is
gone.
Like so:
><li><a....>BBBBBB</a></li
><li><a....>CCCCCC</a></li
><li><a....>DDDDDD</a></li
><li><a....>EEEEEE</a></li>
Click to expand...
</ul>

(or just all on one line, but this way it is easier to read)
 
J

Jonathan N. Little

Els said:
Now that I know it's not the htc file, I copied your page locally, and
found what's causing it: white space between the <li> elements. I'm
not sure if there is another way to get rid of it without a lot of
hacking, but if you just put the <li> elements connected, the space is
gone.
Like so:

</ul>

(or just all on one line, but this way it is easier to read)
Click to expand...

IE whitespace bug.. Worst when in quirks mode.
 
V

VUNETdotUS

Now that I know it's not the htc file, I copied your page locally, and
found what's causing it: white space between the <li> elements. I'm
not sure if there is another way to get rid of it without a lot of
hacking, but if you just put the <li> elements connected, the space is
gone.
Like so:

</ul>

(or just all on one line, but this way it is easier to read)
Click to expand...

WOW! Deepest thanks. IE...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Working on mobile css menu with plenty of frustration! 2
I need help fixing my website 2
Need help with code on website (noob) 2
CSS menu problems with IE 7 2
float problem, second of two boxes is being pushed down when openingfavoritesIE/or left bar in Opera 23
float problem, on of two boxes is being pushed down when openingfavoritesIE/or left bar in Opera 0
Vertical Gap between DIVs in Opera 8.5 Mac + IE 5.2 Mac 2

Members online

No members online now.
Total: 36 (members: 0, guests: 36)
Robots: 667

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top