My styled "hover" tag doesn't appear to be working on just one of my links in IE7. Please visit this site to see what I mean: http://www.iongeo.com/innovation_tes...ndary_gxt.html The "innovation home" link doesn't appear to have the green underline in IE7, even though the other links work correctly, as well as all of them appearing correctly in Firefox. If someone could please shed some light as to what the issue is, I would greatly appreciate it. Here is my CSS if that helps: #content { height: 600px; width: 813px; margin-right: auto; margin-left: auto; padding: 0px; cellpadding="0" cellspacing="0" ; vertical-align: top; } .style3 { font-size: 14px; font-weight: normal; } #play { float: right; padding-right: 10px; height: 25px; width: 80px; padding-top: 4px; } #grey_bar { background-color: #9e9fa3; width: 805px; height: 20px; } #byline { float: right; padding-top: 270px; font-size: 11px; font-weight: bold; padding-right: 10px; height: 45px; line-height: 13px; } #byline_bob { float: right; padding-top: 270px; font-size: 11px; font-weight: bold; padding-right: 25px; height: 45px; line-height: 13px; } #byline_chris { float: right; padding-top: 270px; font-size: 11px; font-weight: bold; padding-right: 0px; line-height: 13px; } #byline_ken { float: right; padding-top: 260px; font-size: 11px; font-weight: bold; padding-right: 30px; padding-bottom: 0px; background-position: bottom; } #byline_doug { float: right; padding-top: 270px; font-size: 11px; font-weight: bold; padding-right: 20x; } #grey_element { background-image: url(secondary_pages/images/cell-background.gif); background-repeat: no-repeat; float: left; height: 320px; width: 245px; padding-bottom: 0px; } #additional_information { font-family: Arial, Helvetica, sans-serif; font-style: italic; padding-left: 60px; padding-top: 10px; } #home { font-weight: bold; padding-left: 65px; padding-top: 10px; } #forty { font-size: 18px; font-weight: bold; color: #89C122; padding-left: 0px; width: 200px; padding-bottom: 10px; padding-top: 0px; margin-top: 40px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #green_bar { background-image: url(secondary_pages/images/images/innovation_secondary--page_09.gif); background-repeat: no-repeat; width: 800px; height: 15px; padding: 0px; } #to_learn { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: 6E6E6E; padding-left: 17px; padding-top: 5px; padding-bottom: 5px; } #marine_bob { padding-left: 44px; } #40_years { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #91C53D; padding-left: 20px; } #video { background-image: url(secondary_pages/images/images/innovation_secondary--page_06.jpg); background-repeat: no-repeat; float: right; height: 30px; width: 100px; } #intro_text { font-family: Arial, Helvetica, sans-serif; color: 6E6E6E; float: left; font-weight: normal; padding-left: 10px; clear: none; font-size: 12px; padding-top: 0px; width: 260px; height: 289px; padding-right: 10px; } #intro_text_chris { font-family: Arial, Helvetica, sans-serif; color: 6E6E6E; float: left; font-weight: normal; padding-left: 10px; clear: none; font-size: 12px; padding-top: 0px; width: 270px; height: 289px; padding-right: 3px; } #intro_marine{ font-family: Arial, Helvetica, sans-serif; color: 6E6E6E; float: left; font-weight: normal; padding-left: 10px; clear: none; font-size: 12px; padding-top: 0px; width: 260px; height: 289px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-right: auto; margin-left: auto; color: #6E6E6E; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; } #innovation_home { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #575859; padding-top: 190px; padding-left: 47px; width: 200px; height: 90px; } #innovation_home_bob { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; padding-top: 190px; padding-left: 65px; width: 200px; height: 90px; } #spacer { height: 10px; width: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #innovation_home a { font-family: Arial, Helvetica, sans-serif; color: #666666; text-decoration: none; font-style: italic; } #innovation_home a:hover { color: #666666; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #77B800; } #header { background-image: url(secondary_pages/images/images/innovation_main-page_01.jpg); background-repeat: no-repeat; height: 63px; width: 800px; } #plus { font-family: Arial, Helvetica, sans-serif; color: #77b800; width: 30px; height: 60px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px; } #return { height: 63px; width: 596px; float: right; background-image: url(secondary_pages/images/images/innovation_main-page_02.jpg); } #text { height: 325px; width: 800px; padding: 0px; } .style2 { color: #77b800; } #picture { background-image: url(secondary_pages/images/images/dave_large.jpg); height: 325px; background-repeat: no-repeat; float: left; width: 265px; background-position: bottom; } #picture_land{ background-image: url(secondary_pages/images/images/chris_large.jpg); height: 325px; background-repeat: no-repeat; float: left; width: 265px; background-position: bottom; } #picture_gxt{ background-image: url(secondary_pages/images/images/nick_large.jpg); height: 325px; background-repeat: no-repeat; float: left; width: 265px; background-position: bottom; } #picture_iss{ background-image: url(secondary_pages/images/images/ken_large.jpg); height: 325px; background-repeat: no-repeat; float: left; width: 265px; background-position: bottom; } #picture_ngi{ background-image: url(secondary_pages/images/images/doug_large.jpg); height: 325px; background-repeat: no-repeat; float: left; width: 265px; background-position: -1px bottom; } #picture_bob{ background-image: url(secondary_pages/images/images/innovation_secondary_bob_matching.jpg); height: 325px; background-repeat: no-repeat; float: left; width: 265px; background-position: 7px bottom; } #marine { padding-left: 17px; } #land { padding-left: 15px; } #images { padding-left: 15px; } #picture_text { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; vertical-align: bottom; text-align: left; padding-top: 200px; padding-left: 150px; color: #575A5D; width: 160px; } #return_link { color: #666666; font-size: 13px; padding-left: 44px; font-weight: bold; font-style: normal; clear: right; } #return_link a { color: #666666; text-decoration: none; } #return_link a:hover { color: #575859; font-family: Arial, Helvetica, sans-serif; font-size: 13px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #89C122; } .green { color: #77B800; padding-left: 0px; padding-right: 10px; } .green_home { color: #77B800; } .grey { color: #666666; font-weight: normal; } #orange_text { font-size: 9px; font-weight: normal; color: #e24912; padding-left: 0px; width: 200px; padding-bottom: 0px; margin: 0px; padding-top: 10px; } #matching_plus { padding-top: 5px; } Code (markup): Any help would be greatly appreciated!
Well... cellpadding and cellspacing do NOT go into your CSS, so that's invalid, so invalid it could cause some browsers to throw away your first property wholesale AND ignore everything after it. You appear to be repeatedly defining things already defined, changing values that don't need to be changed, and not accounting for changes in size that can occur from adding a border to an element that doesn't have one. ... and the link you gave is invalid, meaning we can't even see what HTML this mess is being applied to.
Thank you for your reply deathshadow. I have a few questions I was hoping you could please clarify: 1. I am not sure how cellspacing and cellpadding got into my #content id. I have taken that part out of my css. As a general question though, why can't cell padding and spacing be included in a css? 2. What do you mean by "changing values that don't need to be changed"? Most of my ids are varied slightly in my css because they have to be in order to be viewed correctly. Granted, this site is still in development right now, I will be going through and cleaning up old ids that are not in use once the site is finally published. 3. The only border in my css is actually the one that is used in my links for the hover effect as an underline. I am not sure if it would actually distort the sizing of anything since it is the only used on text and looks correct on the working hovered links in IE. Also, I am unable to post a link in this forum because I do not have a reputation. If you please replace these characters you can hopefully see what "mess this html is being applied to"://www{dot}iongeo{dot}com/innovation_test_pages_dev/forty{dot}html
Because cellspacing and cellpadding are HTML attributes, NOT CSS properties. They do not exist in CSS. The equivalent of cellpadding=0 cellspacing=0 can be achieved using border-collapse:collapse, or when border-collapse is set to 'separate' you can use border-spacing which is the equivalent to cellspacing... for the equivalent of cellpadding, just use normal padding on your TD. Generally what I was saying is that the whole thing seems to have been made more complicated than it needs to be - Now that I can look at the markup I can see much of your 'problems' - table for no good reason, that stupid malfing macromedia javascript nonsense for mouse-overs, presentational images in your markup, there's only 766 bytes of actual content which you are using 8k of code to deliver - even worst case scenario that's twice as much in your .html file as should be needed. You have to remember that IE's behavior is RARELY the correct one being as far from standards compliant as you can get. In this case you are changing the total size of the element by adding a bottom border, increasing it's height when hovered - in standards compliant browsers that's either going to get chopped off, or it's going to make everything below that point jump up and down. As I often tell people, your problems run deep enough that it would be faster to throw it all away and start over from scratch - this time using MODERN markup techniques like semantic markup, minimalist markup and separation of presentation from content. 99.99% of your 'problem' can be seen by this line right here: <!-- InstanceBegin template="/Templates/innovation_secondary_div_bob.dwt" codeOutsideHTMLIsLocked="false" --> ****ing dreamweaver. The only thing about dreamweaver that can be considered a professional grade tool are the people promoting it's use, since as I've said countless times on many forums the ONLY thing you can learn from dreamweaver is how NOT to design a website. Do youself a huge favor, pitch dreamweaver in the trash, wipe your mind of the slightest notion of using ANY type of 'wysiwyg' tool, and go grab yourself a copy of Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition forgetting EVERYTHING you've already learned about HTML. You have been using and learning techniques that are a decade or more out of date - not your fault, there's a lot of it going around since schools certainly can't keep up, Adobe has done nothing but prolong the pain, and most people working in the industry wouldn't know good code if it stripped naked, painted itself purple and hopped up on a table singing "Oh look at how well indented I am."
We all just do blah.com/sub/sub/blah and everyone copy-pastas until we've got 10 posts. Re deambeaver: there are people who know how to code who use it as a (very expensive for what it does) tool. However, they are also the ones who know how to correctly configure it to not puke out nasty steaming piles of code. newbies, on the other hand, use the defaults. Which teach them bad habits. I'll second the book linked above, except I haven't actually looked at the second edition (only the first, which sent me on my way in the right direction). The 1st edition should be freely available in your local library if you don't want to buy it. Only other gripe is he starts you out with XHTML1.0 but oh well, can't have everything : )