Topic: It's a Browser Thing...

OK I am going crazy here! my first try at my new site was ok as far as IE is concerned but Opera and everything else was mushed up, FireFox was ok. My second try fixed Opera but FireFox was all wrecked up! Here's a link to a page I uploaded:

http://www.freewebtown.com/haiderali/latest/home.htm

Here's a link to the default CSS:

http://www.freewebtown.com/haiderali/latest/default.css

Right now I'm startin' to think the browser's are out to get me! If anyone knows what digs please I'm desperate!!!


Online Portfolio

have you ever thought about placing your #content as "absolute" and have it be 48px from top and setting the background image as a "gif" of the two shade grey. Place the rounded off bottom at the end of the content as a seperate gif. or set up as a div relative to the content div.


here's a start

#content {
text-align: left;
margin-top: 48px;
width: 655px;
position: absolute;
background: transparent url("images/bottom.gif") bottom no-repeat;
}

by the way your design and colors look really cool.


EDIT: Yeah I spent a few more minutes looking at it and I got some things to work. The best I can tell you from here is to think like a table but don't use tables. for your #main I would have a box placed in the center of the page. Could be done as easily as

<div align = "center"><div class="main>content</div></div>

I would personally, though few people may disagree, place all your content relative inside main. This should help avoid overlapping of divs.

#nav
#right
#content
#bottom
#disclaimer

I haven't tried any of this myself on your code but I would give it a shot and work from there.



(Edited by MalFunkShun on 07-08-2004 05:48)

Trying adding
height: auto;

to the elements that are giving you trouble.

In IE. if you set a height say 50.. and it has content that would make it bigger than 50, then the element will expand.. However in Opera, Moz etc it will not. So keep that in mind.

Well I tried doing that MalFunkShun but just didn't work some of the stuff got shifted here and there. Why do Mozilla and FireFox behave like this? I've worked with Netscape and even it doesn't mess up the way they do.


Online Portfolio

Don't have much time at the moment, but a couple of notes -

1) Do *not* use absolute positioning for this - there is absolutely no need and it will only cause more problems.

There's also no need to use a deprecated property like align="center"

Overall you CSS looks pretty good - nice and simple and clean. No need to specify 'position:relative;' in any of those divs though - I'd take that out.

I can't say specifically what the problem is at the moment, but I would suggest that you try to cut down on the nested divs. It seems like a few places have a 'wrapper inside a wrapper inside a wrapper....' going on.

One final note (for now) - it's not that Mozilla and Firefox are 'messing up'. It's that you're not yet understanding how they are interpreting the code. Just because IE likes your code doesn't make it "right"

I'll try to play around with this later today if I can...