I'm having trouble in IE 7 with CSS and ASP. On one of our primary school site we're trying to use CSS on a menu (taken from http://garcya.us/blog/) but while it displays fine in Firefox, Internet explorer resizes text and underlines it. Code is below. The funny thing is that if it's run as .htm then the menus display fine, if run as ASP in IE then the menus become corrupted. Any help would be appreciated, example can be found here. Code: <style type="text/css"> <!-- .mz01 {padding:0 0 0 0px; margin:0; list-style:none; height:30px; background:#1841c8 url(images/menu0.gif);} .mz01 li {float:left;} .mz01 li a {display:block; float:left; height:30px; line-height:30px; background:url(images/menu0.gif); color:#fff; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 8px; cursor:pointer; font-size:16px;} .mz01 li a b {float:left; display:block; background:url(images/menu0.gif) right top; padding:0 8px 0 0px;} .mz01 li a:hover {color:#fff; background: url(images/menu1.gif);} .mz01 li a:hover b {background:url(images/menu1.gif) no-repeat right top;} .mz01 li a em {display:block; float:left; width:16px; height:30px;} --> </style>
Code: <style type="text/css"> <!-- .mz01 {padding:0 0 0 0px; margin:0; list-style:none; height:30px; background:#1841c8 url(images/menu0.gif);} .mz01 li {float:left;} .mz01 li a {display:block; float:left; height:30px; line-height:30px; background:url(images/menu0.gif); color:#fff; text-decoration:none !important; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 8px; cursor:pointer; font-size:16px !important;} .mz01 li a b {float:left; display:block; background:url(images/menu0.gif) right top; padding:0 8px 0 0px;} .mz01 li a:hover {color:#fff; background: url(images/menu1.gif);} .mz01 li a:hover b {background:url(images/menu1.gif) no-repeat right top;} .mz01 li a em {display:block; float:left; width:16px; height:30px;} --> </style> Try that? (Just iuncluded an !important on "li a"'s size and text-decoration.) Very nice looking site btw.
*Thank you!* I had hoped it would be something fairly simple. The site's okay, but having to use ASP instead of PHP is a pita.
I've never even wanted to try ASP, but I do love a bit of good PHP. For future reference, your problem was that IE was deciding to inherit the styles from your external stylesheet, so the stylings for any li were being applied after the ones for that specific class (mz01). !important, pretty obviously, makes those attributes take precedence and prevents the "cascade"-iness.
Sorry, I know this isn't directly related to your question. I took a gander at your source and it's a little weird. You have an unordered list with one item in seven different table cells, flanked by spacers. I'm not exactly sure why you're doing this. You could have greater control over your styles (and, consequently, avoid using !important declarations) by placing the entire navigation in one unordered list. I'm assuming you went with the table approach because it's a little difficult to center lists and have links that can be easily styled. Fortunately, you can work around this with some clever CSS. I made an example for you that only uses an unordered list. It works in Safari and Firefox (should work in IE7, don't have a PC at hand currently), valid HTML and CSS. If you don't use my example, at least strip out all the lists and just style the table cells. There's no reason to have all that bloat. edit: I added a table-based version to my test page.
Thanks for the example, I'll look into it in the next few days. A reason for code strangeness is that I still use FrontPage Express to build sites, at least to start with. I suppose I should really learn to do the whole thing in notepad and do away with tables, but it's become a habit. It's also easier to see what's going on in a WYSIWYG editor most of the time.
dump the wysiwydg asap. get a decent code editor like eclipse/aptana. in theory you shouldn't ever need to use !important, but it's not always easy/obvious. get firebug for firefox and read up on css specificity.
*That* was done in frontpage‽ Mad props, but seriously, you could do so much better. Once you switch, you'll find it easier. Nice site, glad you got your bug fixed.
The process goes something like: Photoshop > FrontPage Express > Notepad > Make Valid > Tidy I really need something that's visual, to start with at least, so either use FPE or NVU and fix it afterwards. Visual stuff like 'shopping is second nature, but large blocks of text or math can be an issue.
