WordPress.org

hello everyone, hope we are all doing well.

I am having a heck of a time trying to get a css tag to work with FF and IE

if you have some time, pop by here,
insuranceworkforce.com/blog/
one window using IE and the other using FF, notice the category box is messed up in FF but fine in IE

also, the center content area, the left and right border is fine in FF but no good in IE

i have been banging my head for a few days on this and the site is supposed to be ready to go tomorrow (more like yesturmorrow)

any help would be greatly greatly appreciated.
thank you kindly

I don't use IE so I can't check your site in that browser. But in general, you should code your site in FF, validate incrementally, and then apply whatever IE hacks are required to render properly in that "non-compliant" browser.

hi there and thanks for your post.
I myself was working in FF, but had to take some time off.
The person filling in for me originally did this part but I cant get a hold of them at this time

css for categories (dotted underline mess up)

#content .white-box ul {
	text-align: left;
	margin-bottom: 9px;
}

#content .white-box ul li {
	padding: 2px 10px 1px;
	/* float: left; */
	font-size: 11px;
	color: #28507c;
	border-bottom: thin dotted #cacaca;
	margin-left: 10px;
	margin-right: 10px;
}
#content .white-box ul li a {
	padding: 0px  15px;
	display: block;
	float: left;
	width: 87%;
	height: 100%;
	font-family:Arial, Helvetica, sans-serif;
	color:#28507c;
	font-size:11px;
	text-decoration:underline;
	background: url(http://www.insuranceworkforce.com/images/li_resources.png) no-repeat 4px;
	margin-left: 8px;
}

css for lines on left and right of center content
( i believe these are all the tags that are assigned to that area)

#content #main .position {
	padding: 0pt;
	width: 440px;
	float: right;
	}
.post {
	color: #333;
	text-align: justify;
	padding-left: 2px;
	padding-right: 0px;
	padding-bottom: 10px;
	width: 396px;
	border-left: 1px solid #E9E9E9;
	border-right: 1px solid #E9E9E9;
	margin-right: 2px;

}

hope this helps...
the template started out as movie-theme, its just been edited a whole bunch from the original

thanx muchly

Always design the site in Chrome/Firefox and then add a stylesheet with all the small corrections for IE (should be small or you are doing something wrong) in it.

Adding this will load ie.css for IE lower than (lt) 7, all other browsers will ignore it.

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css" media="all" />
<![endif]-->

The world would be so much better if Microsoft would pay more attention to standards or people would upgrade browser.

Since it's a list I would probably try to add display:inline; to the LI element.

i've been playing with your page for the last little bit... here are some observations fwiw:

Your css is confusing, partly because it jumps from pt's to px's when referring to sizes, padding, margins, font ect... Just for what it is worth, you may want to consider going through it and adjusting those... as in stick with one or the other... everybody has their tendencies, but for reasons.. many, me included use pt's when referring to font size and line height, and px's when talking about margins, padding ect.. mixing the two as is in the css's your using, is asking for a premature bald head...

You have listed several places things like margin: 1px 0, this is fine, but if you want to maximize your cross browser use you may want to go back and add the other two, such as margin: 1px 0px 0px 3px;

If you are going to link to two or more external css files, you may want to consider only setting a wild card '*' once, same as with the body, HTML, ect.. it can trip out browsers--- it has been said css is like a private in the army, it does exactly what it was last told to do.. but IE knows nothing of discipline, and will do some crazy stuff when it is being told to do several differing things for the same tag- in different places.. it can be unpredictable.

IE also doesn't play nice with negative declarations.. So you need to work around those margin: -10px; and such.

The killer for that .white_box, I can't remember which place, but you have the declarations top:, and left: assigned, that is fine but it is not a absolute positioned item, which-- guess? trips browsers out, especially aging and senile IE.

Final shot: you have declared in several places things like position:relative; ... just another for what its worth thing, but it is relative by default in every browser I know of, believe it or not IE too! It's been my experience you should only declare what you want to change, not what is provided my default.. It confuses the issue for later adjustments, and also for some hapless browsers (uhem, Mr, Gates)...

I highly rec you use FF or Opera for development- prefer FF w/ the devel plug-ins.. not for just what you are thinking either, but 'cuz it is compliant.. It is also stricter.. Your always going to do the IE reacharound, but if it is close to compliant in the start, it is easier to find problems later..

you got a laundry list man, best of luck!

wow..that is a mouth and a half full :) thank you kindly to both of you for your input.

the different formats are one of the things i hate most when picking up where someone else left off..i did not start the original edits..i just had to pick up the pieces :)

I plan on scraping and cleaning up the whole css once i finally get everything working, as there is alot of stuff in it that is obsolete now that some of the layout has been changed.

I would like to thank you for your extensive reply. I am going to do all that has been adviced from everyone and see how it gos :)

I am sure you will hear back from me.
LOL

thanks again

quick update..
i tried the
display:inline;

#content .white-box ul li {
padding: 2px 10px 1px;
/* float: left; */
font-size: 11px;
color: #28507c;
border-bottom: thin dotted #cacaca;
margin-left: 10px;
margin-right: 10px;
display:inline;
}
it fixed the spacing between the links however, the lines went off to the right (in FF) :)

insuranceworkforce.com/blog/

Not to argue with anyone, but the real experts in the CSS world state unequivocally that pts should never be used to size fonts. The accepted norm today is ems or percentages - with percentages preferred by far.

Just saying ...

ok, i changed all