Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Mozilla Top-Margin Problem


  • Please log in to reply

#1
Maitreya

Maitreya

    New Member

  • Member
  • Pip
  • 3 posts
A weird case in which IE is rendering the layout perfectly but not Mozilla. I tried overflow:auto to all divs as the contents are floated without any help. May be I am not able to pick the right div. I don't know what can help me now. I have to add another box below and am sure it will face the same problem.

Help awaited

THE CSS
#Header {
	height: 75px;
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	background-image:url(../Images/Header.jpg);
}
#flash_header {
	height: 249px;
	width: 685px;
	border: 5px solid #dddddd;
	margin-left:25px;
	float:left;
	/*z-index:-200;*/
	list-style-image: url(../Images/onesize-001.png);
	overflow:auto;
	
}

#Logo {
	float: left;
	height: 49px;
	width: 150px;
	margin-top: 20px;
	margin-left:10px;
	
}
#menu {
	background-color: #4e4e4e;
	height: 28px;
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	color: #FFFFFF;
	font-family: tahoma,arial,verdana, helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	vertical-align: middle;
	}
#content { width:700px;
float:left;
display:block;
margin-left:25px;
margin-top:0px;
height:230px;
overflow:auto;
}
#Web_Development {
	float: left;
	height: 170px;
	width: 213px;
	border: thin solid #DDDDDD;
	color:#333333;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	font-size:11px;
	background:#eeeeee;
	
}
#Consulting {
float: left;
	height: 170px;
	width: 213px;
	margin-left: 23px;
	border: thin solid #DDDDDD;
	color:#333333;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	font-size:11px;
	background:#eeeeee;
}
#Data_Analysis { float: left;
	height: 170px;
	width: 213px;
	margin-left: 23px;
	border: 1px solid #DDDDDD;
	display: inline-block;
	color:#333333;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	font-size:11px;
	background:#eeeeee;
}



#Page_Body {
	background-color: #FFFFFF;
	height: 490px;
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	padding-top:15px;
		
}
#header_Links {
	height: 10px;
	width: 300px;
	margin-left: 10px;
	float: right;
	margin-top:40px;
	text-decoration: none;
}
#header_Links a{ text-decoration:none}
#Clients {
	float: right;
	height: 140px;
	width: 150px;
	margin-right: 25px;
	border: thin solid #dddddd;
	display: block;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	font-size:10px;
	color:#ffffff;
	background-color:#eeeeee;
	
	
}


#footer {
	background-color: #cccccc;
	height: 20px;
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	font-size:10px;
	color:#666666;
	padding-top:10px;
}

#Speak {
	height: 155px;
	width: 640px;
	margin-right: auto;
	margin-left: auto;
}
#News {float: right;
	height: 108px;
	width: 150px;
	margin-right: 25px;
	border: thin solid #dddddd;
	display: block;
	margin-top:5px;
	
}
#speakkks {float: right;
	height: 180px;
	width: 150px;
	margin-right: 25px;
	/*border: thin solid #dddddd;*/
	display: block;
	margin-top:5px;
}
#Below_menu {
	height: 33px;
	width: auto;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	font-size:11px;
	color:#046771;
	
}
#Below_menu a{
	color:#000000;
	font-size:11px;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	text-decoration:none;
}
#Below_menu a:hover{
	color:#000000;
	font-size:11px;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	text-decoration:none;
}

.input {
	border: 1px solid #999;
	background: #79b76a;
	padding:2px 8px;
	font-size:14px;
	text-decoration:none;
	color:#000000;
}
.input:hover {
	border: 1px solid #999;
	background: #717cb9;
	font-size:14px;
	text-decoration:none;
	color:#000000;
}
.inputagn {
	border: 1px solid #999;
	background: #4e4e4e;
	padding:2px 8px;
	font-size:14px;
	text-decoration:none;
	color:#FFFFFF;
	}
.inputagn:hover {
	border: 1px solid #999;
	background: #717cb9;
	font-size:14px;
	text-decoration:none;
	color:#000000;
}
#tab {
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	font-size: 12px;
}
#tab a{ color:#FFFFFF}
#tab a:hover{color:#000000}
h3{font-family:tahoma,arial,verdana, helvetica, sans-serif; font-size:14px; line-height:15px; color:#046771;}
p{font-family:tahoma,arial,verdana, helvetica, sans-serif; font-size:12px; line-height:20px; color:#333333;}
ul{font-family:tahoma,arial,verdana, helvetica, sans-serif; font-size:12px; line-height:20px; color:#333333; padding-left:15px}
#MISVIS {
	/*border: 1px solid #999999;*/
}
h4{font-family:tahoma,arial,verdana, helvetica, sans-serif; font-size:16px; line-height:15px; color:#be2829; margin-top:0px}
.links{
	list-style-image: url(../Images/onesize-019.png);
}
ul ul {list-style-image:url(../Images/arrow-a-4.png)}

#marqueecontainer{
position:relative;
	height: 105px;
	width: 150px;
	display: block;
	font-family:tahoma,arial,verdana, helvetica, sans-serif;
	color:#ffffff;
	background-color:#eeeeee;
	overflow: hidden;
	margin-top:8px;
	}
#casestudy{
border:1px #046671 solid;
width:470px;
float:left;
height:175px;
}
#brochure{border:1px solid #046671; width:200px;
float:right; height:175px;}

