Question about positioning between IE and Firefox

[centrationinc]

OK here is my problem. In Firefox I have a <p> tag that displays properly. But in IE it displays it higher by about 30-60 pixels (havent measured to be exact). I know there are IE Hacks out there but from what i have read there are tons of people contradicting each other and I dont know whats true and what isnt. Below is my css code.

p.headerText {
position:absolute;
left:256px;
right:200px;
font-style:italic;
top: 144px;
width: 308px;
color:#CCCCCC;
}

I would like to have something that says, if its IE use X css file, else use Y css file. Thank you in advance.

[cssGalactic]

You need to set the margin:0; padding:0; to the <p>

Here are the controls

1. margin-top:1em;
2. margin-right:0;
3. margin-bottom:2em;
4. margin-left:0.5em;

But this is much more efficient:

1. margin:1em 0 2em 0.5em;

same for the padding.

That should work.

[centrationinc]

I am having a hard time finding the balance between the 2. Because in firefox it goes correctly but just like normal IE is taking a dump on me.

[nickelleon]

Can you provide a link to where this p tag is being used? Id like to see how the different elements influence this and get a better idea of the problem.

[centrationinc]

Sorry nickellon its on my localhost as of right now. I found out this fix online but i dont know how reliable it is.

margin:1.5em 0 0 ;
html>body margin:0em 0 4em 0.5em;
padding:1.5em 0 0 0;
html>body padding:0em 0 4em 0.5em;

No matter what i change inside the HTML>body section will not change the IE. So that part is working. The part that isnt working is that Firefox isnt reading it like its supposed to.

[drhowarddrfine]

The selector, >, does not work in IE, only modern browsers, that's why it doesn't change anything.

[centrationinc]

I apologize i wrote that wrong. Im starting to get sick and my head is killing me...what i meant to say was the ,>, selector will not work in Firefox.

[drhowarddrfine]

Well, no. That selector works perfectly fine in Firefox. It does not work at all in IE and if you think it is then you are mistaken because IE does not support it at all.

Now, if what you show is exactly how you have it in your css, then you're syntax is incorrect, too. (not in curley braces)

[WebJoel]

In addition to the universal selector being used to change all padding & margin to "zero", you probably need to standardize your font-size as well. I have found that declaring in the HTML, BODY {....font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */
font-size:100%; line-height:1.125em;} and then, re-stating the font-sizes that you really need (like, p {font-size:12px;}, or whatever..) goes a long way towards settling cross-browser issues with errant font-size discrepancies.

This approach that I am using isn't perfected yet, but there are ways to acheive this. I'm still sort-of working on my solution to this problem but so far haven't had any major issues warrantly getting this resolved.

[centrationinc]

I fixed my problem. I had put in between the head tags this code below.

<!--[if IE]><style type="text/css"> p.headerText {position:absolute; left:260px; right:200px; font-style:italic; top: 135px; width: 308px; color:#CCCCCC; margin:1.5em 0 1.5em 0; padding:1.5em 0 1.5em 0; font-size:11px;} </style><![endif]-->

It fixed my problem like a charm. Thank you to all who helped.

[centrationinc]

Actually I do have another question. On the website just above the menu there is a gap that i wish to get rid of. I have tried using margin:0 0 0 0; but to no avail. I will link the website. Please help!!

http://www.pixels4dollars.com

[WebJoel]

...have tried using margin:0 0 0 0; but to no avail. I will link the website.

<style>
* {margin:0; padding:0;}
....
</style>

Make the universal selector ( * {margin:0; padding:0;} ) be the FIRST things in your CSS, -always. The problem goes away.

[centrationinc]

Sorry to burst your bubble but it didnt fix my problem!!!! LOL just giving you a hard time. But it really didnt. I updated the site with the corrections. It just messed up my other padding and margin selectors within the entire site. And it did not fix the problem that I had originally.

http://www.pixels4dollars.com

[Centauri]

The reason the universal reset affected your other margins is due to your relying on browser defaults for spacing - not a good idea, as different browsers use different values. Best to set your own spacings.

The gap you are refering to can be cured by block display on the header image - really, I don't know why you didn't just set the image as a background to the header div anyway.

I would also strongly discourage the use of those image maps for all your links - screen readers and search engine spiders simply CANNOT navigate your site...

[centrationinc]

Ok that shrunk the gap but didnt completely get rid of it. The results are uploaded.

How can I keep my design without having to do major overhaul work and get rid of the image maps?

[Centauri]

You set the header div itself to block display (which it is by default anyway) instead of the image.

Getting rid of the image maps will take a little work, but a number of styled unordered lists of links will take care of that.

[WebJoel]

....How can I keep my design without having to do major overhaul work and get rid of the image maps? You can get rid of image maps with a neat technique of using a "<ul>" and 'positioning' the "<li>"s over the 'hot areas' of the background image, and using the same background-image of the "<ul>" for the "<li>", you can 'clip' the sizes to fit the actual area of "<li>". This means only one http-request for one image, which is re-used from cache for every "<li>".
-This description sounds far more difficult that it really is. I'd have to look at your code again and see where you are..
(doing some client work today so am between builds..)..