Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Mozilla Top-Margin Problem

Started by Maitreya , Jun 21 2010 05:28 AM

  • Please log in to reply

#1
Maitreya
Posted 21 June 2010 - 05:28 AM

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
Posted 21 June 2010 - 09:01 PM

AstraNut

    Member

  • Member
  • PipPipPip
  • 465 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
Posted 21 June 2010 - 11:26 PM

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
Posted 22 June 2010 - 12:49 AM

AstraNut

    Member

  • Member
  • PipPipPip
  • 465 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
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP