IE vs Firefox CSS

ASP Free Forums Sponsor:

May 1st, 2005, 01:39 AM

oren

Contributing User

Join Date: Feb 2005

Posts: 36

Time spent in forums: 7 h 24 m 29 sec
Reputation Power: 4

IE vs Firefox CSS

HI,

I used CSS to style a template. I used a container DIV and placed an image as its background, then I made 4 more floating divs and positioned them on top of the image to serve as: Main area, left (side) area, top navigation, and footer.
This all works fine in firefox, but when i opened the page in IE it wasn't even close.
I tried using position:absolute instead of float:left, but there where still problems and variations with that.

Here is the style sheet:

Code:

 
#container{
 margin:0 auto;
 width:780px;
 height:650px;
 background-image:url(../images/template01.gif);
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}
#topnav{
 float:left;
 margin-top:100px;
 margin-left:292px;
 width:471px;
 height:30px;
 padding-left:15px;
} 
#topnav ul, #footer ul{
 list-style:none;
}
#topnav li, #footer li{
 float:left;
}
#topnav a, #footer a{
 text-decoration:none;
}
#topnav a, #topnav li, #footer a, #footer li{
 color:#FFFFFF; 
 font-weight:bold;
}
#topnav a:hover{
 color:#FF6600;
}
#footer a:hover{
 color:#000000;
}
#main{
 float:left;
 position:absolute;
 margin-top:132px;
 margin-left:292px;
 width:471px;
 height:411px;
 padding-left:15px;
 padding-top:59px;
 line-height:15px; 
}
#side{
 float:left;
 margin-top:212px;
 margin-left:40px;
 width:222px;
 height:200px;
 padding-left:18px;
 padding-right:10px;
 padding-top:58px;
 line-height:15px;
}
#footer{
 clear:both;
 width:611px;
 height:37px;
 padding-left:167px;
 padding-top:8px;
}

Here is the html:

Code:

 <body> 
<div id="container">
 <div id="topnav">
  <ul>
   <li><a href="#">Home</a>|</li>
   <li><a href="#">Company</a>|</li>
   <li><a href="#">Services</a>|</li>
   <li><a href="#">Clients</a>|</li>
   <li><a href="#">Help Center</a>|</li>
   <li><a href="#">Contact Us</a></li>
  </ul>
 </div>
  
 <div id="side">
  Web services is the latest and clearly
  favored denomination invoked to
  describe a way of allowing computers
  to interact and make decisions based
  on the data that has been fed to them.  
  Web services is the latest and clearly
  favored denomination invoked to
  describe a way of allowing computers
  to interact and make decisions based
  on the data that has been fed to them.
 </div>
 
 <div id="main">
  <p>
  The Labyrinthine Nature of Web Services 
  Web services is the latest and clearly favored denomination invoked to describe a way of allowing computers to interact and make decisions based on the data that has been fed to them. That much is true. But what non-analysts or non-standards gurus may not know, is that there are other options, albeit ones that are not as popular today. Yet analysts and standards workers have maintained that schemas such as ebXML, or electronic business Extensible Markup Language, remain viable. 
  </p>
  <p>Web services versus ebXML
  For those that go back a little ways in the software networking annals, ebXML is meant to be an extension of EDI or Electronic Data Interchange. ebXML has also been around for a couple of years -- the messaging aspect of the seven-parts of the ebXML standard was ratified in 2000.
  </p>
  <p>The end purpose in all of this is for the computer and corresponding network to fill items such as purchase orders, and to fill them intelligently. For instance, if a computer has two copies of the same purchase order, with the functionalities provided by ebXML, the computer will know that it should only process one of them. This can be crucial in businesses whose systems process POs numbering in the millions. 
  </p>
  <p>B2B arrangements are devised of horizontal and vertical parts. On the horizontal stacks, there are software functions such as messaging, routing and packaging data. On the vertical side, there are business processes, such as a purchase order. That's in general; there are cases where a PO can be part of the horizontal stack. 
  </p>
 </div>
 
 <div id="footer">
  <ul>
   <li><a href="#">Home</a>|</li>
   <li><a href="#">Company</a>|</li>
   <li><a href="#">Services</a>|</li>
   <li><a href="#">Clients</a>|</li>
   <li><a href="#">Help Center</a>|</li>
   <li><a href="#">Contact Us</a></li>
  </ul>
 </div>
