Horizontal list items

[jknetdesign]

Your text to link here…

There’s 3 orange text links below the slideshow. This is an unordered list coming from a widget. They need to be layed out horizontally. In Firefox it looks good, but in Safaris and Chrome they are stacked like a typical ul.

How can I fix the CSS properly so these links are horizontal?

[Paulie_D]

Looks fine to me in Chrome

[Paulie_D]

Ooops…sorry. Was looking at the wrong thing.

Hold on. BRB.

[Paulie_D]

Ok…I think you would need to add display:inline-block to the li in that particular widget.

.recent-category_widget  li {
display:inline-block;
}

It’s difficult to work just in the Inspect Element tool so this might not be exact.

Additional styling might be necessary to get them centered or whatever.

.recent-category_widget {
display: inline; / * Not sure if this is required but it's already in there */
float: left;
margin-bottom: 16px;
margin-right: 30px;
    width:100% /* not sure about this, it might be needed */
text-align: center; /* this */
}

As for the ‘Our Commitment’ thing…the text isn’t centered if that’s what you are after.

.widget h4.widgettitle {
text-align: center; /* needs this */
}

[Paulie_D]

Do you use a reset.css or Normalize.css?

You really should if you don’t.

As for the spacing on the arrows it looks like you are using a bg image. You can always adjust that if you need.

[Paulie_D]

Can you use normalize on a WP child theme like this?

That I don’t know…I would have thought so but there might be some cascade issues which might cause the overall theme to ‘break’

Frankly, any base theme that doesn’t include a reset of some kind or Normalize.css seems a bad idea to me if you need the page to look exactly the same in all browsers.

It doesn’t of course, the vast majority of users will only have / use one browser. It’s only use developers /designers who have multiple browsers installed.

Do you see anything when you inspect that I can do to improve the CSS?

Without inspecting the whole file, not really…have you run it through a validator &/or a CSSLint type app?

Probably worthwhile.

[Author]

Posts