Small CSS question

[deronsizemore]

What's going on with this ordered list in IE7? Kentucky School Boards Association (http://test.ksba.org/about)

This is the test site I'm working for my company and just discovered that the ordered list at the top of that page is being cut off. It's fine in FireFox. I can apply more margin-left to the <ol> and that fixed IE, but FireFox looks off as the list isn't aligned with the other content on the left.

What's up with that?

[Bob!]

Take out the margin-left and change it to padding-left

That might help. If not you can post the css for the ol here and maybe we can help more with that :)

[davemcnally]

I see what you mean, in IE, it seems to be cutting part of the list out but only by a couple of pixels.

Maybe try some padding instead to just nudge the list in a tiny bit rather than moving the whole thing with a margin?

I'm not an expert by any means so it may not work ;)

*Edit

Bob beat me to it....but seems to be suggesting the same thing.

[SarahG]

If a fix for IE throws it off for Firefox then use an IE only stylesheet and use conditional comments to load it.

[deronsizemore]

Here's the code. I mean it's very basic HTML and CSS. Some other aspect of the site/code must be conflicting with it, because the <ol> can't get any more basic.

ol#objectives {
margin-top: 10px 0 0 20px;
}

ol#objectives li {
padding-top: 3px;
}

<ol id="objectives">
<li>Every public school board will govern effectively and with integrity.</li>
<li>Every public school board member will understand and emphasize student achievement.</li>
<li>Every public school board will practice good stewardship of resources.</li>
</ol>

Take out the margin-left and change it to padding-left

That might help. If not you can post the css for the ol here and maybe we can help more with that :)

Nope, tried that already. Same result.

If a fix for IE throws it off for Firefox then use an IE only stylesheet and use conditional comments to load it.

Ah, yeah, I could do that, but I hate too. I've not found a problem yet that can't be solved without using IE only conditionals. It's got to be something easy. :)

[Bob!]

padding-left: 15px should fix it for IE, I don't know if it will throw it out with FF though, but it is more intelligent so you should really be ok with that. The number must have 15pixels to show, if you changed it to padding-left: 10px it wouldn't have fixed it. Try 15 and let us know :)

[Bob!]

Looks like you'll need to do what Sarah suggests. I've been watching it on both FF and IE and it just doesn't seem to work. You need 5 more pixels on IE but not on FF :(

[deronsizemore]

Looks like maybe the default spacing is just different in IE than it is in Firefox.

I guess I'll just have to deal with the couple pixel difference. It's the same result whether I use padding or margin on the <ol>. I although thought the number needed 15px to show, but in IE, it needs about 23px (in this example at least).

I can change code above to this:

ol#objectives {
margin-top: 10px 0 0 23px;
}

and it works. It just really bugs me know there is a that small difference that really shouldn't be there, but that may just be the nature of the beast of <ol>. I don't use <ol> much so I'm not sure.

Looks like on my CSS gallery, similar thing is happening with the "top 10 designs" in the sidebar. The spacing between the number and the text of each point is different in IE and Firefox. If you check out the number 10 design in the list you can see that the text is overlapping the number.

[Bob!]