</div>
</body>

Screen shots would probably help but I'm not sure how to put them here.

Please help!

Thanks,
Oren

May 1st, 2005, 02:27 AM

GeekGirl

Contributing User

Join Date: May 2005

Location: Sydney, Australia

Posts: 271

Time spent in forums: 2 Days 15 h 10 m 12 sec
Reputation Power: 4

Hi Oren, I don't know if this helps but I saved this code from a CSS help site (can't remember where). I haven't tested it myself, but I assume the way it's arranged allows each browser to read differently:

Sorry this response is a bit vague... but it's worth a try. Let me know how you get on.

Code:

   
#style1 {
	padding: 55px 35px 35px 0;
	width: 150px !important; /* Styles for Mozilla, Safari, IE Mac */
	width: 180px; /* Styles for MS IE5 PC */
	width/**/:/**/150px; /* Styles for IE6 PC */}

May 2nd, 2005, 03:53 AM

oren

Contributing User

Join Date: Feb 2005

Posts: 36

Time spent in forums: 7 h 24 m 29 sec
Reputation Power: 4

Quote:

Originally Posted by GeekGirl

Code:

 
#style1 {
	padding: 55px 35px 35px 0;
	width: 150px !important; /* Styles for Mozilla, Safari, IE Mac */
	width: 180px; /* Styles for MS IE5 PC */
	width/**/:/**/150px; /* Styles for IE6 PC */}

Hi,

Im not sure what this peice of code is for, but the width of the divs is not the problem. The divs are just all over the place when viewed in IE6, where as in Firefox everything looks like its supposed to!

May 2nd, 2005, 05:25 AM

Phoenix

Web-Standards Evangelist

ASP Free Intermediate (1500 - 1999 posts)

Join Date: Nov 2003

Posts: 1,522

Time spent in forums: 4 Days 23 h 48 m 4 sec
Reputation Power: 8

That piece of code is a CSS hack... you're not meant to use them.

You could use absolute positioning, just don't forget to set the container to "relative", otherwise they'll be positioned relative to the body element. (or the next positioned parent element)

May 2nd, 2005, 07:35 PM

oren

Contributing User

Join Date: Feb 2005

Posts: 36

Time spent in forums: 7 h 24 m 29 sec
Reputation Power: 4

Quote:

Originally Posted by 1337_d00d

Thanks!
That's what I tried before reading this and it worked! It works if I set the container to both relative or absolute...hmmm???

anyways, it works so thanks for the replies!
Oren

May 2nd, 2005, 07:52 PM

Phoenix

Web-Standards Evangelist

Join Date: Nov 2003

Posts: 1,522

Time spent in forums: 4 Days 23 h 48 m 4 sec
Reputation Power: 8

"relative" is relative to the element's original position whilst maintaining the original space used. Consider it like "off-setting" elements. It's how you do the "out-of-place" typography you see here

"absolute", however... is relative to the next parent container with any kind of positioning applied. Be it absolute, relative, fixed, or static. The <body> element is the "root parent" (in most cases, note that proper XML/Box-Based browsers (i.e.: Not Trident IV) treat <html> as the "root parent" element for visual elements)

So, if you want to have an element positioned absolutely (relative to its parent), but don't want its parent positioned absolutely... then you give the parent position: relative; without any position properties, which means that it has both "position" and without moving anywhere.

And don't bother with "fixed"... Trident IV doesn't support it, plus its only real use is replacing frames for things like nav lists.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: