can anyone help me, i have a really wierd problem with images that i am trying to align to the left which dont appear in the new version of internet explorer, however they do show in older versions on PC and the mac and in most versions of Netscape. All i get in IE6 is a blank space where the image should appear, i dont even get a red cross or anything to show any broken links, just a blank space the same size as the image. Does anyone know why this is?<br />
<br />
Here is the code (html and css) i am using...<br />
<br />
HTML PAGE<br />
<br />
<DIV class=content><br />
<H1>Welcome to the SCRI</H1><br />
<p><br />
text text text texttext texttext texttext texttext text text texttext texttext texttext texttext texttext texttext text<br />
</p><br />
</DIV><br />
<br />
CSS Code in seperate file<br />
<br />
.content {<br />
BORDER-RIGHT: #808080 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #808080 1px solid; PADDING-LEFT: 10px; Z-INDEX: 1; PADDING-BOTTOM: 10px; MARGIN: 0px 155px 20px 155px; BORDER-LEFT: #808080 1px solid; WIDTH: auto; PADDING-TOP: 10px; BORDER-BOTTOM: #808080 1px solid; POSITION: relative; BACKGROUND-COLOR: white; min-width: 120px<br />
}<br />
<br />
<br />
If anyone can help it would be great.<!--content-->Man what a mess of css... try this...<br />
You are certainly making things hard for yourself. Why have you set width to auto? To start with this is the default setting so it need not be declared... then you go on to state that the width should be a min of 120. You need to decide what you want it to be! default or 120? Why not set a min and max width. You also have some syntax wrong have a look at the following. I haven't tested it but have a go and if you get no joy I will test my suggestion and see where I can help you from there. No doubt scoutt will come along and pick up where you went wrong straight away. Good Luck!<br />
<br />
.content <br />
{<br />
border-color: #808080;<br />
border-width: 1px;<br />
border-style: solid;<br />
padding: 10px;<br />
margin: 0px 155px 20px 155px;<br />
position: relative;<br />
min-width: 120px;<br />
background-color: white;<br />
}<!--content-->hey thanks for that, i just tried it but unfortunately it doesnt work... i'll keep trying
<!--content-->Ok, if you can clearly tell me what you are trying to achieve then I can help. Maybe a peek at what you have online would help. Be as descriptive as possible... then I will give it a shot for you.<!--content-->ok, i'll try and get it online first and then let you know what i'm doing, it'll give a clearer picture....<!--content-->ok, on the left hand site of the middle column should be an image, you can see that the text is wrapped around it, but the image does not appear, in IE 6 anyway. it does in the latest version of netscape which is really unusual. lol. <br />
<br />
If you view the source you'll get the url for the style sheet too. i hope you can help.<br />
<br />
thanks.<br />
<br />
click here (<!-- m --><a class="postlink" href="http://www.scri.sari.ac.uk/assoc/tests/3columns_with_top_nav/Three%20Columns.htm">http://www.scri.sari.ac.uk/assoc/tests/ ... olumns.htm</a><!-- m -->) <br />
<br />
ignore the links on the nav, they lead to external pages.<!--content-->i tried changing the z-index of .content in the css it value of -1 and it works, but now it doesnt work in Netscape. i just cant win. lol.<!--content-->the image shows up in mozilla but not in ie 5.5, try changing the z-index of the image to higher than anything else, not changing content z-index to -1<br />
<br />
leo<!--content-->Any problems left over now, are browser incompatibilities that will need workarounds. Your site doesn't have any HTML coding errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.scri.sari.ac.uk%2Fassoc%2Ftests%2F3columns_with_top_nav%2FThree%2520Colum">http://validator.w3.org/check?uri=http% ... %2520Colum</a><!-- m --> ns.htm&charset=%28detect+automatically%29&doctype=Inline&ss=1&sp=1&outline=1&verbose=1).<br />
<br />
There are no major problems with the CSS code, but there are quite a few warnings (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.scri.sari.ac.uk%2Fassoc%2Ftests%2F3columns_with_top_nav%2FThree%2520C">http://jigsaw.w3.org/css-validator/vali ... hree%2520C</a><!-- m --> olumns.htm&warning=1&profile=css2) to be checked.<!--content-->take this out<br />
<br />
POSITION: relative;<br />
<br />
also you have to watch your capitals, NS6+ is very picky on capitals in css.<br />
<br />
and it has nothing to do with the z-index which is doing the whole document anyway.<br />
<br />
edit: also you should watch the names of files that have a space in them. NS will choke on those as well.<!--content-->
<br />
Here is the code (html and css) i am using...<br />
<br />
HTML PAGE<br />
<br />
<DIV class=content><br />
<H1>Welcome to the SCRI</H1><br />
<p><br />
text text text texttext texttext texttext texttext text text texttext texttext texttext texttext texttext texttext text<br />
</p><br />
</DIV><br />
<br />
CSS Code in seperate file<br />
<br />
.content {<br />
BORDER-RIGHT: #808080 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #808080 1px solid; PADDING-LEFT: 10px; Z-INDEX: 1; PADDING-BOTTOM: 10px; MARGIN: 0px 155px 20px 155px; BORDER-LEFT: #808080 1px solid; WIDTH: auto; PADDING-TOP: 10px; BORDER-BOTTOM: #808080 1px solid; POSITION: relative; BACKGROUND-COLOR: white; min-width: 120px<br />
}<br />
<br />
<br />
If anyone can help it would be great.<!--content-->Man what a mess of css... try this...<br />
You are certainly making things hard for yourself. Why have you set width to auto? To start with this is the default setting so it need not be declared... then you go on to state that the width should be a min of 120. You need to decide what you want it to be! default or 120? Why not set a min and max width. You also have some syntax wrong have a look at the following. I haven't tested it but have a go and if you get no joy I will test my suggestion and see where I can help you from there. No doubt scoutt will come along and pick up where you went wrong straight away. Good Luck!<br />
<br />
.content <br />
{<br />
border-color: #808080;<br />
border-width: 1px;<br />
border-style: solid;<br />
padding: 10px;<br />
margin: 0px 155px 20px 155px;<br />
position: relative;<br />
min-width: 120px;<br />
background-color: white;<br />
}<!--content-->hey thanks for that, i just tried it but unfortunately it doesnt work... i'll keep trying
<!--content-->Ok, if you can clearly tell me what you are trying to achieve then I can help. Maybe a peek at what you have online would help. Be as descriptive as possible... then I will give it a shot for you.<!--content-->ok, i'll try and get it online first and then let you know what i'm doing, it'll give a clearer picture....<!--content-->ok, on the left hand site of the middle column should be an image, you can see that the text is wrapped around it, but the image does not appear, in IE 6 anyway. it does in the latest version of netscape which is really unusual. lol. <br /><br />
If you view the source you'll get the url for the style sheet too. i hope you can help.<br />
<br />
thanks.<br />
<br />
click here (<!-- m --><a class="postlink" href="http://www.scri.sari.ac.uk/assoc/tests/3columns_with_top_nav/Three%20Columns.htm">http://www.scri.sari.ac.uk/assoc/tests/ ... olumns.htm</a><!-- m -->) <br />
<br />
ignore the links on the nav, they lead to external pages.<!--content-->i tried changing the z-index of .content in the css it value of -1 and it works, but now it doesnt work in Netscape. i just cant win. lol.<!--content-->the image shows up in mozilla but not in ie 5.5, try changing the z-index of the image to higher than anything else, not changing content z-index to -1<br />
<br />
leo<!--content-->Any problems left over now, are browser incompatibilities that will need workarounds. Your site doesn't have any HTML coding errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.scri.sari.ac.uk%2Fassoc%2Ftests%2F3columns_with_top_nav%2FThree%2520Colum">http://validator.w3.org/check?uri=http% ... %2520Colum</a><!-- m --> ns.htm&charset=%28detect+automatically%29&doctype=Inline&ss=1&sp=1&outline=1&verbose=1).<br />
<br />
There are no major problems with the CSS code, but there are quite a few warnings (<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.scri.sari.ac.uk%2Fassoc%2Ftests%2F3columns_with_top_nav%2FThree%2520C">http://jigsaw.w3.org/css-validator/vali ... hree%2520C</a><!-- m --> olumns.htm&warning=1&profile=css2) to be checked.<!--content-->take this out<br />
<br />
POSITION: relative;<br />
<br />
also you have to watch your capitals, NS6+ is very picky on capitals in css.<br />
<br />
and it has nothing to do with the z-index which is doing the whole document anyway.<br />
<br />
edit: also you should watch the names of files that have a space in them. NS will choke on those as well.<!--content-->