CSS - why doesn't this list go into 3 columns? WordPress

• SOLVED

On this link here :

http://www.nolinlakerealestate.com/mls/4-red-rock-of-nolin-lake-anneta-ky-42754-mls-1334664

Near the bottom - "Other Properties" -- why is this not going into 3 columns? Here is the CSS I am using. And a few lines of code that I am trying to use the styling for. Is it inheriting some other styling from earlier that is making it too wide to go three columns? I'd like this code to be able to be used across different themes, so the more independent I can make the css, the better!

<div id="hmls-sub-navigation">
<ul id=hmls-sub-navigation>
<li id=hmls-sub-navigation>



hmls-sub-navigation {background: none repeat scroll 0 0 #EEEEEE;}
#hmls-sub-navigation {background-color: #EEEEEE !important; padding: 0;}

#hmls-sub-navigation ul{
list-style: none outside none;
width:100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#hmls-sub-navigation li{
float:left;
display:inline;
font-size: 92%;
width:33.333%;
}
#hmls-sub-navigation li a {
background: transparent;
color: #3F3F3F;
display: block;
text-decoration: none;
}

#hmls-sub-navigation a:hover {background-color: #B9BE58!important;}
#hmls-sub-navigation a:hover {background-color: #B9BE58;}


Answers (3)

2012-07-12

Kailey Lampert answers:

There's a style (applied to #contentfullwidth ul li) adding a right margin that's throwing off the perfect thirds width.

Style is in http://www.nolinlakerealestate.com/wp-content/themes/Essence-Red/style.css You'll either need to edit that, or overwrite it in another style. For example

#hmls-sub-navigation li{
float:left;
display:inline;
font-size: 92%;
width:33.333%;
margin: 0 !important;
}

---

Scott Hack comments:

Kaily, I'm a super CSS noob. Can I over ride that setting just within this div? Is the only option to change the styling applied to #contentfullwidth ul li?

---

Kailey Lampert comments:

See my edited answer - let me know if that doesn't quite cover it.

---

Scott Hack comments:

HOT DOG!

That certainly worked.

So, educate me here. !important does what? Tells it to let this styling over ride a previous styling?

---

Kailey Lampert comments:

!important just means 'do this no matter what any other style says' Handy, but <em>very</em> easy to abuse.

You could also add a style (to http://www.nolinlakerealestate.com/wp-content/plugins/hmls/media/css/hmls.css) with a matching selector to overwrite the margin

<em>#contentfullwidth ol li {
margin: 0;
}</em>

2012-07-12

Michael Caputo answers:

I would check your margin and padding on your li elements. Perhaps something is pushing it out.

2012-07-12

Reland Pigte answers:

style.css (line 526)
#contentfullwidth ul li {
list-style-type: none;
margin: 0 0 0 7px;
padding: 0;
width: 32%;
}

try to change this line of css codes