9 replies [Last post]
dthomas31uk
Offline
Enthusiast
Last seen: 6 years 26 weeks ago
Joined: 2004-11-29
Posts: 144
Points: 0

Hi, AM creating a webpage

http://www.exploitation.org.uk/Test/index.html

Everything fine in Firefox, but when viewed in IE it goes out of position.

Any ideas or advice would be much appreciated.

The css is at the following

http://www.exploitation.org.uk/Test/SunInvestStyle.css

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Help with positioning in IE

Validate the markup! :mad:

You cannot have <p> (block level) elements nested in anchors (line elements)

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 5 years 26 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

Help with positioning in IE

hello,
Ie, for some obscure reasons do sometimes, and here in your case, double the values of the margin in floating boxes.

to cure that you need to tell him somethings different.
here to test i used the !important hack, but you should apply this values through a "conditional comment" just for IE below 7.

so:
you may use as well a float:left; for #col1
and for #mainPicture try this :

			margin: 10px 10px 0px 10px!important; 
			margin: 10px 5px 0px 5px;

and again for #mainText:

			margin: 10px 10px 0px 0px!important; 
			margin: 10px 5px 0px 0px;

notice that problem seems to appears so far only in #withe box,
it shouldn't be to difficult to take care of.

I hope that helps

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 19 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

Help with positioning in IE

Hi

Usually, adding display:inline fixes doubled margin bug in IE, and doesn't affect other browsers, so doesn't need hiding in a hack.

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 2 days ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Help with positioning in IE

Careful with the use of hacks gcyrillus, this is a known bug and simply sorted with display inline, !important is not really a hack and makes me worry when I see it used too often in rule sets to try and compensate for bugs or to correct specificity problems.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dthomas31uk
Offline
Enthusiast
Last seen: 6 years 26 weeks ago
Joined: 2004-11-29
Posts: 144
Points: 0

Help with positioning in IE

Hi, have rectified my xhtml etc and have redone my CSS...like mentioned.

But still cannot get the positioning sorted in IE

http://www.exploitation.org.uk/Test/index.html

Any ideas guys ??

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 5 years 26 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

Help with positioning in IE

hello,
did you try, the float:left; to #col1 ?
( else maybe it has to do with this : #col1 is "width:133px;" and #menubox is 135px .)

(thanks, for the "inline", it was not a "known bug" for me. Smile )
Gc

<edit>just tryed, with display:inline; instead of the the "hack" !important, + float:left; to #col1, it works fine on my computer.
(you did not apply the display:inline; in the css in your link;)
+ those 2 pixels make you having to float #col1 !?

dthomas31uk
Offline
Enthusiast
Last seen: 6 years 26 weeks ago
Joined: 2004-11-29
Posts: 144
Points: 0

Help with positioning in IE

Hi, gcyrillus.....how did you get that to work?????

What I have done is created a css file that is open to all browsers
but anything that needs changing in ie is placed in another css file. This is placed within the head tag of the page.

<link href="http://www.exploitation.org.uk/Test/SunInvestStyle.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="http://www.exploitation.org.uk/Test/SunInvestIEStyle.css" rel="stylesheet" type="text/css" />
<![endif]-->

Doing it this way I don't need to use the important tag and it makes all the css code much tidier.

But cannot get it to work in IE with the col1 floating left. If you can post the code that you tried will have a play.

Much appreciated...think have been staring at it for to long that I can't find the error

regards

gcyrillus
Offline
Enthusiast
FR spoken
Last seen: 5 years 26 weeks ago
FR spoken
Timezone: GMT+2
Joined: 2005-11-16
Posts: 57
Points: 0

Help with positioning in IE

hi,
here it goes:

<!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>Sun Invest &amp; - www.suninvest.org.uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Longton Spiritualist Church,Normacot Road / Chadwick Street, Longton, Stoke-on-Trent  - www.longtonspiritualistchurch.co.uk" />
<meta name="abstract" content="Longton Spiritualist Church, Longton, Spiritualist, Church, Gordon Higginson, Fanny Higginson, Seven Principles,Emma Hardinge Britten, Robert Owen, Healing
Spiritualism,  Medium, Healer, Awareness, Development, Spiritualists National Union, Philosophy of Spiritualism, seven fundamental principles-www.longtonspiritualistchurch.co.uk" />
<meta http-equiv="Content-Language" content="en-us"/>
<meta name="keywords" content="Longton Spiritualist Church, Longton, Spiritualist, Church, Gordon Higginson, Fanny Higginson, Seven Principles,Emma Hardinge Britten, Robert Owen, Healing
Spiritualism,  Medium, Healer, Awareness, Development, Spiritualists National Union, Philosophy of Spiritualism, seven fundamental principles" />
<Style type="text/css" >
body {
			background-color:#FFF8BA;
			FONT: 74% Verdana, Arial, Helvetica, sans-serif; COLOR: #666;
			margin: 0px;
		
		}

p {
margin: 0px 0px 10px 0px;
}

#navlistVertical p {
color:#FFE01C;
}


