Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2006-06-27 23:52:56
- reptilerobots
- Member
- Registered: 2005-08-20
- Posts: 72
rollovers not working on spans (within h2 tags)???? in IE!!!!!!!
Hello, in Firefox and Safari, this works perfectly…. but of course in Explorer it doesn’t. The formatting works, but the link behaviors (roll overs dont), furthermore, the cursor changes to a text select cursor when you roll over the links in Explorer. I’ve tried to move the h2 tags inside of the permlinks, but that doesnt change anything… anyone have any clue? I figure it might just be a combination of too many spans, or spans dont work within an AHREF tag in Explorer… any help is appreciated.
you can check out http://www.wearetherobots.com/pages for reference (ignore the ugly colors)
here’s the form:
<code>
<div class=“article”><h2><txp:permlink><span class=“articleTitle”><txp:title /></span><span class=“articleDetails”><txp:posted /></span><span class=“articleDetails”><<txp:category1 />></span><span class=“articleNew”>†</span></txp:permlink></h2></div>
</code>
here’s the css that pertains to the form:
<code>
a:link, a:visited, a:active {
color: #000;
text-decoration: none;
background-color: #fff;
}
a:hover {
color: #ccc;
background-color: #fff;
}
/* article – div that wraps article form */
.article {
background-color: #000000;
width: 790px;
height: 16px;
margin: 0px 0px 0px 0px;
}
.article h2 {
font-family: “Courier New”, Courier, monospace;
font-size: 11px;
background-color: #330033;
width: 770px;
height: 16px;
margin: 0px 0px 0px 0px;
float: left;
display: inline;
}
.articleTitle {
background-color: #ff00ff;
width: 515px;
height: 16px;
float: left;
}
.articleDetails {
background-color: #003300;
width: 115px;
height: 16px;
float: left;
}
.articleNew {
color: #ff00ff;
background-color: #00ff00;
width: 25px;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
height: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
</code>
Offline
Re: rollovers not working on spans (within h2 tags)???? in IE!!!!!!!
The float on the spans seems to be messing it up. You could rethink how you are using the spans and get rid of the float, or float the parent link.
.article a:link,a:visited,a:active,a:hover {
float:left;
}this will make the hovers work and the links will work but the cursor is still not working right for me. You can always force it by
.article a:link,a:visited,a:active,a:hover {
float:left;
cursor: pointer;
}Anyway that seems to make it behave for me in IE but it seems to open up some other float related problems in Firefox, which seem to be fixable by setting the spans to display:block and floating .article
Almost feels like you’d be better off just spitting out the link 3 times and setting them up to have different classes. Customizing Permanent Links
Shoving is the answer – pusher robot
Offline
#3 2006-06-28 16:50:08
- reptilerobots
- Member
- Registered: 2005-08-20
- Posts: 72
Re: rollovers not working on spans (within h2 tags)???? in IE!!!!!!!
Is there ANY way to accomplish this? I want to wrap a permlink around the article title, category and article date one one line AND have the article title be a certain width (515px), as well as the category and date (which can re-use the same style) since theyre both 115 px wide. Obviously it works in Safari/Firefox, but not in IE. I dont necessarily need to use an h2 tag, it can be classes.
Offline
Re: rollovers not working on spans (within h2 tags)???? in IE!!!!!!!
I agree with hakjoon. the floats are messin it up. Remove the floats. Also ..
Try this code…
<div class="article"><h2><a href="<txp:permlink />" alt="<txp:title />"><span class="articleTitle"><txp:title /></span><span class="articleDetails"><txp:posted /></span><span class="articleDetails"><<txp:category1 />></span><span class="articleNew">†</span></a></h2></div>
<p><code>.articleDetails a:link,a:visited,a:active,a:hover {float:left; cursor: pointer;}</code></p>
<p><code>.articleDetails a:link,a:visited,a:active,a:hover {float:left; cursor: pointer;}</code></p>
<p><code>.articleNew a:link,a:visited,a:active,a:hover {float:left; cursor: pointer;}</code></p>
or a separate property for each link state.. for eg.
<p><code>.articleNew a:link {float:left; cursor: pointer}</code></p>
<p><code>.articleNew a:visited {float:left; cursor: pointer;}</code></p>
<p><code>.articleNew a:active {float:left; cursor: pointer;}</code></p>
<p><code>.articleNew a:hover {float:left; cursor: pointer;}</code></p>
similarly apply the same technique for the other selectors.
Last edited by creativesplash (2006-06-28 17:36:30)
“Take a point, stretch it into a line, curl it into a circle, twist it into a sphere, and punch through the sphere.”
— Albert Einstein
Offline