Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2008-02-14 05:57:40
- hawper
- New Member
- Registered: 2008-02-14
- Posts: 1
Small CSS problem with navigation
Hello there!
New to this whole Textpattern (and CSS) thing, but I love the idea behind dynamic webbuilding.
Anyhows, I have a horizontal navigation setup. All the styling seems to work fine, but when I add a border, all the menu items get offset and drop down off the menu bar.
Here is the code for the Page:
<div class=“navigation”>
<ul>
<txp:section_list break=“li” include_default=“1” default_title=“TikiTech” exclude=“article”/>
</ul>
</div>
And here is the CSS:
.navigation {
border: 1px solid; <<< THIS ATTRIBUTE CAUSES THE MENU ITEMS TO DISPLAY INCORRECTLY
background-color: #505050;
height: 25px;
margin-bottom: 5px;
}
.navigation ul {
list-style: none;
text-align: center;
}
.navigation li {
display: inline;
padding: 5px 10px 5px 10px;
}
.navigation li a {
font-weight: bold;
color: #339900;
text-decoration: none;
}
.navigation li:hover {
background-color: #EEF2F7;
padding-top: 3px;
padding-bottom: 4px;
}
.navigation li.active {
background-color: #EEF2F7;
}
.navigation li.active a, .navigation li:hover a {
color: #000000;
}
I know it has to be some simple little CSS thing I haven’t learned about yet, but it’s been causing me a bit of trouble. Any help is very appreciated!
Offline
Re: Small CSS problem with navigation
The border requires a colour unless you have pasted it here incorrectly so border: 1px solid #000000;
Not sure if that is causing the problem.
Last edited by thebombsite (2008-02-14 10:13:26)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: Small CSS problem with navigation
First thing I’d check is that the page and CSS validate.
<http://www.w3.org/QA/Tools/#validators>.
Next question is have you checked this in more than one browser, or by any chance is the problem occurring in some version of Internet Explorer? IE is notorious for causing CSS problems.
Conceivably the behavior you describe could be caused by the navigation div overflowing a containing element. Is there another element wrapping the navigation div, that also has its height property set? (BTW in CSS it’s “property” rather than “attribute”.)
Code is topiary
Offline
Re: Small CSS problem with navigation
It also can be that your padding and font size together won’t fit the 25px of height. Also have you checked that you have zeroed default margin and padding of elements? In example:
* {
margin: 0;
padding: 0;
}To top of your stylesheet. With out that, you have to add you desired margin and padding to your every element, as they do have defaults.
Offline