#navcontainerVerticalPrice p {
margin: 20px 0px 20px 24px;
font-weight:bold;
color: #000;


}

#navlistVerticalPrice p {
margin: 0px 0px 10px 0px;
font-weight:bold;

}

#mainText p{
color: black;
margin: 0px 0px 10px 0px;
line-height:1.3em;
font-family:tahoma, geneva, sans-serif;
}



#textbox p {
margin:5px 6px 0px 6px;
padding: 0px 6px 0px 6px;
font-family:tahoma, geneva, sans-serif;
color:#000000;
font-size:1em;
text-decoration:none;
font-weight:normal;
line-height: 1.6;
}

#infoBox p {
margin:5px 6px 0px 6px;
padding: 0px 6px 0px 6px;
font-family:tahoma, geneva, sans-serif;
color:#000000;
font-size:1em;
text-decoration:none;
font-weight:bold;
line-height: 1.6;
text-align:center;
}

#base p {
margin:0px 6px 3px 6px;
padding: 0px 6px 0px 6px;
font-family:tahoma, geneva, sans-serif;
color:#000000;
font-size:.9em;
text-decoration:none;
font-weight:bold;
line-height: 1.6;
text-align:center;
}

a:link
{
color: #000000;
text-decoration:none;
}

a:visited
{
color: #000000;
text-decoration: none;
}


a:hover
{
color: #000000;
text-decoration: underline;
}


a:active
{
color: #000000;

}





#SevenPrinciplesList
{
padding: 0px;
margin:20px 0 0 10px;
font-weight:bold;
}



#SevenPrinciplesList li {
background:       url("http://www.exploitation.org.uk/Test/ImagesNew/PrinciplesBullet.gif") left no-repeat;
font-family:tahoma, geneva, sans-serif;
list-style: none;
margin: 20px 6px 0 6px;
padding-left:20px;
color:#000000;
}




		
h1 {
font-size:3em;
font-weight:normal;
COLOR: #000000;
margin:10px 0px 8px 5px;
padding:0px 0px 0px 0px;
font-family:"book antiqua", "palatino linotype", palatino, serif;
}

h2{
font-size:2em;
font-weight:normal;
font-style:italic;
COLOR: #000000;
margin: 15px 0px 0px 8px;
font-family:"book antiqua", "palatino linotype", palatino, serif;
}

h3 {
margin:5px 6px 0px 6px;
padding: 0px 6px 0px 6px;

font-family:tahoma, geneva, sans-serif;
color:#000000;
font-size:.9em;
text-decoration:none;
font-weight:bold;
line-height: 1.6;
}




#container {
			
			width: 790px;
			margin: 0px auto;
			padding: 0;
			
			
		}
		
#toprectangle {
			float:left;
			width:136px;
			height:25px;
			margin:0px 0px 0px 0px;
			padding:0px;
			background-color:#ffffff;
		border:0;
}	




		
#navcontainer
{
margin: 0px 0 0 0px;
padding: 0;
height: 23px;
background:0099D8;
border:0;
}

#navcontainer ul
{
margin: 0;
padding: 0;
border:0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0px 0 0 0 ;
margin: 0 0 0 0;
border:0;
}

#navcontainer ul li a
{
background: #0099D8;
width: 109px;
height:21px;
padding: 4px 0 0 0px;
margin: 0px 0 0px 0;
color: #FFEF10;
border:0;
text-decoration: none;
display: block;
text-align: center;
font-size: 1em;
font-family:tahoma, geneva, sans-serif;
}

* html #navcontainer ul li a {
width: 108px;
}



#navcontainer ul li a:hover
{
color: #fff;
background: #0099D8;
}


#navcontainer a:active
{
background: #0099D8;
color: #fff;
}

#navcontainer li#active a
{
background: #0099D8;
color: #fff;
}








#navlistVertical li
{
display: inline;
/* for IE5 and IE6 */
}

