Unordered list only workng in Firefox

  • Resolved viensia

    (@viensia)


    11 years ago

    I can’t be the only person with this problem, but can’t find an answer anywhere, so here goes:
    This is my first time using a centered or right aligned unordered list. Obviously, I’m missing something as the bullets stay to the far left while the “list” is positioned properly. This happens in all browsers except for Firefox (which I use WP in.)
    The page that I’m working on is at https://nolagoodeats.com/test/. I’m using wp 3.5. with a twentyeleven child theme.
    Any assistance will be greatly appreciated!!

Viewing 15 replies - 1 through 15 (of 26 total)
  • Thread Starter viensia

    (@viensia)

    Not trying to bump this, but thought more info would be helpful.
    The html is

    <div class="wdd">
<ul style="text-align: center;list-style-type: disc;">
	<li style="text-align: center;"><em>Calamari</em></li>
	<li style="text-align: center;"><em>Shrimp Remoulade
</em></li>
	<li style="text-align: center;"><em>Shrimp Cocktail
</em></li>
	<li style="text-align: center;"><em>Mushrooms Stuffed with Crabmeat
</em></li>
	<li style="text-align: center;"><em>Seared Ahi Tuna
</em></li>
	<li style="text-align: center;"><em>Crab Cakes
</em></li>
	<li style="text-align: center;"><em>Spinach and Ricotta Ravioli
</em></li>
	<li style="text-align: center;"><em>Spicy Lobster Rolls
</em></li>
	<li style="text-align: center;"><em>Oysters Rockefeller
</em></li>
</ul> </div>

    The css I’ve added is
    .wdd {margin-left: auto; margin-right: auto;}

    I know that I’m missing something simple, yet I can’t figure it out.
    [Unnecessary comment moderated]

    esmi

    (@esmi)

    Why are you using an old copy of WordPress? Were you aware that your site is currently running a very real risk of being hacked? You need to upgrade WordPress asap.

    Thread Starter viensia

    (@viensia)

    And therein lies the fussing. That’s cool, I’m happy that I got your attention! It’s an old page that’s about to expire on it’s own, it’s simply live for now. I do have a couple of other pages that I’ve built for friends with wp 3.6, a test on those pages yields the same result.
    I’ve looked at the reset css, I really just need some guidance. Thank you!!!

    esmi

    (@esmi)

    Once you have upgraded to the current version of WordPress, let us know if you still have the problem.

    Thread Starter viensia

    (@viensia)

    Oh, a friend told me he has the same problem with Metrostyle on 3.6.1(?). Is it simply not doable?

    Thread Starter viensia

    (@viensia)

    Upgraded to 3.7.1, problem still exists. Any solutions would be helpful, thank you!!!

    esmi

    (@esmi)

    Now try sorting out the markup errors. Then move onto the CSS errors.
    https://codex.www.ads-software.com/Validating_a_Website

    Thread Starter viensia

    (@viensia)

    Wow! Didn’t know that there were so many errors in the page, thanks for pointing that out! That said, do any of those errors reflect upon the positioning of the bullets for an unordered list? The page is about to go away, so I’m simply using it as a test page for this. I’ve always appreciated your and WPYogi’s help as I am still learning. But, right now, I just ask that you help me learn what I did wrong with the unordered list. Thank you!!!

    esmi

    (@esmi)

    The markup validation errors might be contributing to the problem. The CSS errors will definitely be contributing and could seriously screw up the final layout in some browsers. So I would suggest that you get as many as possible tidied away first and then re-evaluate the list display to see if this has helped.

    SWalberg

    (@swalberg)

    Hi Viensia,

    Upgrading your version of WordPress and checking validation errors is the “have you rebooted?” of the WordPress world. It serves you well to keep on top of the constant upgrades, but it’s not what’s causing your web browser to render this incorrectly.

    Have a look at https://stackoverflow.com/questions/15808134/zurb-foundation-4-bullets-wont-center-align-in-chrome-and-ie9-ie10 which seems to explain what you’re seeing and offer a solution.

    Sean

    Thread Starter viensia

    (@viensia)

    Looking at the link, most of the errors are in 2011 and not the child theme. The ones that are in the child theme are for wow-slider. I NEVER touched the 2011 css, thoughts?

    esmi

    (@esmi)

    Markup issues like the missing </div> and the <font></font> usage are definitely not part of the original 2011 theme. You also have a CSS error on line 143 of your child theme’s stylesheet,

    WPyogi

    (@wpyogi)

    EDIT – sorry, misread your question – this may or may not be relevant.

    The problem is in your CSS – try adding “display: table;” to this:

    .wdd {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

    And get rid of the “center” CSS on the list elements.

    Thread Starter viensia

    (@viensia)

    Thank you, Sean! Am working (looking) at it now…

    Thread Starter viensia

    (@viensia)

    To Sean and WPYogi:
    Thanks again, still not working. Sean I tried,but came up with the bullets not on the far left, yet not centered next to the text.
    WPYogi, I deleted the other css and added in the display: table;
    Still not showing next to the “list”, the bullets are centered vertically, but the list still has “extra padding”?

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘Unordered list only workng in Firefox’ is closed to new replies.