How come the definition  list isn't showing up in IE

stargateatlantis
stargateatlantis used Ask the Experts™
on
Here is the css code

dt {
	font-weight: bold; 
	margin:20px;

}

	dt:before {
		content: "Q:";
		font-size: 20px;
		margin-right: 7px;
		color: #631F3C;
		font-weight:bold;
		margin-left: -20px;
		position: relative;
	}


	dd {
		border-bottom: 1px solid #FCE6F4;
		padding-bottom: 20px;
		line-height: 150%;	
		
	}
	
	dd:before {
		content: "A:";
		font-size: 20px;
		margin-right: 7px;
		position: relative;
	}

Open in new window


Here is the HTML code
<dl>
    <dt>Question</dt>
    <dd>Anwser</dd>
     <dt>Question</dt>
    <dd>Anwser</dd>
    
    <dt>Question</dt>
    <dd>Anwser</dd>
    
    <dt>Question</dt>
    <dd>Anwser</dd>

</dl> 

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
F IgorDeveloper

Commented:
You may test it first without CSS code to ensure it's a "style" problem,
and not a browser problem. Can you see the "answers" and questions?


I've tested your code ,  Only in IE6 there is not "Q:" before the "Question" title.
That is the problem?

If so, test your code in different browsers to see if it's a CSS compatibility problem.

Author

Commented:
Its a CSS compatibility issue.  IE doesn't understand content: but how would you fix that
Developer
Commented:
Unfortunately IE6 doesn't support it, you can get the same result if you use
explicit code to add the big letters before that text,
or use a javascript fix to get the same result:

(Change the dt:before for a .dt  CSS class, and dd:before to  .dd CSS class)
(Add the script after the list display)

I'm getting the same results in IE or another browser.



<style>

dt {
	font-weight: bold; 
	margin:10px;

}

	.dt {
		content: "Q:";
		font-size: 20px;
		margin-right: 7px;
		color: #631F3C;
		font-weight:bold;
		position: relative;
	}


	dd {
		border-bottom: 1px solid #FCE6F4;
		padding-bottom: 20px;
		line-height: 150%;	
		
	}
	
	.dd {
		content: "A:";
		font-size: 20px;
		margin-right: 7px;
		position: relative;
	} 

	
</style>

<dl>
    <dt>Question</dt>
    <dd>Anwser</dd>
     <dt>Question</dt>
    <dd>Anwser</dd>
    
    <dt>Question</dt>
    <dd>Anwser</dd>
    
    <dt>Question</dt>
    <dd>Anwser</dd>

</dl>  

<script>
var dts=document.getElementsByTagName("DT");
for(i=0;i<dts.length;i++){
	dts[i].innerHTML="<SPAN CLASS=dt >Q: </SPAN>"+dts[i].innerHTML;
}
var dds=document.getElementsByTagName("DD");
for(i=0;i<dds.length;i++){
	dds[i].innerHTML="<SPAN CLASS=dd >A: </SPAN>"+dds[i].innerHTML;
}
</script>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial