Joomla CSS class not working
I am trying to build an in line menu. I am using Joomla 1.6 with CSS.
I have the solution using <span class="dmenu"> and that is shown in the first sample below. However, Joomla strips <span class="dmenu"> out of the document prior to saving it even though I have all the cleanup option OFF.
So I tried a couple of work arounds. In the first I force the style un the this works in this sample (but strangely not on the joomla page). The second example just sets the class and thsi seems to ignot the ul parameters.
In the samples below I put all the CSS into the template.css file and the HTML is in the document. However I can reproduce the issue with the entire block of code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/** Navigation menu in documents **/
.dmenu a {
display: block;
font-size: 100%;
font-weight:normal;
background-color: #eaeaea;
padding: 4px;
letter-spacing:0px;
width:100px;
margin-bottom:10px;
text-align:center;
line-height:20px;
text-shadow: 2px 2px 4px #aaa;
color:red;
text-decoration: none;
}
.dmenu ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.dmenu li {
float:left;
}
.dmenu a:hover {
color:Darkred;
background-color: darkgrey;
}
</style>
</he开发者_JAVA百科ad>
<body>
<p>this works well</p>
<span class="dmenu">
<ul>
<li><a href="#Location">Location</a></li>
<li><a href="#Description">Description</a></li>
</ul>
</span>
<p>This is forces the style and works here but not on the site where I link to CSS file</p>
<ul class="dmenu" style="list-style-type:none;margin:0;
padding:0;overflow:hidden">
<li><a href="#Location">Location</a></li>
<li><a href="#Description">Description</a></li>
</ul>
<p>line underneath</p>
<p>This is not looking at the list-style-type:none</p>
<ul class="dmenu">
<li><a href="#Location">Location</a></li>
<li><a href="#Description">Description</a></li>
</ul>
<p>line underneath</p>
</body>
</html>
How about a link to the page so we can see the problem? The code you posted works fine - http://jsfiddle.net/T76AC/
Joomla is stripping your span because you can't put block elements inside of an inline element.
http://www.w3.org/TR/REC-html40/struct/global.html#block-inline
EDIT
Now that we have a link to look at, your problem is with your CSS selector and the rest of your stylesheet. It appears that your stylesheet has some pretty generic styles that will be applied in unintended places. This happens when you apply a style to generic tags inside of a class you use commonly.
A few things to look at:
- line 205 is adding magins to
<ul class="dmenu"> - line 210 is adding the background, padding and margin to
<li style="float: left;">
You will need to edit a few things. Change line 186 to:
.dmenu li {
float: left;
background:none;
padding: 0;
margin: 0;
}
Add this:
UL.dmenu {
margin:0;
}
For both of the edits, you can adjust the margin and padding accordingly, I just set it to 0. This should fix your issues though.
I would also recommend using Firefox with Firebug, or Firefox/Chrome with the Inspect Element context menu so you can see what styles are being applied to the various elements on your page when they don't act like you expect.
加载中,请稍侯......
精彩评论