September 24, 200916 yr hey there, I am working on this site, and if you look at the menu in internet explorer you'll see the "t" in contact being cut off. does anyone have any thoughts as to why it's doing this? here's some code: XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>General Organics - Nutrition for your plant life.</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen"> <script type="text/javascript" src="jquery-1.2.3.min.js"></script> <script type="text/javascript" src="jquery.easing.min.js"></script> <script type="text/javascript" src="jquery.lavalamp.min.js"></script> </head> <body> <div id="wrapper"> <!-- start header --> <div id="header"> <div id="menu"> <ul class="lavaLamp"> <li><a href="index.html" class="current">Home</a></li> <li><a href="products.html">Products</a></li> <li><a href="store.html">Store</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <!-- end header --> <!-- start page --> <div id="page"> <!-- start content --> <div id="content"> <div class="post"> <div class="entry"> <p> <img src="images/text.png" height="590" width="600" /> </p> </div> </div> </div> <!-- end content --> </div> </div> <!-- end page --> <div id="footer"> <p>©2009 General Organics All Rights Reserved. | Creative by <a href="http://www.gregsarpy.net/">GSD</a></p> </div> </body> </html> CSS: body { margin: 0; padding: 0; font-size: 13px; color: #8C8C8C; background-color: #659a00; background-image: url(images/body-bg.png); background-position: top left; background-repeat: no-repeat; background-attachment: fixed; } body, th, td, input, textarea, select, option { font-family: Verdana, Helvetica, sans-serif; font-size: 90%; } h1, h2, h3 { font-weight: normal; color: #F8FBEC; } h1 { letter-spacing: -2px; font-size: 1.5em; } h2 { letter-spacing: -1px; font-size: 2em; } h3 { font-size: 1em; } p, ul, ol { line-height: 120%; } blockquote { padding-left: 1em; } blockquote p, blockquote ul, blockquote ol { line-height: normal; font-style: italic; } a:hover { text-decoration: none; color: #E6B715; } #wrapper { background-image: url(images/wrapper-bg.gif); background-repeat: repeat-y; width: 870px; margin: 0 auto; } /* Header */ #menu { float: right; width: 350px; } #menu a{ color: #7a2220; } #header { width: 850px; height: 392px; margin: 0 auto; background: #fff url(images/grass-header.png) top center; background-repeat: no-repeat; } #header h1, #header p { margin: 0; color: #9CBC1E; } #header h1 { padding: 100px 0 0 70px; } #header p { padding-left: 73px; margin-top: -10px; } #header a { color: #7a2220; } /* Page */ #page { width: 870px; margin: 0 auto; background-color: #533300; } /* Content */ #content { float: right; width: 870px; margin: 0; background-color: #533300; background-image: url(images/wrapper-bg.gif); background-repeat: repeat-y; margin: 0 auto; } .entry { width: 600px; padding: 15px; margin:0 auto; font-size: 131%; line-height: 1.18em; color: #fff; font-family:'Helvetica Neue','Helvetica','Arial',sans-serif; } .post { padding: 0 0 20px 0; } .menu { margin: 0; padding-bottom: 5px; border-bottom: 2px solid #B7D24D; } .byline { margin: 0; color: #646464; } .meta { text-align: left; color: #646464; padding: 10px 10px; height: 48px; background: url(images/img06.gif) no-repeat left top; } .meta .more { padding-left: 20px; } .meta .comments { padding-left: 20px; } .meta a { color: #003300; } /* Sidebar */ #sidebar { float: left; width: 230px; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { } #sidebar li ul { padding: 15px 15px; } #sidebar li li { border-bottom: 1px dotted #000000; padding-left: 15px; } #sidebar h2 { margin: 0; padding: 10px 0 0 40px; height: 40px; background: url(images/img04.gif) no-repeat left 60%; } #sidebar a { text-decoration: none; } #sidebar a:hover { } /* Footer */ #footer { clear: both; width: 860px; height: 60px; margin: 0 auto; padding-top: 10px; background: url(images/footer.png) no-repeat left top; text-align: center; font-size: smaller; color: #52640A; } #footer a { color: #003300; text-transform: none; } /* Styles for the entire LavaLamp menu */ .lavaLamp { position: relative; height: 29px; width: 321px; padding: 15px; margin: 10px 0; overflow: hidden; } /* Force the list to flow horizontally */ .lavaLamp li { float: left; list-style: none; } /* Represents the background of the highlighted menu-item. */ .lavaLamp li.back { background: url("lava.gif") no-repeat right -30px; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLamp li.back .left { background: url("lava.gif") no-repeat top left; height: 30px; margin-right: 9px; } /* Styles for each menu-item. */ .lavaLamp li a { position: relative; overflow: hidden; text-decoration: none; text-transform: uppercase; font: bold 14px arial; color: #7a2220; outline: none; text-align: center; height: 30px; top: 7px; z-index: 10; letter-spacing: 0; float: left; display: block; margin: auto 10px; } Thanks for any help. BTW it appears to display just fine in Firefox, Safari, and Opera.
September 24, 200916 yr Hi EvSoul Try adding this to your CSS #menu ul { width:350px; } #menu ul li { width:auto } Just tried it in IETester and it fixes your problem. BenTheDesigner
September 24, 200916 yr Author You're wonderful. I would have never thought of that. Thank you so much.
Create an account or sign in to comment