#navlistVertical
{
width: 8.5em;
/* to display the list horizontaly */
font-size: 1.1em;
font-family:tahoma, geneva, sans-serif;
margin: 0 0 0 1em;
padding: 0;


}

#navlistVertical a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color:  #0099D8;
text-align: center;
text-decoration: none;
color: #000;
}


#navlistVertical a:hover { 

background-color: #0099D8;
color: #ffffff; 
}


#navlistVertical a:visited { color: #000; }





#navlistVerticalPrice li
{
display: inline;
/* for IE5 and IE6 */
}

#navlistVerticalPrice
{
width: 9em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 1.3em;
padding: 0;
}

#navlistVerticalPrice a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;

text-align: center;
text-decoration: none;
color: #000;
}

#navlistVerticalPrice a:hover { background-color: orange; }
#navlistVerticalprice a:visited { color: #000; }








#logo {
           	float:left;
			margin:0px 0px 0px 0px;
			padding:0px 0px 0px 0px;
			width:135px;
			height: 218px;
			background:             url("http://www.exploitation.org.uk/Test/Images/logo.gif");
			display: block;
			text-indent: -4000px;
			text-decoration:none;
}



#imageBox {
			float:left;
			margin: 0px;
			padding:0px;
			width: 654px;
			height:158px;
			border-bottom: #FFE01C 5px solid;
			background-color:#FFFFFF;
}

#imageBox1 {
			float:left;
			margin: 10px 10px 0px 26px;
			padding:0px;
			width: 184px;
			height:138px;
			border: #000 1px solid;
			background-color:#FFFFFF;
}

* html #imageBox1 {
width: 180px;
margin: 10px 10px 0px 16px;
}

#imageBox2 {
			float:left;
			margin: 10px 10px 0px 10px;
			padding:0px;
			width: 184px;
			height:138px;
			border: #000 1px solid;
			background-color:#FFFFFF;
}

* html #imageBox2 {
width: 180px;
}


#imageBox3 {
			float:left;
			margin: 10px 10px 0px 10px;
			padding:0px;
			width: 184px;
			height:138px;
			border: #000 1px solid;
			background-color:#FFFFFF;
}

* html #imageBox3 {
width: 180px;
}

#whiteBox {
			float:left;
			margin: 0px;
			padding:0px;
			width: 654px;
			height:570px;
			border-top: #FFE01C 5px solid;
			background-color:#FFFFFF;
}


#mainPicture {
float:left;
			margin: 10px 10px 0px 10px;display:inline;
			padding:0px;
			width: 200px;
			height:338px;
			border: #000 1px solid;
			background-color:#FFFFFF;

}

#mainText {
			float:left;
			margin: 10px 10px 0px 0px;display:inline;
			padding:0px;
			width: 420px;
			height:338px;
			background-color:#FFFFFF;
			letter-spacing: .03em;
}


#col1 {
      
            margin:0px 0px 0px 0px;float:left;
			padding:0px 0px 0px 0px;
			width:133px;
			background-color:#FFFFFF;
			
}




#menuBox{
			
			float:left;
			margin:0px 0px 0px 0px;
			padding:0px 0px 0px 0px;
			width:135px;
			height: 520px;
			background: #0099D8;
}

#textbox {
			float:left;
			margin:10px 0px 0px 0px;
			padding:0px 0px 0px 7px;
			width:360px;
			
			background-color:#FFFFFF;
}

* html #textbox{
width: 350px;
}
		
#colLinks {
			float:right;
			margin:10px 0px 0px 0px;
			padding:0px 0px 0px 0px;
			width:203px;
			
			background-color:#FFFFFF;
}


#linksBox {
float:left;
width:192px;
margin:0px 0px 0px 0px;
padding:0px;
background-image:         url("http://www.exploitation.org.uk/Test/ImagesNew/middlenew.gif");
background-repeat:repeat-y;
}

#linksTop {
float:left;
width:192px;
height:11px;
margin:5px 0px 0px 0px;
padding:0px;
background-image:        url("http://www.exploitation.org.uk/Test/ImagesNew/topnew.gif");
background-repeat:no-repeat;
}

* html #linksTop {margin-bottom:-3px;} 


#linksBottom {
float:left;
width:192px;
height:13px;
margin:0px 0px 5px 0px;
padding:0px;
background-image:        url("http://www.exploitation.org.uk/Test/ImagesNew/bottomnew.gif");
background-repeat:no-repeat;
}








#SpiritLinks
{
padding: 0px;
margin:0px 0 0 0px;

padding-left: 10px;
font-weight:bold;
}



#SpiritLinks li {
background:          url("http://www.exploitation.org.uk/Test/ImagesNew/bulletLinks02.gif") left no-repeat;
font-family:tahoma, geneva, sans-serif;
list-style: none;
margin: 10px 0px 0 0px;
padding-left:28px;
color:#000000;
}


#infoBox {
float:left;
width:192px;
margin:0px 0px 0px 0px;
padding:0px;
background-image:          url("http://www.exploitation.org.uk/Test/ImagesNew/middle1.gif");
background-repeat:repeat-y;
}


#infoTop {
float:left;
width:192px;
height:11px;
margin:11px 0px 0px 0px;
padding:0px;
background-image:         url("http://www.exploitation.org.uk/Test/ImagesNew/top1.gif");
background-repeat:no-repeat;
}

* html #infoTop {margin-bottom:-3px;} 

#infoBottom {
float:left;
width:192px;
height:13px;
margin:0px 0px 0px 0px;
padding:0px;
background-image:         url("http://www.exploitation.org.uk/Test/ImagesNew/bottom1.gif");
background-repeat:no-repeat;
}


#base {
clear:both;
float:left;
width:780px;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
border-top: #5486bb 1px solid;
background-image:            url("http://www.exploitation.org.uk/Test/ImagesNew/top_grad1.gif");
background-repeat:repeat-x;
}











span {display:none;}
</style>
 
 
</head>
<body>

<div id="container">


	<div id="toprectangle">
	</div>


	<div id="navcontainer">
	<ul id="navlist">
	<li id="active"><a href="#" id="current">Home</a></li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Money Matters</a></li>
	<li><a href="#">Viewing Trip</a></li>
	<li><a href="#">Q &amp; A</a></li>
	<li><a href="#">After Sales</a></li>
	</ul>
	</div>



	<a id="logo" href="http://www.snu.org.uk" title="Sun Invest">Hello</a>

	<div id="imageBox">

		<div id="imageBox1"></div>

		<div id="imageBox2"></div>

		<div id="imageBox3"></div>



	</div>

	<div id="whiteBox" style="float:right;">

	<div id="mainPicture"></div>

	<div id="mainText">

	<p>Making a decision to buy property overseas is a very important one that requires a great deal of investigation and information.</p>

	<p>We are a UK based Company in Meir Heath, Stoke-on-Trent, Staffordshire with 7 years personal experience of buying, selling, renting property, living and working in Spain.</p>

	<p><strong>OUR EXPERIENCE CAN ONLY BE TO YOUR ADVANTAGE.</strong></p>


	</div>

	</div>

<div id="col1" >

	<div id="menuBox">


	<div id="navcontainerVertical">
	<ul id="navlistVertical">
	<li><a href="#"><p>Costa Blanca</p><p>(North)</p></a></li>
	<li><a href="#"><p>Costa Blanca</p><p>(South)</p></a></li>
	<li><a href="#"><p>Costa Calida</p></a></li>
	<li><a href="#"><p>View All</p></a></li>
	</ul>
	</div>

	<div id="navcontainerVerticalPrice">
	<p>PRICE RANGE</p>
	<ul id="navlistVerticalPrice">
	<li><a href="#"><p>Under 100,000</p></a></li>
	<li><a href="#"><p>101,000 - 200,000</p></a></li>
	<li><a href="#"><p>201,000 - 300,000</p></a></li>
	<li><a href="#"><p>301,000 - 400,000</p></a></li>
	<li><a href="#"><p>Over 400,000</p></a></li>
	</ul>
	</div>
	</div>


</div>











</body>
</html>

I have win 32 xp home and IE6 set medium size for the font-size !, then trying to increase it, i had your page rightaway mess up again !, maybe you should fixed as well a font-family and a font size, (if you did not, <edit> you did ! 74%, maybe it's better then to use pixel ?, then it will not allow IE to resize the font.) .
Sorry , i surf with firefoxe, and use it to edit css live mostly, i didnot notice, your extra file for IE.

I hope, this is it !

dthomas31uk
Offline
Enthusiast
Last seen: 6 years 26 weeks ago
Joined: 2004-11-29
Posts: 144
Points: 0

Help with positioning in IE

gcyrillus. Nice one for that...think you are right it must be down to the actual fon size.....good work mate most appreciated