Hi

I have a slight issue that I am having a little trouble with concerning IE7 and Firefox.

If you view this page in both browsers, my .swf file looks a little bit off in both- where the grey background image is slightly off to the right in IE 7, but the positioning of the .swf file looks correct. The opposite occurs in Firefox where the background image looks correct, but the .swf file is off a little bit to the left.

I was hoping some kind soul here could perhaps shed some light on what's causing my issue.

Thanks.

You need to learn to dump the tables for layout, for one.

You need to specify a background color for your page, I see your graphics laid on top of a pale pink background (my specified system bg color). Who knows what colors other people may have set. Don't ever assume that a user sticks to defaults!

You floated the #flashcontent left, Firefox put it right where you told it to go - all the way to the left.

Oh, and this: <div align="center"> is not proper for XHTML - the positioning belongs in the CSS.

Thanks so much for your reply Ladynred.

The pages still look like hell in both browsers, but I am working on it.

I didn't even think about the default colors, so I set the color to white now

Yeah, I usually am not a big fan of tables either, but this is the only page I used for my site with tables. Classify it as "seemed like a good idea at a time."

The pages still look like hell in both browsers, but I am working on it.

I didn't think it looked THAT bad

OK, just one more issue I am having on a different page...

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. It has been driving me bonkers for the last hour, if someone could please shed some light as to what the issue is, I would greatly appreciate it.

Thanks

Doesn't work in IE6 either. My guess would be a specificity issue, but w/o downloading the page and css to test it, I cannot be sure.

Well, I had it fixed for a while, but for some reason, the same issue has arisen, where my "innovation home" links do not have the hover effect only in IE.

After researching a little bit on specificity, I think it might have to do with the fact that I have two div tags "innovation_home" and "return_link" wrapped inside a different one called "grey_element."

Here is my style sheet:

#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;
}

If anyone could please assist me and let me know what could be causing this issue, I would greatly appreciate it.

Also, this is an AWESOME plugin for firefox that lets you look at any website's css and how it was structured very easily: https://addons.mozilla.org/en-US/firefox/addon/60

Just go to the outline>outline current element tabs and you can see all elements to a page when you put your cursor over them.

An even better FF plugin for development is Firebug, I couldn't live without it any more.

...So does anyone have any ideas?

When I remove the div #grey_element, then all of the hover tags work, but I can't get the page to look correctly when I try that.

Any help would be greatly appreciated.