Tech Support Guy banner
  • Please post in our Community Feedback thread for help with the new forum software! If you are having trouble logging in, please Contact Us for assistance.
Status
Not open for further replies.
1 - 20 of 25 Posts

·
Registered
Joined
·
229 Posts
Discussion Starter · #1 ·
Hi everyone,

I'm just floundering around teaching myself CSS, HTML and PHP. I have a site that is displaying well in IE and Opera but not correctly with Netscape or Firefox. If you go to this address you will see that the footer box is at the bottom of the page in IE and Opera, but floating in the middle of the page using Netscape or Firefox. It's almost like they aren't recognizing Position: Relative.

The other thing that is strange is if you are at the home page:

http://www.glassresearch.net and then click on the link to the About Us page you will see the whole page shift to the left. Some of the pages are doing that and some aren't. I'm wondering if it might not be that the content part of the pages are set wider than the CSS and other pages. This is happening in all four browsers.

Any help would be awesome!!

Thanks,

Cheryl
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #5 ·
It seems to be having the problems in Firefox and Netscape the most. I'm beginning to think that it is a problem with the Position:Relative setting for the custom div. Here's a link to the page with the issue, view source to see the code.

http://www.glassresearch.net/includes/html/main.htm

Can anyone see anything that might be messing it up? I'm also attaching a jpg of a screen shot showing what it looks like.
 

Attachments

·
Registered
Joined
·
3,625 Posts
It is messed up for me in the aboutus page in FF2.

It is because you have it at a certain point not at the bottom no matter what.

margin: 20px 0px 0px -400px;


that needs to be changed
_________

Nice site btw ;)
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #7 ·
Which part of this needs to be changed? It looks to me like position:relative would take care of where the div starts on the page (relative to the last one with content).
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #8 ·
Oh and thanks everyone for the kudos about the site in general! I hired someone to write the code since I needed it done in this millenium! Now I'm doing my own modifications & corrections. Thanks!!
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #9 ·
Woohoo!! I figured out part of it. The footer floating in the middle of the page was due to this mistake:

height: 560px;

should have been:

min-height: 560px;

It didn't fix the issue of some of the pages shifting to the left. I'm off to work on that now..
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #10 ·
Anyone have any more ideas about this shift to the left issue? It appears to be a positioning problem. It is shifting the whole page to the left, not increasing the width of the page. I can post a movie of it happening if anyone needs it...
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #12 ·
Dang it... I didn't fix it after all. If I use the following line then the command is recognized in Firefox, Opera and Netscape but not IE. In IE the footer just ends up at the bottom of the page even if the page is only a few lines in length. So IE is not recognizing the MIN-HEIGHT: 560px. Any ideas?
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #14 ·
Thanks Big-K!!

Here's what happened when I changed it to height:560; overflow:visible: It worked great in IE and Opera. It made the footer float at 560px in Netscape and Firefox.

When I changed it to height:560, overflow:auto then all 4 browsers reacted the same way. It put the footer at 560px and then put scrollbars in for all of the overflow. I'd rather not have scrollbars. They really make it look messy.

Any other ideas?
 

·
Registered
Joined
·
6,052 Posts
I just noticed something. You don't need to be using position:relative. Use position:absolute and dont tell it anything about the top, it'll automatically position it for the top if you dont' specify that. Basically, put this:

Now since i notice that min-height indeed does not work in IE6, i came up with a quickfix. Just after that div starts, put in another div that says , immediately closing it. This will make it so that no matter what, that wrapping div has to stretch to accomodate the one with a set height. If you get higher than that the wrapper will keep stretching. Since the sub has no background color, it'll appear as nothing. Just for safety, you might give the sub a z-index of -100 so that it will appear behind everything else for sure. You then need to add a div to contain the content, since it'll otherwise be pushed down 560px. The result is:

*content*

EDIT: hold on, found an error in this, i'm fixing it now
 

·
Registered
Joined
·
6,052 Posts
alright, this really bothered me so i finally made it work. I found something called conditional comments for ie.

*content*

technically its not valid html, since if you add the ending tag for the div with class=go it'll show in the code. I dunno, make it work, i'm tired.
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #18 ·
Well you might be onto something there... but I don't think I'm putting the code in the correct place in the main.html file. Should those lines be broken up into a couple of different places in the file? Thanks for helping me with this. I'm tired too... and a headache. I'll check back tomorrow. Thanks!
 

·
Registered
Joined
·
6,052 Posts
sorry

the style should go in the header, you can get rid of all but the class="go" div. The content goes inside that one. It goes inside of the main div, so that it'll be pushed downward. If you need it pushed more, give it margin-top.
 

·
Registered
Joined
·
229 Posts
Discussion Starter · #20 ·
I think we are getting there! What that did was fix the issue with the footer. But it put a single line outline around all of the content.

Also... In Netscape the content is positioned correctly under the header but in the other 3 browsers it is pushed down about 2 inches.
 
1 - 20 of 25 Posts
Status
Not open for further replies.
Top