2 replies [Last post]
tracyberna
Offline
Regular
Los Angeles, CA
Last seen: 4 years 46 weeks ago
Los Angeles, CA
Joined: 2005-11-03
Posts: 18
Points: 0

I am going out of my cotton-pickin' mind trying to get one stupid tiny little thing to work in IE7, and it is willfully disobeying my every attempt. Seriously. I think sometimes it even sticks out its tongue at me when I'm not looking. :curse:

I'm using a WP plugin called FAQ-Tastic (maybe not relevant to the problem; however it is the only page where this is happening). It outputs two ordered lists: one of questions, which contains links which jump down to the answers. I don't necessarily need them to be ordered lists but that's what the code does. I have in fact have covered up the numbers with bullets, but the problem I'm having occurs whether I use numbers or bullets.

The first ordered list, the bullets line up perfectly with the questions. In the second list and only in IE7, the bullets are higher than the h3s that make up the titles. I have tried everything to make it line up, including:

    *Conditional IE statements in the head section to target IE7 with various CSS, including trying to use background-image. I couldn't get the page to respond to anything I called out.
    * I tried this IE7-specific hack in the stylesheet:
    *:first-child+html .entry #answers li {
    	list-style-item: none;
    	background: url("images/bullet.gif") center left no-repeat;
    }

    It regularly ignores the "list-style-item: none" and gives me two bullets, both badly positioned.

The page in question is here: http://metroencoding.com/faq-2
The CSS--since the theme is at least partially a child theme, there are two stylesheets:
http://metroencoding.com/wp-content/themes/metroencoding/style.css
http://metroencoding.com/wp-content/themes/freshcitrus/freshcitrus/style.css

Halp?

----
~*~ When in Hollywood, visit www.tracyberna.com ~*~

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 18 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9150
Points: 3134

From the h3, remove the 15px

From the h3, remove the 15px top padding. If you need the space, put the padding on the li.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

tracyberna
Offline
Regular
Los Angeles, CA
Last seen: 4 years 46 weeks ago
Los Angeles, CA
Joined: 2005-11-03
Posts: 18
Points: 0

Thank you SO much, Gary

It finally worked when I stopped trying to target the command for IE7 -- initially I used your suggestion but kept trying it with the IE7 hack, but nothing happened. Finally I just changed the h3 for the whole site, then went in to see how it must have changed things for the other browsers... and it hadn't! Everything now looks fine everywhere. I don't know why it works but I'll take it.

You're awesome! Thank you!

----
~*~ When in Hollywood, visit www.tracyberna.com ~*~