Positioning difference IE vs FF

Dev Articles Community Forums Sponsor:

Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

January 9th, 2005, 08:15 AM

Spongy

Alternately High

Join Date: Feb 2004

Location: Hilversum, Netherlands

Posts: 223

Time spent in forums: 13 h 56 m 41 sec
Reputation Power: 5

Positioning difference IE vs FF

Help!

This isn't supposed to happen, but it did. I cannot find the problem.

Please take a look at the screenshots and you will see the problem immediately.
This is my XHTML:

Code:

<!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>Fetish-Fantastique.nl</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<link rel="stylesheet" type="text/css" href="2c-hd-ft-fixed-layout.css" />
<link rel="stylesheet" type="text/css" href="2c-hd-ft-fixed-presentation.css" />
</head>
<body>
<div id="outer">
<div id="hdr"></div>
<div id="bar"><p>The Hot and Horny Party of the North</p></div>
<div id="bodyblock" align="right">
<div id="l-col">
<a href="#">Home</a><br />
<a href="#">Pictures</a><br />
<a href="#">Route</a><br />
<a href="#">Contact</a><br />
<a href="#">Links</a><br />
</div>
<div id="cont">
<h3>Een Kinky Fetish party Fantastique!!</h3>
<p style="font-weight:bold;">Waarom een fkinky fetish party in Noord nederland? 
Omdat er erg veel mensen zijn met een heerlijke fetish en daar met andere mensen heerlijke feesten wil meemaken. 
Allereerst, wat is een fetish? Even een paar qoutes van verschillende bronnen:</p>
<img src="images/drescode_4.jpg" alt="" title="" />

Het verschil tussen fetish en mania 
Met fetish bedoelen we de behoefte aan een voorwerp, kleding of lichaamsdeel, dat iemand nodig heeft bij zijn/haar seks. Zonder aandacht te besteden aan dat voorwerp is de seks niet compleet (en kan diegene ook niet écht opgewonden worden).
Met mania bedoelen we sexuele neigingen die wat extreem zijn, of waarbij je bepaalde on-sexuele dingen betrekt, maar alleen als uitbreiding van je sexleven. Het is dus geen noodzaak.

</div>
</div>
<div id="ftr" align="center">Copyright ©2005 Fetish-Fantastique.nl</div>
</div>

</body>
</html>

And this is the css:

Code:

body {
 margin:20px;
 background-color:#666666;
 text-align:center;
 padding:0;
 background-image:url(logo2.gif);
 background-position:left top;
 background-repeat:no-repeat;
 background-attachment:fixed;
 }

#outer {
 text-align:left;
 border:1px solid #000000;
 width:650px;
 margin:auto;
 }

#hdr {
 height:60px;
 background:#000000;
 background-image:url(logo.png);
 color: #333333;
 }

#bar {
 height:25px;
 background:#000000;
 border:solid #000000;	
 border-width:1px 0 1px 0;
 padding-left: 5px;
 }

#bodyblock {
 position:relative;
 background: #000000;
 width:650px;
 padding:0;
 }

#l-col {
 float:left;
 background:#FFFFFF;
 width:145px;
 text-align:left;
 padding-left: 10px;
 }

#cont {
 width:495px;
 background:#292929;
 border:solid #000000;	
 border-width:0 0 0 1px;
 text-align:left;
 }

#ftr {
 height:25px;
 background:#c0c0c0;
 color: #333333;
 border:solid black;
 border-width:1px 0 0 0;
 margin:0;
 }

Please help cause I'm getting desperate!

Thanks in advance,

Spongy

Attached Images

	screenshot_FF.gif (43.6 KB, 692 views)
	screenshot_IE.gif (43.2 KB, 627 views)

__________________
Work to live, don't live to work

Last edited by Spongy : January 9th, 2005 at 09:42 AM.

January 10th, 2005, 07:17 AM

pocketsized

Registered User

Join Date: May 2004

Location: Brunei

Posts: 26

Time spent in forums: < 1 sec
Reputation Power: 0

The problem is that there isn't enough horizontal space for the div #cont.

Code:

  #outer {
    text-align:left;
    border:1px solid #000000;
  width:650px;
    margin:auto;
    }
   
  #bodyblock {
    position:relative;
    background: #000000;
  width:650px;
    padding:0;
    }

You've allowed a max horizontal width of 650px.

Code:

   #l-col {
    float:left;
    background:#FFFFFF;
  width:145px;
    text-align:left;
    padding-left: 10px;
    }

Total width of #l-col = 145 + 10 = 155px. There is only 495px left for #cont

Code:

   #cont {
  width:495px;
    background:#292929;
    border:solid #000000;	
  border-width:0 0 0 1px;
    text-align:left;
    }

Total width of #cont = 495 + 1 = 496px. You are 1-pixels to many.

I commented out the border declarations but strangely it still didn't display properly in IE until I added a float: left to #cont.

Code:

    #cont {
   float: left;
   width:495px;
     background:#292929;
   /*border:solid #000000;	
   border-width:0 0 0 1px;*/
     text-align:left;
     }

If you still want your borders, then remove the horizontal width required from the the width declaration (495px)

January 10th, 2005, 07:40 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

To supplement pocketsized's post, what happens if you reduce your width property to 494px?
[or even a couple more pixel reduction if possible]

January 10th, 2005, 08:44 AM

Spongy

Alternately High

Join Date: Feb 2004

Location: Hilversum, Netherlands

Posts: 223

Time spent in forums: 13 h 56 m 41 sec
Reputation Power: 5

First of all, thanks for the replies! This really got me thinking about it. I tried MadCowDzz solution first (for the simplicity of course). Just reducing it with a pixel didn't work. Until I floated the whole thing to the left, like pocketsized suggestion. I got rid of the borders, since I didn't need them anyway, and now the page looks superb in IE but.... in FF the outerdiv wasn't continued around the #cont-div because of the float:left; A clear:both; on the footer did the job. After I'd set the background-color for the #outer-div, the page really looked good in both browsers.

For people who are interested, this is the code as I have it right now:

Code:

body {
 margin:20px;
 background-color:#666666;
 text-align:center;
 padding:0;
 background-image:url(logo2.gif);
 background-position:left top;
 background-repeat:no-repeat;
 background-attachment:fixed;
 }

#outer {
 text-align:left;
 border:1px solid #000000;
 width:650px;
 margin:auto;
 background-color:#000000;
 }

#hdr {
 height:60px;
 background:#000000;
 background-image:url(logo.png);
 color: #333333;
 }

#bar {
 height:25px;
 background:#000000;
 border:solid #000000;	
 border-width:1px 0 1px 0;
 padding-left: 5px;
 }

#bodyblock {
 position:relative;
 background: #000000;
 width:650px;
 padding:0;
 }

#l-col {
 float:left;
 background:#000000;
 width:145px;
 text-align:left;
 padding-left: 10px;
 }

#cont {
 width:495px;
 background:#292929;
 /*border:solid #000000;	
 border-width:0 0 0 1px;*/
 text-align:left;
 float: left;
 }

#ftr {
 height:25px;
 background:#c0c0c0;
 color: #333333;
 border:solid black;
 border-width:1px 0 0 0;
 margin:0;
 clear:both;
 }

Thanks again, see you next time.

Spongy

Last edited by Spongy : January 10th, 2005 at 08:55 AM.

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: