Info about the info in styles panel

25/04/2008, 13h17

Hi
I am a little bit confused about what the CSS styles panel shows me.
When I investigate the styles I have noticed that some properties have a line
through them. Could someone explain it to me., because I have a problem that I
think is associated with the inheritence of styles.
I have created a test page that shows a gallery of thumbnails but the first
one is not shown when the page is refreshed. All works fine in IE but not in
Firefox, I have also placed the exact same code a little lower down and this
works fine. Therefore I am concluding that the nested style classes are
affecting the page.

If you want to view what I mean the link is:
http://76.163.15.45/Untitled-7a.html

I have also attached the source code if your interested.

Am I on the right looking at the styles to solve this problem.

Many thanks VoodooJai

<!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>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005),
see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabbed browser testing</title>

<script type="text/JavaScript">
//<![CDATA[
//here you place the ids of every element you want.
var ids=new Array('pictures','video','text','misc');

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
display: inline;
}
div.img img
{
display: block;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
div.miscDiv {display:none; width: 600px; background-color: #FFFF99;}
div.textDiv {display:none; width: 600px; background-color: #FFFF99; height:
400px; overflow: auto;}
div.pictureDiv {display:block; width: 600px; background-color: #FFFF99;
height: 400px; overflow: auto;}
/*]]>*/
.style1 {color: #FF0000}

</style>
</head>

<body>
<div class="page">
<p>Try these: <a href="javascript:switchid('pictures');">View
pictures</a> | <a href="javascript:switchid('video');">View
videos</a> | <a href="javascript:switchid('text');">View
blog</a> | <a href="javascript:switchid('misc');">Misc</a></p>
<div class="tabs"><a href="javascript:switchid('pictures');">View
pictures</a></div>

<br/>
<hr />

<div id='pictures' class="pictureDiv">
<h2>Gallery image viewer:</h2>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing
elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam
nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit
mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac
habitasse platea dictumst. Aenean dignissim. Duis ligula.</p>

<div class="galleryimage">

<div class="img"><a target="_blank" href="index.html"><img
src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc style1">This image fails to show when refreshed</div>
</div>

<div class="img"><a target="_blank" href="#"><img src="images/sample.jpg"
alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>


<div class="img"><a target="_blank" href="#"><img src="images/sample.jpg"
alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img"><a target="_blank" href="#"><img src="images/sample.jpg"
alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>


</div>
</div>

<div id='video' class="textDiv">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet
sapien non felis iaculis scelerisque! Proin sem libero, vehicula sit amet,
accumsan vitae, vehicula in, nibh. Donec sed mauris tincidunt nibh euismod
molestie. Pellentesque nec odio. Phasellus felis. Quisque massa magna, aliquam
mattis, ullamcorper sit amet, molestie sed, felis. Aenean at tellus aliquet
tortor consequat commodo. Nulla suscipit ullamcorper risus. Curabitur eleifend
orci sed dolor. Phasellus quam. Quisque lectus nulla, porttitor ut, lacinia sit
amet, mollis quis; mi. Nulla felis. Nam consequat pretium risus? Nulla
facilisi. Aenean scelerisque lectus quis massa? Nulla facilisi. In vulputate
pede ut eros. In tortor risus, placerat non, cursus non, feugiat eu; metus?</p>
<p>Donec et urna a metus faucibus elementum. Nullam aliquet, urna sit amet
fermentum cursus, purus mi viverra mauris, a viverra sapien lectus et velit.
Pellentesque massa quam, rutrum fermentum, tempor in, consequat ut, nunc.
Pellentesque iaculis dignissim diam! Nam tincidunt pede et libero. Nullam
libero mauris, dictum a, tempus eu, cursus nec, ante. Etiam odio urna, pretium
at, imperdiet et, ornare at, nisi. Proin consectetuer vehicula lacus? Mauris
nisl felis, interdum id, molestie vel, semper nec, nisi! Duis et est volutpat
augue volutpat molestie? Aliquam fermentum laoreet nisl. Nam iaculis. Fusce
eget diam eget ligula pretium aliquet. Suspendisse fringilla fringilla massa.
Donec accumsan luctus dolor. Integer consequat commodo sem. Phasellus libero
odio; mattis convallis, tristique eget, venenatis vel, nisi. Vestibulum vel dui
quis urna elementum vehicula. Fusce mattis accumsan dolor! Aliquam a tortor.</p>
<p>Nunc vitae felis eu odio sodales sollicitudin. Vivamus volutpat
lobortis felis. Vivamus nunc! Suspendisse non lacus. Sed consequat nisl varius
augue? Nunc ante diam, varius ut, pulvinar ut, semper id, ligula? Aliquam erat
volutpat. Integer iaculis pede in sapien. Pellentesque augue. Etiam nec velit
nec turpis commodo sodales. Donec vel odio. Nam aliquam turpis non nibh
bibendum congue. Nam eleifend justo dapibus nisl. Pellentesque laoreet, leo nec
placerat ultrices, nunc arcu placerat ante; pulvinar pellentesque tellus diam
quis libero! Quisque eu sem quis nisl gravida sagittis. Etiam ligula purus,
tincidunt ut, vulputate eget, posuere eu, tortor. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

</div>
<br/>
<hr />
<p>these images are exactly the same code but not nested the the ones
above.</p>
<div class="img"><a target="_blank" href="index.html"><img
src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>


<div class="img"><a target="_blank" href="#"><img src="images/sample.jpg"
alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="img"><a target="_blank" href="#"><img src="images/sample.jpg"
alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>


<div class="img"><a target="_blank" href="#"><img src="images/sample.jpg"
alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="clear">
<br/>
<hr />

<div id='text' class="textDiv">

<h3>This content is for text</h3>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing
elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam
nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi

01/05/2008, 13h07

When you see a line through a style, that means it's NOT inherited. The
style has been declared for some 'parent container', but that style is not
inherited from it.

I'm not able to reproduce your problem in either IE7 or FF2x.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"VoodooJai" <webforumsuser@macromedia.com> wrote in message
news:fusekn$qhi$1@forums.macromedia.com...
> Hi
> I am a little bit confused about what the CSS styles panel shows me.
> When I investigate the styles I have noticed that some properties have a
> line
> through them. Could someone explain it to me., because I have a problem
> that I
> think is associated with the inheritence of styles.
> I have created a test page that shows a gallery of thumbnails but the
> first
> one is not shown when the page is refreshed. All works fine in IE but not
> in
> Firefox, I have also placed the exact same code a little lower down and
> this
> works fine. Therefore I am concluding that the nested style classes are
> affecting the page.
>
> If you want to view what I mean the link is:
> http://76.163.15.45/Untitled-7a.html
>
> I have also attached the source code if your interested.
>
>
> Am I on the right looking at the styles to solve this problem.
>
> Many thanks VoodooJai
>
> <!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>
> <meta name="generator" content="HTML Tidy for Linux (vers 1 September
> 2005),
> see www.w3.org" />
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>Tabbed browser testing</title>
>
> <script type="text/JavaScript">
> //<![CDATA[
> //here you place the ids of every element you want.
> var ids=new Array('pictures','video','text','misc');
>
> function switchid(id){
> hideallids();
> showdiv(id);
> }
>
> function hideallids(){
> //loop through the array and hide each element by id
> for (var i=0;i<ids.length;i++){
> hidediv(ids[i]);
> }
> }
>
> function hidediv(id) {
> //safe function to hide an element with a specified id
> if (document.getElementById) { // DOM3 = IE5, NS6
> document.getElementById(id).style.display = 'none';
> }
> else {
> if (document.layers) { // Netscape 4
> document.id.display = 'none';
> }
> else { // IE 4
> document.all.id.style.display = 'none';
> }
> }
> }
>
> function showdiv(id) {
> //safe function to show an element with a specified id
>
> if (document.getElementById) { // DOM3 = IE5, NS6
> document.getElementById(id).style.display = 'block';
> }
> else {
> if (document.layers) { // Netscape 4
> document.id.display = 'block';
> }
> else { // IE 4
> document.all.id.style.display = 'block';
> }
> }
> }
> //]]>
> </script>
> <style type="text/css">
> /*<![CDATA[*/
> 
> /*]]>*/
> </style>
>
> <style type="text/css">
> /*<![CDATA[*/
> div.img
> {
> margin: 2px;
> border: 1px solid #0000ff;
> height: auto;
> width: auto;
> float: left;
> display: inline;
> }
> div.img img
> {
> display: block;
> margin: 3px;
> border: 1px solid #ffffff;
> }
> div.img a:hover img {border: 1px solid #0000ff;}
> div.desc
> {
> text-align: center;
> font-weight: normal;
> width: 120px;
> margin: 2px;
> }
> /*]]>*/
> </style>
>
> <style type="text/css">
> /*<![CDATA[*/
> div.miscDiv {display:none; width: 600px; background-color: #FFFF99;}
> div.textDiv {display:none; width: 600px; background-color: #FFFF99;
> height:
> 400px; overflow: auto;}
> div.pictureDiv {display:block; width: 600px; background-color: #FFFF99;
> height: 400px; overflow: auto;}
> /*]]>*/
> .style1 {color: #FF0000}
>
> </style>
> </head>
>
> <body>
> <div class="page">
> <p>Try these: <a href="javascript:switchid('pictures');">View
> pictures</a> | <a href="javascript:switchid('video');">View
> videos</a> | <a href="javascript:switchid('text');">View
> blog</a> | <a href="javascript:switchid('misc');">Misc</a></p>
> <div class="tabs"><a href="javascript:switchid('pictures');">View
> pictures</a></div>
>
> <br/>
> <hr />
>
> <div id='pictures' class="pictureDiv">
> <h2>Gallery image viewer:</h2>
> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer
> adipiscing
> elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl.
> Nullam
> nunc. Cum sociis natoque penatibus et magnis dis parturient montes,
> nascetur
> ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi
> hendrerit
> mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In
> hac
> habitasse platea dictumst. Aenean dignissim. Duis ligula.</p>
>
> <div class="galleryimage">
>
> <div class="img"><a target="_blank" href="index.html"><img
> src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
> <div class="desc style1">This image fails to show when refreshed</div>
> </div>
> 
> <div class="img"><a target="_blank" href="#"><img
> src="images/sample.jpg"
> alt="Sample" width="110" height="90" /></a>
> <div class="desc">Add a description of the image here</div>
> </div>
> 
>
> <div class="img"><a target="_blank" href="#"><img
> src="images/sample.jpg"
> alt="Sample" width="110" height="90" /></a>
> <div class="desc">Add a description of the image here</div>
> </div>
> 
> <div class="img"><a target="_blank" href="#"><img
> src="images/sample.jpg"
> alt="Sample" width="110" height="90" /></a>
> <div class="desc">Add a description of the image here</div>
> </div>
> 
>
> </div>
> </div>
>
> <div id='video' class="textDiv">
> <h3>Lorem ipsum</h3>
> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit
> amet
> sapien non felis iaculis scelerisque! Proin sem libero, vehicula sit amet,
> accumsan vitae, vehicula in, nibh. Donec sed mauris tincidunt nibh euismod
> molestie. Pellentesque nec odio. Phasellus felis. Quisque massa magna,
> aliquam
> mattis, ullamcorper sit amet, molestie sed, felis. Aenean at tellus
> aliquet
> tortor consequat commodo. Nulla suscipit ullamcorper risus. Curabitur
> eleifend
> orci sed dolor. Phasellus quam. Quisque lectus nulla, porttitor ut,
> lacinia sit
> amet, mollis quis; mi. Nulla felis. Nam consequat pretium risus? Nulla
> facilisi. Aenean scelerisque lectus quis massa? Nulla facilisi. In
> vulputate
> pede ut eros. In tortor risus, placerat non, cursus non, feugiat eu;
> metus?</p>
> <p>Donec et urna a metus faucibus elementum. Nullam aliquet, urna sit
> amet
> fermentum cursus, purus mi viverra mauris, a viverra sapien lectus et
> velit.
> Pellentesque massa quam, rutrum fermentum, tempor in, consequat ut, nunc.
> Pellentesque iaculis dignissim diam! Nam tincidunt pede et libero. Nullam
> libero mauris, dictum a, tempus eu, cursus nec, ante. Etiam odio urna,
> pretium
> at, imperdiet et, ornare at, nisi. Proin consectetuer vehicula lacus?
> Mauris
> nisl felis, interdum id, molestie vel, semper nec, nisi! Duis et est
> volutpat
> augue volutpat molestie? Aliquam fermentum laoreet nisl. Nam iaculis.
> Fusce
> eget diam eget ligula pretium aliquet. Suspendisse fringilla fringilla
> massa.
> Donec accumsan luctus dolor. Integer consequat commodo sem. Phasellus
> libero
> odio; mattis convallis, tristique eget, venenatis vel, nisi. Vestibulum
> vel dui
> quis urna elementum vehicula. Fusce mattis accumsan dolor! Aliquam a
> tortor.</p>
> <p>Nunc vitae felis eu odio sodales sollicitudin. Vivamus volutpat
> lobortis felis. Vivamus nunc! Suspendisse non lacus. Sed consequat nisl
> varius
> augue? Nunc ante diam, varius ut, pulvinar ut, semper id, ligula? Aliquam
> erat
> volutpat. Integer iaculis pede in sapien. Pellentesque augue. Etiam nec
> velit
> nec turpis commodo sodales. Donec vel odio. Nam aliquam turpis non nibh
> bibendum congue. Nam eleifend justo dapibus nisl. Pellentesque laoreet,
> leo nec
> placerat ultrices, nunc arcu placerat ante; pulvinar pellentesque tellus
> diam
> quis libero! Quisque eu sem quis nisl gravida sagittis. Etiam ligula
> purus,
> tincidunt ut, vulputate eget, posuere eu, tortor. Class aptent taciti
> sociosqu
> ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
>
> </div>
> <br/>
> <hr />
> <p>these images are exactly the same code but not nested the the ones
> above.</p>
> <div class="img"><a target="_blank" href="index.html"><img
> src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
> <div class="desc">Add a description of the image here</div>
> </div>
> 
>
> <div class="img"><a target="_blank" href="#"><img
> src="images/sample.jpg"
> alt="Sample" width="110" height="90" /></a>
> <div class="desc">Add a description of the image here</div>
> </div>
> 
> <div class="img"><a target="_blank" href="#"><img
> src="images/sample.jpg"
> alt="Sample" width="110" height="90" /></a>
> <div class="desc">Add a description of the image here</div>
> </div>
> 
>
> <div class="img"><a target="_blank" href="#"><img
> src="images/sample.jpg"
> alt="Sample" width="110" height="90" /></a>
> <div class="desc">Add a description of the image here</div>
> </div>
> 
> <div class="clear">
> <br/>
> <hr />
>
> <div id='text' class="textDiv">
>
> <h3>This content is for text</h3>
> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer
> adipiscing
> elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl.
> Nullam
> nunc. Cum sociis natoque penatibus et magnis dis parturient montes,
> nascetur
> ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi

25/04/2008, 13h17	#1
VoodooJai Messages: n/a Hébergeur:	Info about the info in styles panel Hi I am a little bit confused about what the CSS styles panel shows me. When I investigate the styles I have noticed that some properties have a line through them. Could someone explain it to me., because I have a problem that I think is associated with the inheritence of styles. I have created a test page that shows a gallery of thumbnails but the first one is not shown when the page is refreshed. All works fine in IE but not in Firefox, I have also placed the exact same code a little lower down and this works fine. Therefore I am concluding that the nested style classes are affecting the page. If you want to view what I mean the link is: http://76.163.15.45/Untitled-7a.html I have also attached the source code if your interested. Am I on the right looking at the styles to solve this problem. Many thanks VoodooJai <!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> <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tabbed browser testing</title> <script type="text/JavaScript"> //<![CDATA[ //here you place the ids of every element you want. var ids=new Array('pictures','video','text','misc'); function switchid(id){ hideallids(); showdiv(id); } function hideallids(){ //loop through the array and hide each element by id for (var i=0;i<ids.length;i++){ hidediv(ids[i]); } } function hidediv(id) { //safe function to hide an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'none'; } else { if (document.layers) { // Netscape 4 document.id.display = 'none'; } else { // IE 4 document.all.id.style.display = 'none'; } } } function showdiv(id) { //safe function to show an element with a specified id if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(id).style.display = 'block'; } else { if (document.layers) { // Netscape 4 document.id.display = 'block'; } else { // IE 4 document.all.id.style.display = 'block'; } } } //]]> </script> <style type="text/css"> /<![CDATA[/ <!-- .tabs { background-image: url(images/footer-1.png); height: 25px; width: 100px; background-repeat: no-repeat; } .galleryimage { background-color: #CCCCCC; height: 180px; width: 590px; border: thin solid #000000; } .page { height: 700px; width: 900px; background-color: #FFFFCC; margin-left: auto; margin-right: auto; } .clear { clear: both; } --> /]]>/ </style> <style type="text/css"> /<![CDATA[/ div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; display: inline; } div.img img { display: block; margin: 3px; border: 1px solid #ffffff; } div.img a:hover img {border: 1px solid #0000ff;} div.desc { text-align: center; font-weight: normal; width: 120px; margin: 2px; } /]]>/ </style> <style type="text/css"> /<![CDATA[/ div.miscDiv {display:none; width: 600px; background-color: #FFFF99;} div.textDiv {display:none; width: 600px; background-color: #FFFF99; height: 400px; overflow: auto;} div.pictureDiv {display:block; width: 600px; background-color: #FFFF99; height: 400px; overflow: auto;} /]]>/ .style1 {color: #FF0000} </style> </head> <body> <div class="page"> <p>Try these: <a href="javascript:switchid('pictures');">View pictures</a> \| <a href="javascript:switchid('video');">View videos</a> \| <a href="javascript:switchid('text');">View blog</a> \| <a href="javascript:switchid('misc');">Misc</a></p> <div class="tabs"><a href="javascript:switchid('pictures');">View pictures</a></div> <br/> <hr /> <div id='pictures' class="pictureDiv"> <h2>Gallery image viewer:</h2> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi hendrerit mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In hac habitasse platea dictumst. Aenean dignissim. Duis ligula.</p> <div class="galleryimage"> <div class="img"><a target="_blank" href="index.html"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc style1">This image fails to show when refreshed</div> </div> <!--First thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Second thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Third thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Fourth thumbnail--> </div> </div><!--END pictureDiv--> <div id='video' class="textDiv"> <h3>Lorem ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet sapien non felis iaculis scelerisque! Proin sem libero, vehicula sit amet, accumsan vitae, vehicula in, nibh. Donec sed mauris tincidunt nibh euismod molestie. Pellentesque nec odio. Phasellus felis. Quisque massa magna, aliquam mattis, ullamcorper sit amet, molestie sed, felis. Aenean at tellus aliquet tortor consequat commodo. Nulla suscipit ullamcorper risus. Curabitur eleifend orci sed dolor. Phasellus quam. Quisque lectus nulla, porttitor ut, lacinia sit amet, mollis quis; mi. Nulla felis. Nam consequat pretium risus? Nulla facilisi. Aenean scelerisque lectus quis massa? Nulla facilisi. In vulputate pede ut eros. In tortor risus, placerat non, cursus non, feugiat eu; metus?</p> <p>Donec et urna a metus faucibus elementum. Nullam aliquet, urna sit amet fermentum cursus, purus mi viverra mauris, a viverra sapien lectus et velit. Pellentesque massa quam, rutrum fermentum, tempor in, consequat ut, nunc. Pellentesque iaculis dignissim diam! Nam tincidunt pede et libero. Nullam libero mauris, dictum a, tempus eu, cursus nec, ante. Etiam odio urna, pretium at, imperdiet et, ornare at, nisi. Proin consectetuer vehicula lacus? Mauris nisl felis, interdum id, molestie vel, semper nec, nisi! Duis et est volutpat augue volutpat molestie? Aliquam fermentum laoreet nisl. Nam iaculis. Fusce eget diam eget ligula pretium aliquet. Suspendisse fringilla fringilla massa. Donec accumsan luctus dolor. Integer consequat commodo sem. Phasellus libero odio; mattis convallis, tristique eget, venenatis vel, nisi. Vestibulum vel dui quis urna elementum vehicula. Fusce mattis accumsan dolor! Aliquam a tortor.</p> <p>Nunc vitae felis eu odio sodales sollicitudin. Vivamus volutpat lobortis felis. Vivamus nunc! Suspendisse non lacus. Sed consequat nisl varius augue? Nunc ante diam, varius ut, pulvinar ut, semper id, ligula? Aliquam erat volutpat. Integer iaculis pede in sapien. Pellentesque augue. Etiam nec velit nec turpis commodo sodales. Donec vel odio. Nam aliquam turpis non nibh bibendum congue. Nam eleifend justo dapibus nisl. Pellentesque laoreet, leo nec placerat ultrices, nunc arcu placerat ante; pulvinar pellentesque tellus diam quis libero! Quisque eu sem quis nisl gravida sagittis. Etiam ligula purus, tincidunt ut, vulputate eget, posuere eu, tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div><!--END textDiv--> <br/> <hr /> <p>these images are exactly the same code but not nested the the ones above.</p> <div class="img"><a target="_blank" href="index.html"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--First thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Second thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Third thumbnail--> <div class="img"><a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div> </div> <!--Fourth thumbnail--> <div class="clear"> <br/> <hr /> <div id='text' class="textDiv"> <h3>This content is for text</h3> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. Nullam nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi

01/05/2008, 13h07	#2
Murray ACE Messages: n/a Hébergeur:	Re: Info about the info in styles panel When you see a line through a style, that means it's NOT inherited. The style has been declared for some 'parent container', but that style is not inherited from it. I'm not able to reproduce your problem in either IE7 or FF2x. -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "VoodooJai" <webforumsuser@macromedia.com> wrote in message news:fusekn$qhi$1@forums.macromedia.com... > Hi > I am a little bit confused about what the CSS styles panel shows me. > When I investigate the styles I have noticed that some properties have a > line > through them. Could someone explain it to me., because I have a problem > that I > think is associated with the inheritence of styles. > I have created a test page that shows a gallery of thumbnails but the > first > one is not shown when the page is refreshed. All works fine in IE but not > in > Firefox, I have also placed the exact same code a little lower down and > this > works fine. Therefore I am concluding that the nested style classes are > affecting the page. > > If you want to view what I mean the link is: > http://76.163.15.45/Untitled-7a.html > > I have also attached the source code if your interested. > > > Am I on the right looking at the styles to solve this problem. > > Many thanks VoodooJai > > <!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> > <meta name="generator" content="HTML Tidy for Linux (vers 1 September > 2005), > see www.w3.org" /> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Tabbed browser testing</title> > > <script type="text/JavaScript"> > //<![CDATA[ > //here you place the ids of every element you want. > var ids=new Array('pictures','video','text','misc'); > > function switchid(id){ > hideallids(); > showdiv(id); > } > > function hideallids(){ > //loop through the array and hide each element by id > for (var i=0;i<ids.length;i++){ > hidediv(ids[i]); > } > } > > function hidediv(id) { > //safe function to hide an element with a specified id > if (document.getElementById) { // DOM3 = IE5, NS6 > document.getElementById(id).style.display = 'none'; > } > else { > if (document.layers) { // Netscape 4 > document.id.display = 'none'; > } > else { // IE 4 > document.all.id.style.display = 'none'; > } > } > } > > function showdiv(id) { > //safe function to show an element with a specified id > > if (document.getElementById) { // DOM3 = IE5, NS6 > document.getElementById(id).style.display = 'block'; > } > else { > if (document.layers) { // Netscape 4 > document.id.display = 'block'; > } > else { // IE 4 > document.all.id.style.display = 'block'; > } > } > } > //]]> > </script> > <style type="text/css"> > /<![CDATA[/ > <!-- > .tabs { > background-image: url(images/footer-1.png); > height: 25px; > width: 100px; > background-repeat: no-repeat; > } > .galleryimage { > background-color: #CCCCCC; > height: 180px; > width: 590px; > border: thin solid #000000; > } > .page { > height: 700px; > width: 900px; > background-color: #FFFFCC; > margin-left: auto; > margin-right: auto; > } > .clear { > clear: both; > } > --> > /]]>/ > </style> > > <style type="text/css"> > /<![CDATA[/ > div.img > { > margin: 2px; > border: 1px solid #0000ff; > height: auto; > width: auto; > float: left; > display: inline; > } > div.img img > { > display: block; > margin: 3px; > border: 1px solid #ffffff; > } > div.img a:hover img {border: 1px solid #0000ff;} > div.desc > { > text-align: center; > font-weight: normal; > width: 120px; > margin: 2px; > } > /]]>/ > </style> > > <style type="text/css"> > /<![CDATA[/ > div.miscDiv {display:none; width: 600px; background-color: #FFFF99;} > div.textDiv {display:none; width: 600px; background-color: #FFFF99; > height: > 400px; overflow: auto;} > div.pictureDiv {display:block; width: 600px; background-color: #FFFF99; > height: 400px; overflow: auto;} > /]]>/ > .style1 {color: #FF0000} > > </style> > </head> > > <body> > <div class="page"> > <p>Try these: <a href="javascript:switchid('pictures');">View > pictures</a> \| <a href="javascript:switchid('video');">View > videos</a> \| <a href="javascript:switchid('text');">View > blog</a> \| <a href="javascript:switchid('misc');">Misc</a></p> > <div class="tabs"><a href="javascript:switchid('pictures');">View > pictures</a></div> > > <br/> > <hr /> > > <div id='pictures' class="pictureDiv"> > <h2>Gallery image viewer:</h2> > <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer > adipiscing > elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. > Nullam > nunc. Cum sociis natoque penatibus et magnis dis parturient montes, > nascetur > ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi > hendrerit > mauris, quis consectetuer magna lectus eu nulla. Suspendisse potenti. In > hac > habitasse platea dictumst. Aenean dignissim. Duis ligula.</p> > > <div class="galleryimage"> > > <div class="img"><a target="_blank" href="index.html"><img > src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> > <div class="desc style1">This image fails to show when refreshed</div> > </div> > <!--First thumbnail--> > <div class="img"><a target="_blank" href="#"><img > src="images/sample.jpg" > alt="Sample" width="110" height="90" /></a> > <div class="desc">Add a description of the image here</div> > </div> > <!--Second thumbnail--> > > <div class="img"><a target="_blank" href="#"><img > src="images/sample.jpg" > alt="Sample" width="110" height="90" /></a> > <div class="desc">Add a description of the image here</div> > </div> > <!--Third thumbnail--> > <div class="img"><a target="_blank" href="#"><img > src="images/sample.jpg" > alt="Sample" width="110" height="90" /></a> > <div class="desc">Add a description of the image here</div> > </div> > <!--Fourth thumbnail--> > > </div> > </div><!--END pictureDiv--> > > <div id='video' class="textDiv"> > <h3>Lorem ipsum</h3> > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit > amet > sapien non felis iaculis scelerisque! Proin sem libero, vehicula sit amet, > accumsan vitae, vehicula in, nibh. Donec sed mauris tincidunt nibh euismod > molestie. Pellentesque nec odio. Phasellus felis. Quisque massa magna, > aliquam > mattis, ullamcorper sit amet, molestie sed, felis. Aenean at tellus > aliquet > tortor consequat commodo. Nulla suscipit ullamcorper risus. Curabitur > eleifend > orci sed dolor. Phasellus quam. Quisque lectus nulla, porttitor ut, > lacinia sit > amet, mollis quis; mi. Nulla felis. Nam consequat pretium risus? Nulla > facilisi. Aenean scelerisque lectus quis massa? Nulla facilisi. In > vulputate > pede ut eros. In tortor risus, placerat non, cursus non, feugiat eu; > metus?</p> > <p>Donec et urna a metus faucibus elementum. Nullam aliquet, urna sit > amet > fermentum cursus, purus mi viverra mauris, a viverra sapien lectus et > velit. > Pellentesque massa quam, rutrum fermentum, tempor in, consequat ut, nunc. > Pellentesque iaculis dignissim diam! Nam tincidunt pede et libero. Nullam > libero mauris, dictum a, tempus eu, cursus nec, ante. Etiam odio urna, > pretium > at, imperdiet et, ornare at, nisi. Proin consectetuer vehicula lacus? > Mauris > nisl felis, interdum id, molestie vel, semper nec, nisi! Duis et est > volutpat > augue volutpat molestie? Aliquam fermentum laoreet nisl. Nam iaculis. > Fusce > eget diam eget ligula pretium aliquet. Suspendisse fringilla fringilla > massa. > Donec accumsan luctus dolor. Integer consequat commodo sem. Phasellus > libero > odio; mattis convallis, tristique eget, venenatis vel, nisi. Vestibulum > vel dui > quis urna elementum vehicula. Fusce mattis accumsan dolor! Aliquam a > tortor.</p> > <p>Nunc vitae felis eu odio sodales sollicitudin. Vivamus volutpat > lobortis felis. Vivamus nunc! Suspendisse non lacus. Sed consequat nisl > varius > augue? Nunc ante diam, varius ut, pulvinar ut, semper id, ligula? Aliquam > erat > volutpat. Integer iaculis pede in sapien. Pellentesque augue. Etiam nec > velit > nec turpis commodo sodales. Donec vel odio. Nam aliquam turpis non nibh > bibendum congue. Nam eleifend justo dapibus nisl. Pellentesque laoreet, > leo nec > placerat ultrices, nunc arcu placerat ante; pulvinar pellentesque tellus > diam > quis libero! Quisque eu sem quis nisl gravida sagittis. Etiam ligula > purus, > tincidunt ut, vulputate eget, posuere eu, tortor. Class aptent taciti > sociosqu > ad litora torquent per conubia nostra, per inceptos himenaeos.</p> > > </div><!--END textDiv--> > <br/> > <hr /> > <p>these images are exactly the same code but not nested the the ones > above.</p> > <div class="img"><a target="_blank" href="index.html"><img > src="images/sample.jpg" alt="Sample" width="110" height="90" /></a> > <div class="desc">Add a description of the image here</div> > </div> > <!--First thumbnail--> > > <div class="img"><a target="_blank" href="#"><img > src="images/sample.jpg" > alt="Sample" width="110" height="90" /></a> > <div class="desc">Add a description of the image here</div> > </div> > <!--Second thumbnail--> > <div class="img"><a target="_blank" href="#"><img > src="images/sample.jpg" > alt="Sample" width="110" height="90" /></a> > <div class="desc">Add a description of the image here</div> > </div> > <!--Third thumbnail--> > > <div class="img"><a target="_blank" href="#"><img > src="images/sample.jpg" > alt="Sample" width="110" height="90" /></a> > <div class="desc">Add a description of the image here</div> > </div> > <!--Fourth thumbnail--> > <div class="clear"> > <br/> > <hr /> > > <div id='text' class="textDiv"> > > <h3>This content is for text</h3> > <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer > adipiscing > elit. Sed vitae est. Curabitur eleifend magna ut nulla. Etiam ut nisl. > Nullam > nunc. Cum sociis natoque penatibus et magnis dis parturient montes, > nascetur > ridiculus mus. Sed rhoncus, tellus vitae suscipit pharetra, odio mi

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email