Help with positioning in IE

Mon, 2005-11-21 23:33

#1

Hugo

Offline

Moderator

Joined: 2004-06-06

Posts: 13575

Points: 555

Help with positioning in IE

Validate the markup! :mad:

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

Hugo.

Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tue, 2005-11-22 00:43

#2

gcyrillus

Offline

Enthusiast

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

Tue, 2005-11-22 07:48

#3

ClevaTreva

Offline

Guru

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

Give your site a valid doctype | Uncollapsing Margins

Tue, 2005-11-22 10:04

#4

Hugo

Offline

Moderator

Joined: 2004-06-06

Posts: 13575

Points: 555

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.

Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tue, 2005-11-22 20:03

#5

dthomas31uk

Offline

Enthusiast

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 ??

Tue, 2005-11-22 22:23

#6

gcyrillus

Offline

Enthusiast

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. )
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 !?

Tue, 2005-11-22 23:10

#7

dthomas31uk

Offline

Enthusiast

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.

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

Tue, 2005-11-22 23:25

#8

gcyrillus

Offline

Enthusiast

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 !

Wed, 2005-11-23 09:02

#9

dthomas31uk

Offline

Enthusiast

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

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

Help with positioning in IE

New forum topics

User login

Navigation