Cross Browser Compatibility Problems IE Netscape and Firefox

[boutte 0]

First let me say hi to the group, this my first post and I hope this post isn't too repetitive as I'm sure a lot of people have this problem. I recently decided to get back into web design after a long lay off. Since I haven't built a site in six tears I'm not well versed in CSS but I figured I'd build my first site as I learned how to use it. Initially things looked pretty good in all three browsers so I quit checking in Firefox and Netscape. The site is still not finished but I posted what I have to a free host and when I checked it in IE it looks good but (you guessed it) it's totally screwed up in every other browser It just doesn't line up right. I used absolute positions but there's stuff all over the place.

Also, what doctype should I be using?
Here's the link http://boutte.awardspace.com/.

By the way, I know it's weird for a novice to be building a web design guide type of site but as I learn I expect the site to grow with me

[<?me?> 0]

Did you try using the CSS positioning yet? I looked at the source code for your site and I didn't see any. You can position elements like this (inside a style tag or external style sheet):

div.left{position:absolute;left:100px;}

This will position the div element with the class '"left" 100px to the left of it's parent tag (normally the body).
You can also use 'top', 'bottom' and 'right' to position.
That should work in all modern browsers, I think. I would be surprised if you haven't tryed it yet but good luck to you on learning css and I hope this was some help.

[boutte 0]

Did you try using the CSS positioning yet? I looked at the source code for your site and I didn't see any. You can position elements like this (inside a style tag or external style sheet):div.left
{
position:absolute;
left:100px;
}
This will position the div element with the class '"left" 100px to the left of it's parent tag (normally the body).
You can also use 'top', 'bottom' and 'right' to position.
That should work in all modern browsers, I think. I would be surprised if you haven't tryed it yet but good luck to you on learning css and I hope this was some help.

Yeah I have three "boxes" defined in the header and I used this

<span style="position:absolute;left:20px; top: 150px;" class="box"><span style="position:absolute;left:170px; top: 150px; padding:6;" class="box2"><span style="position:absolute;left:770px; top: 150px;" class="box">

to align them. Works great in IE and the first box goes right where it's supposed to in Firefox and Netscape. The other two boxes don't.

[jlhaslip 4]

Two things:1.) try to avoid using position:absolute because of the differences between the Browsers and the problems that result from its use. Depend on the "flow" of the page elements instead of specific positioning. Use Margins and padding to space and seperate div's2.) Design using a more compliant browser than IE and then hack the css to suit rather than designing the page in IE and expecting to hack the compliant Browsers. Compliant Browsers are more difficult to hack because they actually get it right the first time. Opera and Firefox are more compliant than IE, so use them to design your page in. A common approach to hacking IE is using the conditional statements to alter the css or to use a different css file for the IE css coding.Good luck with the page.

[boutte 0]

Two things:
1.) try to avoid using position:absolute because of the differences between the Browsers and the problems that result from its use. Depend on the "flow" of the page elements instead of specific positioning. Use Margins and padding to space and seperate div's

2.) Design using a more compliant browser than IE and then hack the css to suit rather than designing the page in IE and expecting to hack the compliant Browsers. Compliant Browsers are more difficult to hack because they actually get it right the first time. Opera and Firefox are more compliant than IE, so use them to design your page in. A common approach to hacking IE is using the conditional statements to alter the css or to use a different css file for the IE css coding.

Good luck with the page.

Thanks
So I guess I should use Firefox as my internal broser. What errors did you see that would cause the problems I'm having in lining up the elements in Firefox? It's eems like an absolute position of
<span style="position:absolute;left:170px; top: 150px; padding:6;" class="box2"> would line that box up 170 pixels from the lefy and 150 pixels from the top regardless of which browser you view it in, no?

[jlhaslip 4]

Absolute:positioning is tricky at best. The problem comes from the origin which the browsers define as (0,0), some times it is the "window" and other times it is the "parent element", so as I mentioned, try to use the document flow, floats, margins and paddings instead of position:absolute.

[boutte 0]

The problem comes from the origin which the browsers define as (0,0), some times it is the "window" and other times it is the "parent element",

Okay that makes sense. I guess I have some work to do. Thanks for the help.