Wrox Programmer Forums
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 10th, 2005, 06:38 AM
Authorized User
 
Join Date: Mar 2005
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Menu problem

if you look @ http://84.30.32.166/eadtu_conf2005/

my first effort to get away from table design
so far so good, but one problem

there's a menu on the left that contains a div with the id "menu"
inside the div is a unordered list with 12 links containing rollovers

viewing with mozilla / firefox browser the menu displays like i want to, all tied up together

in internet explorer there is a unwanted 2-3 px space between each image

what am i doing wrong? or is there a hack for this?

 
Old March 10th, 2005, 09:03 AM
Authorized User
 
Join Date: Mar 2005
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

switched back to table for the menu
due to time restriction
but i'm happy to find out a method how to get this to work
in internet explorer without tables

 
Old March 10th, 2005, 10:31 AM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

As far as I know the only way to get around that whitespace bug in IE is to put all the markup on one non-breaking line. That is, remove all the line breaks and extra space between the[list], <li>, </li> and </ul> tags. That's an easy hack to stomach if you can output it with a server side language. For instance, if I were using PHP on the server I could do something like this:

echo "[list]".
          "<li><a href='#'>link</a></li>".
          "<li><a href='#'>link</a></li>".
          "<li><a href='#'>link</a></li>".
          "<li><a href='#'>link</a></li>".
          "<li><a href='#'>link</a></li>".
     "</ul>\n";

I can still read the code in the source file, but in the browser when I view the source, it looks like this:
[list]<li><a href='#'>link</a></li><li><a href='#'>link</a></li><li><a href='#'>link</a></li><li><a href='#'>link</a></li><li><a href='#'>link</a></li></ul>

And there is no extra whitespace in IE.

I've also had some success with applying a display: inline; declaration to the <li> elements, but that hack can have other nasty repercussions, depending on the layout.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
 
Old March 10th, 2005, 11:02 AM
Authorized User
 
Join Date: Mar 2005
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Quote:
quote:Originally posted by richard.york
 As far as I know the only way to get around that whitespace bug in IE is to put all the markup on one non-breaking line. That is, remove all the line breaks and extra space between the[list], <li>, </li> and </ul> tags. That's an easy hack to stomach if you can output it with a server side language. For instance, if I were using PHP on the server I could do something like this:

echo "[list]".
         "<li><a href='#'>link</a></li>".
         "<li><a href='#'>link</a></li>".
         "<li><a href='#'>link</a></li>".
         "<li><a href='#'>link</a></li>".
         "<li><a href='#'>link</a></li>".
     "</ul>\n";

I can still read the code in the source file, but in the browser when I view the source, it looks like this:
[list]<li><a href='#'>link</a></li><li><a href='#'>link</a></li><li><a href='#'>link</a></li><li><a href='#'>link</a></li><li><a href='#'>link</a></li></ul>
i tried that now, but still no luck
check here:
http://84.30.32.166/eadtu_conf2005/default_wrox.htm

 
Old March 10th, 2005, 11:07 AM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Really? I'm looking at it in IE6 and it looks identical to the output I see in FF.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
 
Old March 10th, 2005, 11:07 AM
Authorized User
 
Join Date: Mar 2005
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

hmmm

display: inline; worked for me

but what are the nasty repercussions then? or could be?

 
Old March 10th, 2005, 11:29 AM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Well if you don't see any repercussions, then there aren't any. Because an inline box is totally different from a block box (the <li> default), sometimes applying display: inline; will really mess up the design. If it works though, go with it!

If that first hack didn't work, it could be because of the images. I just remembered having loads of trouble eliminating that white space bug when there were images present. I beleive I ended up using <div>s in a similar design to get around that.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
 
Old March 11th, 2005, 05:41 AM
Authorized User
 
Join Date: Mar 2005
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Default

something went wrong
overwrote the local version of my css file with that of my server version

i lost my tableless menu settings

building it again:

http://84.30.32.166/eadtu_conf2005/default2.htm
http://84.30.32.166/eadtu_conf2005/css/eadtu.css
http://84.30.32.166/eadtu_conf2005/css/menu.css

but again same problem
already did as suggested before, but no change
so i must be overlooking something else this time, any idea?

 
Old March 11th, 2005, 08:44 AM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

I haven't looked at the update yet, but one thought:

Don't forget that IE can be sticky with files. By that I mean that even after an update to a file sometimes it won't read the update unless you force it to (by clearing the cache, or sometimes even stoping and restarting IE, or sometimes even restarting the whole computer!).

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
 
Old March 11th, 2005, 08:56 AM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Here's another IE trick that I'm fond of when others fail.

<!--[if lt IE 7]>
<style type='text/css'>
li {
    margin: -1px 0;
}
</style>
<![endif]-->

This stretches the top and bottom by 1 pixel but does nothing to the left and right. It also appears in conditional comments, so only IE sees it.

I didn't see the display: inline; in the style sheet. Did that not work? I didn't look very closely either, just glanced at it.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design





Similar Threads
Thread Thread Starter Forum Replies Last Post
Pure CSS Menu Showing Behind Form Fields in IE kwilliams CSS Cascading Style Sheets 10 November 19th, 2007 10:25 AM
CSS Menu - Top list item not showing up in IE kwilliams CSS Cascading Style Sheets 1 October 26th, 2007 09:10 AM
CSS Dropdown menu error in IE6 socoolbrewster CSS Cascading Style Sheets 1 March 23rd, 2006 04:09 PM
CSS + HTML = Vertical Select Menu? kwilliams CSS Cascading Style Sheets 2 January 23rd, 2006 09:02 PM
simple css menu example horseatingweeds BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 December 14th, 2005 07:30 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.