website incompatible in IE7, fireFox browser

IE6 is the black sheep in that group.

You should first test your div centering in Firefox 2 then IE7, lastly IE6. (Mostly for checks like PNG transparency.)

To center the bottom of my master pages footer in Firefox and IE I'm using this:

<div class="styleFoot">

. . .Footer content here

</div>

My CSS...

.styleFoot
{
color: #FF9900;
bottom: -1px;
vertical-align: bottom;
height: 30px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
text-decoration: none;
left: 50px;
}

 

My website runs fine in IE6. However in IE7 and firefox,
the footer doesn't align properly.How canI fix this?
Thankyou.

Website: www.gurkhas.com



<div id="footer">


<div id="footermenu">


<asp:Menu ID="mnuFooter" runat="server"


style="margin-left:auto; margin-right:auto;"


CssClass="footermenulink"


DataSourceID="SiteMapDataSource1"


Orientation="Horizontal"


MaximumDynamicDisplayLevels="0"


SkipLinkText=""


StaticDisplayLevels="2" meta:resourcekey="mnuFooterResource1" />


<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />


</div>


<div id="footertext">


<small>Copyright &amp;copy; 2007 Gurkhas.com </small> <a href="http://www.gurkhas.com"></a>


</div>


</div>


CSS:


#footermenu


{


text-align: center;


padding-top: 10px;


}


#footertext


{


text-align: center;


padding-top: 3px;


}


#footer


{


border-top: solid 2px #8d2d23;


padding: 0px;


margin: 0px;


width: 100%;


height: 62px;


background-color: #fc9a0e;


visibility: visible;


}


.footermenulink


{


font-family: Arial, Serif;


font-size: 12px;


font-weight: bold;


text-transform: uppercase;


}


.footermenulink a


{


text-decoration: none;


color: #8d2d23;


}

 

Give us a few details and we can work it out for you.
1) Master page?
2) External CSS? In the site root?
Anything else you can think of that may lead us to provide you with the help needed.

btw, you can see the CSS I posted live here: http://sdknuts.net
Salute,
Mark

 

Here's a little something that may be what you're looking for:
http://www.alistapart.com/articles/negativemargins

Example, renders the same in IE and Firefox:
http://www.alistapart.com/d/negativemargins/ex5.htm

Code for that page:

 

Thanks for looking into this.Theproblem istexts from the content page overflows the footer.


CSS is in the site root.MasterPageis below.


CSS content:


body


{


margin: 0px;


font-family: Verdana, Arial, Serif;


font-size: 12px;


}


td


{


vertical-align: top;


}


td.fieldname


{


text-align: right;


}


hr


{


color: Maroon;


}


#container


{


background-color: #ffb487;


}


#container2


{


background-color: #8d2d23;


margin-right: 200px;


}


#header


{


padding: 0px;


margin: 0px;


width: 100%;


height: 150px;


background-image: url(images/HeaderSlice.gif);


}


#header2


{


padding: 0px;


margin: 0px;


width: 260px;


height: 150px;


background-image: url(images/Header.gif);


}


#headermenu


{


position: absolute;


top: 124px;


left: 245px;


width: 700px;


padding: 2px 2px 2px 2px;


}


#breadcrumb


{


background-color: #4e1e1a;


color: white;


padding: 3px;


font-size: 10px;


padding-left: 5px;


}


#breadcrumb a


{


color: #c0c0c0;


}


#footermenu


{


text-align: center;


padding-top: 10px;


}


#footertext


{


text-align: center;


padding-top: 3px;


}


#bannerbox


{


border: dotted 3px #8d2d23;


margin-top: 20px;


margin-bottom: 20px;


margin-left: 10px;


margin-right: 10px;


padding: 5px;


text-align: center;


background-color: #fcd4be;


}


#bannerbox a


{


font-size: 10px;


text-decoration: none;


color: black;


}


#loginbox


