Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 10th, 2005, 06:38 AM
Authorized User
 
Join Date: Mar 2005
Location: , , .
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?

Reply With Quote
  #2 (permalink)  
Old March 10th, 2005, 09:03 AM
Authorized User
 
Join Date: Mar 2005
Location: , , .
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

Reply With Quote
  #3 (permalink)  
Old March 10th, 2005, 10:31 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
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
Reply With Quote
  #4 (permalink)  
Old March 10th, 2005, 11:02 AM
Authorized User
 
Join Date: Mar 2005
Location: , , .
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

Reply With Quote
  #5 (permalink)  
Old March 10th, 2005, 11:07 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
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
Reply With Quote
  #6 (permalink)  
Old March 10th, 2005, 11:07 AM
Authorized User
 
Join Date: Mar 2005
Location: , , .
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?

Reply With Quote
  #7 (permalink)  
Old March 10th, 2005, 11:29 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
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
Reply With Quote
  #8 (permalink)  
Old March 11th, 2005, 05:41 AM
Authorized User
 
Join Date: Mar 2005
Location: , , .
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?

Reply With Quote
  #9 (permalink)  
Old March 11th, 2005, 08:44 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
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
Reply With Quote
  #10 (permalink)  
Old March 11th, 2005, 08:56 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 04:52 AM.


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