Just found this on a google search Creating different CSS style selector definitions for browsers (Firefox, Internet Explorer 7 and IE 6.0) | iDonny Productions (http://cmsproducer.com/different-css--firefox-internet-explorer-7-IE-6-5)

It is suggesting that if you use this code it should work (I've not tried this of course:-

margin: 10px 0 0 23px;
_margin: 10px 0 0 15px;


Might be worth a try as apparently IE ignores anything with an underscore in front of it (this may need a little tweeking, but we'll get there).

[deronsizemore]

Thanks Bob, I've been using CSS for a while now and had never seen those selectors before. Nice find! Although it doesn't look like the CSS will validate with these selectors in the code.

This was all I needed to get it to work:

ol#objectives {
margin-top: 10px;
margin-left: 20px;
#margin-left: 23px;
}

ol#objectives li {
padding-top: 3px;
}

[deronsizemore]

Hmm, I like my code to validate, so if I can't figure out a solution otherwise, I'll just go with SarahG's solution and use a quick conditional and be done with it. :)

[deronsizemore]

Well, hmmm, I tried to throw an IE only conditional in but it had no effect on either IE6 nor 7.

It should fall in order behind the regular stylesheet, correct?

[SarahG]

It should come after the call to the main stylesheet so that it overrides the main stylesheet's settings

[deronsizemore]

It should come after the call to the main stylesheet so that it overrides the main stylesheet's settings

Ok, that's what I thought.

If you check out the page: Kentucky School Boards Association (http://test.ksba.org) and view the source and then view the stylesheet for IE, what am I doing wrong? See anything?

EDIT: Ahh, crap. I know what I did wrong. :) lol

[SarahG]

You can't not tell us what you did wrong ;)

[deronsizemore]

Hehe, well, I went to see if what I "knew" I did wrong was in fact the problem. Sure enough, it was. I just created a new template inside of ExpressionEngine to hold the IE CSS styles. I forgot to set the template type to "CSS Stylesheet" :eek:

[Dan Schulz]

Deron, I haven't looked at the page, but do you have a reset at the top of your stylesheet that zeros out all the margins and padding on the page (preferably while not touching form elements and controls)?

Here's the one I'm using nowadays (feel free to use it):


html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, textarea, tt, var {
margin: 0;
padding: 0;
}

[deronsizemore]

Deron, I haven't looked at the page, but do you have a reset at the top of your stylesheet that zeros out all the margins and padding on the page (preferably while not touching form elements and controls)?

Here's the one I'm using nowadays (feel free to use it):


html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, textarea, tt, var {
margin: 0;
padding: 0;
}



Well, I've just been using:

* {
padding: 0;
margin: 0;
}

Why do you prefer to use a method that doesn't effect form elements and controls?

Also, you're an Opera user, right? How's this site look in Opera for you, cause it's a complete mess on my end in Opera. The site is fine in FireFox, IE 6/7, and Safari, but terrible in Opera. I opened a thread at Sitepoint and got a response saying that it could be because of the "clearfix" method I'm using to clear floats. I thought that method was pretty standard today....

[Dan Schulz]

Deron, how are you serving the stylesheet? I noticed the problem you're having, but when I removed the linked stylesheet and embedded it, the problem went away.

As for the reset I use, the universal selector causes a lot of form problems in different browsers. Some will go so far as to prevent you from reapplying margins and padding to form controls that have had them stripped. Others just go haywire (Internet Explorer, I'm looking at you).

[jMcQuarrie]

ol#objectives {
margin-top: 10px 0 0 20px;
}

Does that actually work? Sorry, I'm late to this thread, but I was under the impression that margin-top (or any margin-xxx) would only accept one value?

So writing:

margin-top: 10px;

would work, adding 10px margin to the top, but writing:

margin-top: 10px 0 0 20px;

shouldn't. If you want to set all four sides (top, right, bottom, left - in that order) you can write:

margin: 10px 0 0 20px;

(dropping the "-top" bit).

[goldfries]

jMcQuarrie, you are correct.

margin = 4 values
margin-top (bottom, left, right) = 1 value.

[SarahG]

I think that was just a typing error in the post as it's not like that in Deron's CSS file :)

But it should have been spotted sooner ;)

[deronsizemore]

I think that was just a typing error in the post as it's not like that in Deron's CSS file :)

But it should have been spotted sooner ;)

Yeah, Sarah is correct. It was just a typo. :)

[deronsizemore]

Deron, how are you serving the stylesheet? I noticed the problem you're having, but when I removed the linked stylesheet and embedded it, the problem went away.

As for the reset I use, the universal selector causes a lot of form problems in different browsers. Some will go so far as to prevent you from reapplying margins and padding to form controls that have had them stripped. Others just go haywire (Internet Explorer, I'm looking at you).


Hey Dan,

Sorry, I noticed your reply to Paul at SP. I completely overlooked your reply here.

As for linking to the stylesheet. I don't really want to have the css embedded into the <head> of the HTML, but I guess if that's what I have to do, that's what I have to do. Although, the audience for this particular site will more than likely be about 99% IE, so if it doesn't work in Opera, it's not the end of the world for this site.

Thanks for explaining the universal selectors. That's just how I had seen every example before now. Never crossed my mind to set it up like you have it. Never realized there were cross browser issues with it either, so looks like it's time I switch methods.

Thanks

[Dan Schulz]

Why not just link to the stylesheet directly rather than serving it dynamically?