[RESOLVED] IE 7 to IE 8 compatibility issue - HTML Forums

jm_eklund · 10-27-2009, 12:59 PM

I am a novice web admin. I am having an issue with placing a sign up form on my web site. It look good in IE8 or FF, but anything older (IE7) it looks horrible. See Attachments. Here is the code that I have:

<ul class="site-nav2">
<p> </p>
<FORM "ACTION="https://app.expressemailmarketing.com/Survey.aspx?SFID=75036" METHOD="POST">
<div align="center"><span class="style6 style5"> <FONT FACE="arial, helvetica">Sign up for our Mailing List
</FONT></span>
</span><BR>
<input type="TEXT" name="email" />
<BR>
<INPUT TYPE="IMAGE" SRC="images/sign_up.gif" ALIGN="ABSMIDDLE" BORDER="0" />
<INPUT TYPE="HIDDEN" NAME="SkipSurvey" VALUE="FALSE" />
</div>
</FORM>

</ul>

Here is what I have for that site-nav2 CSS:

.site-nav2 {
position:absolute;
right:10px;
top:519px;
width:234px;
height: 111px;
visibility: visible;
overflow: visible;
border: 0;
border-width: 0;
background-image: url(images/signup.png);
}
.site-nav2 li {
font-family:"Arial Narrow", Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12pt;
line-height:normal;
text-transform:lowercase;
color: #000000;
}
.site-nav2 li a {
text-decoration:none;
color:#917E65;
padding-left:36px;
background-repeat: no-repeat;
background-position: left 7px;
}
.site-nav2 li a:hover, .site-nav2 li a.act {
color:#A43812;
background-repeat: no-repeat;
background-position: left 7px;
background-image:url(images/signup.jpg)
}

Pegasus · 10-27-2009, 02:05 PM

What are you using for a doctype?

jm_eklund · 10-27-2009, 02:43 PM

<!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" xml:lang="en" lang="en">

vishal3184 · 10-28-2009, 02:28 AM

Hi jm_eklund,

Your code for site-nav2 is :

.site-nav2 {
position:absolute;
right:10px;
top:519px;
width:234px;
height: 111px;
visibility: visible;
overflow: visible;
border: 0;
border-width: 0;
background-image: url(images/signup.png);
}

make the following changes in above css as :

.site-nav2 {
float:left;
overflow:hidden;
display:inline;
position:absolute;
width:234px;
height: 111px;
border: 0;
border-width: 0;
background-image: url(images/signup.png);
}

Let me know is it work or not....

Pegasus · 10-28-2009, 02:32 AM

You can't have a float and absolute positioning in the same class. It just won't work that way. Try removing the position: absolute; from the code.

jm_eklund · 10-29-2009, 06:30 PM

it is getting better. This is what it looks like now. Ref. Bigdogcattle.com

jm_eklund · 10-31-2009, 09:46 PM

Does anyone have any ideas as to how I should go about completely fixing this compatibility issue?

vishal3184 · 11-02-2009, 06:27 AM

Hi Pegasus,

Thanks for letting me know that float and position does not work simultaneously.

vishal3184 · 11-02-2009, 06:49 AM

hi jm_eklund,

I think your page is proper on IE and Firefox.

Let us know in brief what is ur other browser requirements.

Thanks

jm_eklund · 11-02-2009, 11:24 AM

All,

Thanks for everyone's help with this issue. I finally have a resolution. See below.... It seems that IE7 was inheriting the CSS properties from .site-nav1, so I had to specify the text size to 14px.

.site-nav2 {
float:left;
display:inline;
position:absolute;
width:234px;
height: 297px;
border: 0;
border-width: 0;
background-image: url(images/signup.png);
left: 92px;
top: 531px;
background-repeat: no-repeat;
line-height: normal;
font-size: 14px;