{


position: absolute;


top: 14px;


right: 10px;


width: 180px;


height: 80px;


padding: 2px 2px 2px 2px;


font-size: 10px;


}


#loginbox input


{


color: #8d2d23;


border-color: #8d2d23;


background-color: #f8b502;


font-size: 10px;


}


#themeselector


{


position: absolute;


text-align: right;


top: 122px;


right: 10px;


width: 180px;


height: 80px;


padding: 2px 2px 2px 2px;


font-size: 10px;


}


#themeselector select


{


color: #8d2d23;


background-color: #fc9a0e;


font-size: 10px;


}


#welcomebox


{


font-size: 12px;


text-align: right;


}


#footer


{


border-top: solid 2px #8d2d23;


padding: 0px;


margin: 0px;


width: 100%;


height: 62px;


background-color: #fc9a0e;


visibility: visible;


}





#leftcol


{


position: absolute;


top: 150px;


right: 0px;


width: 200px;


background-color: #ffb487;


font-size: 10px;


}


#leftcol a


{


color: blue;


}


#leftcol div.text


{


padding: 6px 6px 6px 6px;


text-align: justify;


}


#leftcol div.alternatetext


{


padding: 6px 6px 6px 6px;


background-color: #fcd4be;


text-align: justify;


}


#leftcol div.sectiontitle, #leftcol .sectiontitle span


{


padding: 6px 6px 6px 3px;


background-color: #8d2d23;


color: white;


font-size: 12px;


font-weight: bold;


text-transform: uppercase;


}


#centercol


{


position: relative;


margin-left: 200px;


padding: 0px;


background-color: white;


height: 500px;


}


#centercolcontent


{


padding: 15px 6px 15px 6px;


}


#centercolcontent div.sectiontitle, #centercolcontent .sectiontitle span


{


font-weight: bold;


font-size: larger;


color: Maroon;


}


#centercolcontent div.sectionsubtitle


{


font-weight: bold;


padding-bottom: 4px;


}


#rightcol


{


position: absolute;


top: 150px;


left: 0px;


width: 198px;


color: White;


background-color: #8d2d23;


font-size: 10px;


}





#rightcol a


{


color: Yellow;


}


#rightcol div.text


{


padding: 6px 6px 6px 6px;


text-align: justify;


}


#rightcol div.sectiontitle, #rightcol .sectiontitle span


{


padding: 6px 6px 6px 3px;


background-color: #76110c;


color: #fc9a0e;


font-size: 12px;


font-weight: bold;


text-transform: uppercase;


}


.footermenulink


{


font-family: Arial, Serif;


font-size: 12px;


font-weight: bold;


text-transform: uppercase;


}


.footermenulink a


{


text-decoration: none;


color: #8d2d23;


}


.headermenulink


{


font-family: Impact;


font-size: 17px;


}


.headermenulink a


{


text-decoration: none;


color: black;


}


.headermenulink a:hover


{


text-decoration: underline overline;


color: #8d2d23;


}


.highlightcity


{


background-color: #bb392f;


}


.highlightstate


{


background-color: #ffb401;


}


.highlightcountry


{


background-color: #ffb487;


}


.articlebox


{


background-color: #fff6eb;


color: maroon;


border: dashed 1px #723330;


padding: 6px 6px 6px 6px;


font-size: smaller;


}


.articletitle


{


font-size: 18px;


font-weight: bold;


color: #723330;


text-decoration: none;


}


.articleabstract


{


padding-top: 6px;


}


.comment


{


padding: 4px 0px 4px 0px;


font-size: smaller;


}


.pollbox


{


font-size: 11px;


}


.pollcontent


{


padding: 6px;


}


.pollquestion


{


font-size: 13px;


font-weight: bold;


}


.polloptions


{


padding-top: 10px;


padding-bottom: 4px;


}


.pollbar


{


background-color: red;


font-size: 4px;


}


.progressbarcontainer


