CSS Creator Help with positioning in IE

Hugo

Moderator

Posts: 13597
Joined: 2004-06-06
Location: London

Help with positioning in IE

Posted: Mon, 2005-11-21 23:33

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

Login or register to post comments

gcyrillus

Enthusiast

Posts: 57
Joined: 2005-11-16
Location: FR spoken

Help with positioning in IE

Posted: Tue, 2005-11-22 00:43

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

Login or register to post comments

ClevaTreva

Guru

Posts: 2964
Joined: 2004-02-05
Location: A hilly place, UK

Help with positioning in IE

Posted: Tue, 2005-11-22 07:48

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

Login or register to post comments

Hugo

Moderator

Posts: 13597
Joined: 2004-06-06
Location: London

Help with positioning in IE

Posted: Tue, 2005-11-22 10:04

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

Login or register to post comments

dthomas31uk

Enthusiast

Posts: 144
Joined: 2004-11-29

Help with positioning in IE

Posted: Tue, 2005-11-22 20:03

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

Login or register to post comments

gcyrillus

Enthusiast

Posts: 57
Joined: 2005-11-16
Location: FR spoken

Help with positioning in IE

Posted: Tue, 2005-11-22 22:23

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

Login or register to post comments

dthomas31uk

Enthusiast

Posts: 144
Joined: 2004-11-29

Help with positioning in IE

Posted: Tue, 2005-11-22 23:10

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

Login or register to post comments

gcyrillus

Enthusiast

Posts: 57
Joined: 2005-11-16
Location: FR spoken

Help with positioning in IE

Posted: Tue, 2005-11-22 23:25

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 !

Login or register to post comments

dthomas31uk

Enthusiast

Posts: 144
Joined: 2004-11-29

Help with positioning in IE

Posted: Wed, 2005-11-23 09:02

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

Login or register to post comments