#whitepaper{border: 1px solid #046671; width:683px;
margin-top:40px; overflow:auto;}

The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Resources - Stragure | Web Technology Consulting | IT Services | Data Analytics</title>
<script type="text/javascript" src="Scripts/script.js"></script>
<link rel="stylesheet" href="Styles/style.css" type="text/css" media="screen" />

   <!--[if IE 6]><link rel="stylesheet" href="Styles/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<style type="text/css">
<!--
body {
	background-color: #aaaaaa;	margin-top: 0px;
}
-->
</style>
<link href="Styles/Standard.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #660000;
}
a:active {
	color: #000000;
}
#speakkks {
}
#c_Speak {
}
-->
</style>
</head>

<body>
<div id="Header">
  <div id="Logo"><a href="index.html" target="_self"><img src="Images/logo.jpg" alt="Stragure Software Technologies" border="0" longdesc="index.html" /></a></div>

  <div id="header_Links"><a href="index.html" target="_self">HOME</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="ContactUs.php">CONTACT US</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="Careers.html">CAREERS</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="SiteMap.html">SITE MAP</a></div>
</div>

<div id="menu"> <div class="nav">
					<ul class="artmenu">
						<li><a href="AO.html"><span><span>About Us</span></span></a> <ul>
										<li><a href="MissionVision.html">Mission & Vision</a> </li>
										<li><a href="CorporateHistory.html">Corporate History</a> </li>
										<li><a href="Management.html">Management Team</a> </li>
									</ul></li>
						<li><a href="IO.html" ><span><span>IT Services</span></span></a> <ul>
										<li><a href="AD.html">Application Development</a>
										<ul><li><a href="SIIDM.html">SIIDM</a></li>
										<li><a href="VWDM.html">VWDM</a></li> 
										<li><a href="DDD.html">DDD</a></li></ul> </li>
										<li><a href="AH.html">Application Hosting</a> </li>
										<li><a href="WTS.html">Web Technology Solutions</a> </li>
										<li><a href="BIDW.html">BI and DW</a> </li>
										<li><a href="SRMC.html">SRM Consulting</a> </li>
										<li><a href="TC.html">Technology Consulting</a> </li>
									</ul>
									</li>
						<li><a href="ESO.html"><span><span>Enterprise Solutions</span></span></a>
						<ul>
										<li><a href="MIS.html">Management Information Systems</a> </li>
										<li><a href="ECS.html">eCommerce</a> </li>
										<li><a href="BPM.html">Workflow Management Solutions</a> </li>
										<li><a href="GPSTS.html">GPS Tracking Solutions</a> </li>
										<li><a href="BAR.html">Business Analytics and Reports</a> </li>
									</ul></li>
									 <li><a href="TO.html" ><span><span>Technology</span></span></a> <ul>

										<li><a href="DF.html">Development Framework</a> </li>
										<li><a href="PAM.html">Web Performance Management</a> </li>
									</ul>
									</li>
						<li><a href="Resources.html" class="active"><span><span>Resource Library</span></span></a></li>
						<!--<li><a href="Clients.html"><span><span>Clients</span></span></a></li>-->
					</ul>
					<div class="l">
					</div>
					<div class="r">
						<div>
						</div></div></div></div>


<div id="Page_Body" style="height:500px;">
  <div id="flash_header" style="height:auto; border:none;">
  <div id="Below_menu"><a href="index.html" target="_self">Home</a>&nbsp;&nbsp;>&nbsp;&nbsp;Resources
</div>
<h4>Resources</h4>
<!--<div id="MISVIS">
  <img src="Images/AppDev.jpg" width="698" height="200" /></div>-->

 <div id="casestudy"><h3>Case Studies</h3>
 <ul class="links"><li><a href="Casestudy1.pdf" style="font-size:13px; text-decoration:underline; color:#046671; font-family:Verdana, Arial, Helvetica, sans-serif" target="_blank">India's Largest Loyalty Management and Customer Rewards System</a></li>

<li><a href="Casestudy2.pdf" style="font-size:13px; text-decoration:underline; color:#046671; font-family:Verdana, Arial, Helvetica, sans-serif" target="_blank">Next Gen Management Information System enables a pan-Indian rollout of a Vocational Training Initiative</a></li>

