Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

My site is different in IE to FF..WHY??? 1

Status
Not open for further replies.

Floodster

Technical User
Jan 28, 2005
204
HI,
I have built my site & have been testing it in FF & IE. When displayed in IE it puts the navigation bar where I want it but in FF it displays it further to the right.
To get a visual you can look at it :
my CSS code is (I have left some out that aren't relevant to this query);
Code:
body{
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0;
}
#main_nifty {
	position: relative;
	background-color: #A0D6A4;
	width: 970px;
	height: auto;
	margin: 1em 1em 1em 1em;
	overflow:auto;
}
#container{
	background:#A0D6A4;
	float: left;
	width: 700px;
	margin-top:4em;
	margin-bottom:1em;
	margin-left:1em;
	margin-right:0.5em;
	}
#menu{
	background:#A0D6A4;
	float: left;
	height: auto;
	width: 220px;
	margin-bottom:1em;
}
#bottom{
	background:#A0D6A4;
	margin: 1em 1em 1em 1em;
	color: #A0D6A4;
	clear: both;
}
#menu ul{
	margin-left: 1em;
	margin-top:4em;
	list-style: none;
}
#menu li{
	font-size:120%;
	margin-bottom:1em;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#menu img{
	float:left;
	padding:0;
}
#menu a:link, #menu a:visited{
	font-size:115%;
	color:#000000;
	font-weight:normal;
	text-decoration:none;
}
#menu a:hover{
	color:#990033;
}

My code for my template is;
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="/includes/nifty.js"></script>
<script type="text/javascript" src="/includes/layout.js"></script>
<!--#include virtual="/includes/includes.asp"-->
<link href="/css/menu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/css/niftyPrint.css" media="print" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>M&amp;B Golf Society</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<%
' *** Logout the current user.
dim logout
logout=request.querystring("logout")
If logout=1 then
  Session.Contents.Remove("sess_User_Logname")
 End If
%>

</head>
<body>
<!--open main_nifty which wraps around all of the menu & container-->
<div id="main_nifty"> 
    <!--open menu-->
  <div id="menu"> 
    <ul>
      <li><img src="/images/golf_ball.gif" alt="golf_ball" /><a href="/navigation/home.asp">Home</a></li>
      <li><img src="/images/golf_ball.gif" alt="golf_ball" /><a href="/navigation/fixtures.asp">Fixtures</a></li>
      <li><img src="/images/golf_ball.gif" alt="golf_ball" /><a href="/navigation/results.asp">Results</a></li>
      <li><img src="/images/golf_ball.gif" alt="golf_ball" /><a href="/navigation/winners.asp">Winners</a></li>
      <li><img src="/images/golf_ball.gif" alt="golf_ball" /><a href="/navigation/handicaps.asp">Handicaps</a></li>
      <li><img src="/images/golf_ball.gif" alt="golf_ball" /><a href="/navigation/members.asp">Membership</a></li>
      <li><img src="/images/golf_ball.gif" alt="golf_ball" /><a href="/navigation/contact.asp">Contact 
        Us</a></li>
    </ul>
  </div>
  <!--close menu-->
  <!--open container this is where all of the content goes-->
  <div id="container"> <!-- TemplateBeginEditable name="main_layer" --> this is 
    where you can edit </font><!-- TemplateEndEditable --> 
    <!--close container-->
  </div>
  <!--open bottom this is where copyright etc goes-->
  <div id="bottom"> 
    <p class="privacy"><a class="secret" href="/navigation/login.asp">Design by 
      John Flood</a> | <a href="[URL unfurl="true"]http://www.w3.org/">Built[/URL] to W3C Standards</a> 
      | <a href="/navigation/accessibility.asp">Accessibility</a> | <a href="/navigation/links.asp">Links</a></p>
    <a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"><img[/URL] class="w3c" 
        src="[URL unfurl="true"]http://www.w3.org/Icons/valid-xhtml10"[/URL]
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> 
    <!--close bottom-->
    <!--close main_nifty-->
  </div>
</div>
</body>
</html>

All the site works but it's annoying me why it won't display properly, I've tried messing around with different width's etc but to no avail.

Thanks in advance.
 
IE and FF use different methods to indent the lists. While IE uses margings for this, FF uses padding. Your ul (#menu ul) has specified margin-left which changes the default margin in IE to whatever you want (1em). It has no setting for padding-left, which then stays at its default value in FF (which is 40px). So your ul element has a padding of 40px in FF and none in IE. If you nullify the padding-left in css, you should get equal results.
Code:
#menu ul{
    margin-left: 1em;
    margin-top:4em;
    list-style: none;
    padding-left: 0;
}
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top