|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
January 9th, 2005, 09:15 AM
|
||||
|
||||
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
__________________
Work to live, don't live to work Last edited by Spongy : January 9th, 2005 at 10:42 AM.
|
|
#2
January 10th, 2005, 08:17 AM
|
|||
|
|||
|
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)
|
|
#3
January 10th, 2005, 08:40 AM
|
||||
|
||||
|
To supplement pocketsized's post, what happens if you reduce your width property to 494px?
[or even a couple more pixel reduction if possible]
|
|
#4
January 10th, 2005, 09:44 AM
|
||||
|
||||
|
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 09:55 AM.
|
|
| Viewing: Dev Articles Community Forums > Web Design > Advanced Web Development > Positioning difference IE vs FF |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
