i have an <a> tag around my div tag (is it ok to do that?). the link works fine but what i want is for the styles of the div to change on roll over <!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/tagtest.php">http://www.thehopeandanchor.net/nypd/tagtest.php</a><!-- m -->. the one on the left is normail state and right os the rollover state.
here is my style sheet:
div#polarodBox {
width:202px;
height:202px;
background-color: #A59687;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;
font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #EAE7DF;
line-height: 14px;
}
div#polarodBoxOver {
width:202px;
height:202px;
background-color: #EAE7DF;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;
font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #A59687;
line-height: 14px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
and one one of my div/link tags:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"showplace.php">
<div id="polarodBox" style="position:absolute; left:10px; top:10px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"site_images/asketest.jpg" width="198" height="164" border="0" \>
<br \>BROUGH PARK
</div>
</a>Originally posted by lomokev
i have an <a> tag around my div tag (is it ok to do that?). No, you cannot have block level elements inside inline elements, try span instead. Originally posted by lomokev
for the styles of the div to change on roll over [/B]Give this a shot a span{
display: block // makes it act like a block level element
width:202px;
height:202px;
background-color: #A59687;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;
font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #EAE7DF;
line-height: 14px;
}
a:hover span{
background-color: #EAE7DF;
color: #A59687;
// you don't need to repeat yourself with pseudo classes
}thanks thats works really well, only tested in on safari and firefox on the MAC PC still in box cos i just moved also have to deal with being on dial up until ASDL is online! + no cable TV yet, but on the other hand it dose mean i have less distractions and can easily get on with workOriginally posted by the tree
display: block // makes it act like a block level element
CSS error.can you suggest any thing to fix this css error?Originally posted by lomokev
can you suggest any thing to fix this css error? I guess you could put a semicolon in there:display: block;oh i see i did that anyway just a little typounfotunatly that dose not work on the IE on the PC is there any way of changeing it so it will or is there another way?
i have put a new sample page on line so that you can see that it works for pretty much every thing apart from PC ie!
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/over_test.php">http://www.thehopeandanchor.net/nypd/over_test.php</a><!-- m -->
here is my style sheet:
div#polarodBox {
width:202px;
height:202px;
background-color: #A59687;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;
font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #EAE7DF;
line-height: 14px;
}
div#polarodBoxOver {
width:202px;
height:202px;
background-color: #EAE7DF;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;
font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #A59687;
line-height: 14px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
and one one of my div/link tags:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"showplace.php">
<div id="polarodBox" style="position:absolute; left:10px; top:10px;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"site_images/asketest.jpg" width="198" height="164" border="0" \>
<br \>BROUGH PARK
</div>
</a>Originally posted by lomokev
i have an <a> tag around my div tag (is it ok to do that?). No, you cannot have block level elements inside inline elements, try span instead. Originally posted by lomokev
for the styles of the div to change on roll over [/B]Give this a shot a span{
display: block // makes it act like a block level element
width:202px;
height:202px;
background-color: #A59687;
/*margin:3px;*/
padding-top:4px;
padding-left:4px;
font-family: Praxis-SemiBold, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #EAE7DF;
line-height: 14px;
}
a:hover span{
background-color: #EAE7DF;
color: #A59687;
// you don't need to repeat yourself with pseudo classes
}thanks thats works really well, only tested in on safari and firefox on the MAC PC still in box cos i just moved also have to deal with being on dial up until ASDL is online! + no cable TV yet, but on the other hand it dose mean i have less distractions and can easily get on with workOriginally posted by the tree
display: block // makes it act like a block level element
CSS error.can you suggest any thing to fix this css error?Originally posted by lomokev
can you suggest any thing to fix this css error? I guess you could put a semicolon in there:display: block;oh i see i did that anyway just a little typounfotunatly that dose not work on the IE on the PC is there any way of changeing it so it will or is there another way?
i have put a new sample page on line so that you can see that it works for pretty much every thing apart from PC ie!
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/over_test.php">http://www.thehopeandanchor.net/nypd/over_test.php</a><!-- m -->