{


width: 98%;


height: 15px;


border: solid 1px black;


padding: 1px;


}


.progressbar


{


width: 0px;


background-color: Red;


height: 15px;


}


.newsletterbox


{


font-size: 11px;


}


.newsletterboxcontent


{


padding: 6px;


}


.postinfo


{


background-color: #ebb267;


font-weight: bold;


text-align: center;


}


.posttitle


{


padding: 3px;


margin-bottom: 10px;


background-color: #df830b;


color: white;


font-weight: bold;


}


.postbody


{


padding: 3px;


}


.shoppingcartbox


{


font-size: 11px;


}


.shoppingcartboxcontent


{


padding: 6px;


}





Master Page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head id="Head1" runat="server">


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />


<title>Gurkhas.com</title>


</head>





<form id="Main" runat="server">


<div id="header">


<div id="header2">


<div id="headermenu">


<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />


<asp:Menu ID="mnuHeader" runat="server" CssClass="headermenulink" DataSourceID="SiteMapDataSource1"


MaximumDynamicDisplayLevels="0" Orientation="Horizontal" SkipLinkText="" StaticDisplayLevels="2">


</asp:Menu>


</div>


</div>


<div id="loginbox">


Login box here...


</div>


<div id="themeselector">


<mb:ThemeSelector ID="ThemeSelector1" runat="server" />


</div>


</div>


<div id="container">


<div id="container2">


<div id="rightcol">


<div class="text">


Some text...


</div>


<asp:ContentPlaceHolder ID="RightContent" runat="server">


</asp:ContentPlaceHolder>


</div>


<div id="centercol">


<div id="breadcrumb">


<asp:SiteMapPath ID="SiteMapPath1" runat="server">


</asp:SiteMapPath>


</div>


<div id="centercolcontent">


<asp:ContentPlaceHolder ID="MainContent" runat="server">


<p>


&amp;nbsp;</p>


<p>


&amp;nbsp;</p>


<p>


&amp;nbsp;</p>


<p>


&amp;nbsp;</p>


<p>


&amp;nbsp;</p>


<p>


&amp;nbsp;</p>


<p>


&amp;nbsp;</p>


<p>


&amp;nbsp;</p>


</asp:ContentPlaceHolder>


</div>


</div>


<div id="leftcol">


<div class="sectiontitle">


<asp:Image ID="imgArrow1" runat="server" ImageUrl="~/images/arrowr.gif" ImageAlign="Left"


hspace="6" />Site News


</div>


<div class="text">


News Header</b>


News text...


</div>


<div class="alternatetext">


News Header</b>


Other news text...


</div>


<asp:ContentPlaceHolder ID="LeftContent" runat="server">


</asp:ContentPlaceHolder>


<div id="bannerbox">


<a href="http://www.bbc.com" target="_blank">Website Template





<asp:Image ID="TemplateMonsterBanner" runat="server" ImageUrl="~/images/templateMonster.jpg"


Width="100px" />


</a>


</div>


</div>


</div>


<div id="footer">


<div id="footermenu">


<asp:Menu ID="mnuFooter" runat="server" Style="margin-left: auto; margin-right: auto;"


CssClass="footermenulink" DataSourceID="SiteMapDataSource1" Orientation="Horizontal"


MaximumDynamicDisplayLevels="0" StaticDisplayLevels="2">


</asp:Menu>


</div>


<div id="footertext">


<small>Copyright &amp;copy; 2007 Gurkhas.com &amp;amp; <a href="http://www.gurkhas.com"


target="_blank"> </a>


</small>


</div>


</div>


</div>


</form>


</body>


</html>

 

<STRIKE>OK...I'll create a few pages with your latest code, reformat it and get back here in a bit...

I've attached a sample site I created with your posted code.
Added some sample images to match the names of the image names in your code.

The attached site will now be "workable" for you.
Salute,
Mark


Post Edited (wisemx) : 1/28/2008 11:59:48 PM GMT