<li><a href="Casestudy3.pdf" style="font-size:13px; text-decoration:underline; color:#046671; font-family:Verdana, Arial, Helvetica, sans-serif" target="_blank">One of the largest Price comparison and cashback shopping portal on web</a></li></ul></div>


<div id="brochure"><h3>Company Brochure</h3><ul class="links"><li><a href="Stragure.ITServices.Brochure-2010.pdf" style="font-size:13px; text-decoration:underline; color:#046671; font-family:Verdana, Arial, Helvetica, sans-serif" target="_blank">Download</a></h3></li></ul></div>


<div id="whitepaper"><h3>Whitepapers</h3><ul class="links"><li><a href="Stragure.ITServices.Brochure-2010.pdf" style="font-size:13px; text-decoration:underline; color:#046671; font-family:Verdana, Arial, Helvetica, sans-serif" target="_blank">Transport Management using GPS-GSM</a></li></ul></div>

</div>



  <div id="Clients"><img src="Images/News.jpg" alt="Customer Speak" /><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<p style="line-height:1.2em; font-size:11px;">&nbsp;&nbsp;Stragure Develothon starts &nbsp;&nbsp;on 1st of June, 2010</p>
<p style="line-height:1.2em; font-size:11px;">&nbsp;&nbsp;Stragure sets up a booth in &nbsp;&nbsp;Silicon India's StartUp City &nbsp;&nbsp;2010 on May 29th</p>
<p style="line-height:1.2em; font-size:11px;">&nbsp;&nbsp;Umesh Panditkar wins a &nbsp;&nbsp;Kangaroo from Dr. Ben Alex &nbsp;&nbsp;(Spring Source Inc.) on &nbsp;&nbsp;14th of May, 2010</p>
<p style="line-height:1.2em; font-size:11px;">&nbsp;&nbsp;Rohit Pant addresses IBM &nbsp;&nbsp;Develothon at Royal Orchid, &nbsp;&nbsp;Bangalore on 31st March, &nbsp;&nbsp;2010</p>
<p style="line-height:1.2em; font-size:11px;">&nbsp;&nbsp;Stragure launches &nbsp;&nbsp;Application Hosting Services &nbsp;&nbsp;on 26th March, 2010</p>
<p style="line-height:1.2em; font-size:11px;">&nbsp;&nbsp;Shantanu Roy addresses a &nbsp;&nbsp;conference at IL&FS &nbsp;&nbsp;Conclave at NIRD, &nbsp;&nbsp;Hyderabad in September, &nbsp;&nbsp;2009</p>


</div>
</div></div>
  <div id="News"><img src="Images/Clients.jpg" alt="Clients" /><br />
<br />

	<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','162','height','70','title','Clients','src','Flash/clients','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/clients', 'wmode', 'transparent' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="162" height="70" title="Clients">
	  <param name="movie" value="Flash/clients.swf" />
	  <param name="quality" value="high" />
	  <param name="wmode" value="transparent" />
	  <embed src="Flash/clients.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="162" height="70"></embed>
	</object>
  </noscript></div>



  <div id="speakkks"><img src="Images/Customer.jpg" />
	<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','150','height','200','title','Speak','src','Flash/Hello','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/Hello' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="150" height="200" title="Speak">
	  <param name="movie" value="Flash/Hello.swf" />
	  <param name="quality" value="high" />
	  <embed src="Flash/Hello.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="150" height="200"></embed>
	</object>
  </noscript></div>

</div>

<div id="footer">Copyright &copy;2010 All Rights Reserved&nbsp;|&nbsp;<a href="Disclaimer.html" target="_self">Disclaimer</a>&nbsp;|&nbsp;<a href="PP.html">Privacy Policy</a> </div>
</body>
</html>

Sorry for the messed up HTML/CSS, am still learning. :)
Thank you in advance!
  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Didn't run your code through the validators, but Mozilla rarely is the problem. If you design to Mozilla then you can use Conditional Statements for IE to whip it into shape as I see you have done. Have you tried the Universal Selector at the very top of your CSS?
* { margin: 0; padding: 0; border: 0; }

Validators to check your code:

CSS

HTML
  • 0

#3
Maitreya

Maitreya

    New Member

  • Topic Starter
  • Member
  • Pip
  • 3 posts
Its showing no margin for Mozilla...no matter what. In firebug it shows the margin is going into the above div. If I increase the height of #brochure its coming down. Used images in wwww.stragure.com/resources.html
Looks good only in IE. :)
  • 0

#4
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Try correct the errors first:

CSS

The HTML will not solve the problem, but were flagged because you are using a XHTML 1.0 document type:

HTML

I still don't see much difference in top margin in Firefox and IE. There are BIG differences in the way the content in FF has no padding from the edges of the borders. Big shift between those two browser views as expected because IE never parses pages properly. Even IE 8 is still about 10 years behind current web standards.

I would get the site looking good in FIREFOX first and then tweak the IE only CSS to fix any differences.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP