firefox and ie positioning differences... [Archive]

rezachemical

04-25-2006, 09:55 PM

If you view the following address in both Firefox and Internet Explorer, it comes across more than apparent that for some reason the two browsers have completely seperate understandings for pixels.

http://www.elitebeat.net/rouge/gregharrison.freerealestatesoftware.net.htm

I needed to have this done by end of the month so absolute positioning was called in, and since more than 70% of the prospective clientel will be IE-inclined my project manager decided to send me down a path where my primary concern was IE.

This is fine temporarily, but the designer inside me isn't very happy. What is the best way for me to do this with a proper look in both IE and FF. If you look at the CSS and the HTML you will realize what I am attempting.

Also, I'd like to thank you all for putting up w/ my constant posts and bewildering newbie-ness. Your patience and help have been a great thing to me as this job is an internship and my performance has only been what it has thanks to all who have tried to help me.:thumbsup:

Cheers,

ps: i'd greatly appreciate anyone that's willing to basically act as my "css" coach thru msn or googletalk. pm me if you think you'd like to be such a help.. heheheh...:D

VIPStephan

04-26-2006, 12:01 AM

Ouh yeah, that's really much positioning... a nice design, though. :)
I think this is a pretty simple layout as there is only one column with a header and footer. So structure your content like that too: header, content, footer, and all wrapped by a container. Something like this:

<body>
<div id="container>
<div id="header">
<h1>Greg Harrison</h1>
<h2>Elite Beat Enterprises<h2>
<h3>We are the best EVER!</h3>
<p>[address and stuff here]</p>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="content">
<p>text here</p>
<p>more text</p>
</div>
<div id="footer">[optional content here]</div>
</div>
</body>

I think the footer isn't even necessary as there are no links on your page right now. And this image that is there can easily be included into the content section.
You can use the headings to add background images (like the logo and the face for example) and you just indent text with text-indent: ??px; to make it move to the left (or right with negative value).

Note that there are default margins on <hn> elements which can be annoying and give you a hard time if you don't know that and wonder why it's different in IE and FF.