[hockey97]

Hi, I been having trouble trying to make my website to resize according to the clients resolution.

I tried many ways but find out that if I set a high resolution or a low resolution my elements on the website would overlap each other depending on the resoultions size.

I was to make a website that no matter what your display/resolution settings are you will see the website like how it was designed to be.

I have see websites that do this. Mostly gaming websites that if you change the resolution their website would scale and resize to fit that resolution.

This is what I want to do. Make some code that will detect the persons web browser and then detect the screen of the web browser the height and width.

I would then like to use a algorithem that would figure out the portions I would need to resize the content.

So I can then using that variable portion to be used to adjust the css height and width so It would scale the website to fit the resolution.

any idea how to do this?

[Artem]

Javascript can make it proportional and stuff.
But why take it that far? Just make sure your content isn't wider then 800px and you should be fine... :s

[hockey97]

Javascript can make it proportional and stuff.
But why take it that far? Just make sure your content isn't wider then 800px and you should be fine... :s

well, I am using javascript,css,html. The problem I face is with javascript.

I have menus to fade in when the users mouse is on the user image. So a menu fades in that they have options to change their photo and add captions etc.

The problem I face is that it's OK on Firefox. However when you look at the page with IE7 or any IE you get got positions. I mean the image and the frame around the images and all objects are scattered around the site.

when your mouse is over the image in which the image is raondomly place on the site. You won't get any fade menu fade in. The menu is already appeared even when your mouse is not over the image.

and all the elements of the page are just randomly scattered around he place.

This is only with IE. With Firefox all works well and the elements are at the right positions I wanted them to be.


What I want to do is have a site to be view the same. I want it to fit each resolution.

I don't want to make a site with the resolution 800 x 600. So any resoultion higher then that would see extra space which would make it look kind of odd.

If you look at myspace you can change the resolutions and it will still look the same.

No elements move out of position. They stay where they were assinged the position no matter what the resolution is.

any ideas where I can stop the elements from moving positions. I heard that IE has a different position system then Firefox.

[Artem]

Indeed IE and FF have differences in positioning. I think that's because top:0; left:0; isn't defined the same way for FF and IE.

Are you using %'s to set width and height of elements?

Could you provide some graphic material?

[hockey97]

No, I can't at this time. My server is down. I have to install some files to get it back up.
Someone ended up hacking my server and deleting some major system files.

I am not using the %. I am using the px(pixel).

I don't want to use % because it will make my other elements to overlap other elements depending on the users resoluation.

I heard that there is a javascript that would calibrate both Firefox and IE to a standard position point.

I don't know if that is true.

[retsoksirhc]

If you use percents carefully, you can do it without making things overlap at lower resolutions.

I feel your pain on the IE vs FF thing. They just DON'T consistently render CSS the same way. One way to clear up a lot of issues, if you haven't already, is to do a little bit of research into IE's 'quirks' vs 'compliant' mode. Another tip: use the w3 css and html validators, to make sure you're using valid CSS and html. Valid code usually goes pretty well... the main problems I have if all my CSS is valid are, like artem said, the left: top: right: and bottom: values, and the fact that IE treats height: and width: like FF treats min-height: and min-width. (Tip: to have IE AND Firefox do a min-width, use min-witdh: x; _width: x;... firefox will ignore the _width, while IE won't. It doesn't validate, but it is a simple fix.)

[crigby]

Hi,
I am afraid that I somewhat agree with the "%" answers. IE has a usable screen 1px smaller than it is supposed to. Navigator is 16px smaller. The way I do it is to only define the width of one side-by-side element so that the other scales. It is possible to write separate stylesheets and detect resolution(which many gaming sites do!) Many of those detect plug-ins but fail to detect OS, resources and versions; thereby causing browser crashes. I use a "test bed" machine with Win98SE, IE6, and Flash9 to test sites. Many game sites crash. Also, Burger King, TJ Maxx and a few others are not written well enough to not crash!
You might look at:
The JavaScript Source: CSS Scripts
For some that switch stylesheets, and:
Clagnut is Richard Rutter
For other ideas. I hpe that last one was correct, if not try ".co.uk" at the end of the address.
Peace,
Clarke
PS Forgot to mention the use of z-index to control overlap

[hockey97]

Well thanks for the replies. I am aware of z-index. I use it.

If you want to see my site and see what happens I finally got my server working.

I will put a password and user name to be TEST where you can access the page where java loads.

If that helps any...


The website is CHILLENVILLEN.COM

Give any tips replaies. I used javascript on the home page. You will see a image when you put your mouse over the image you will get a blank box that is blue to appear. I am not finished with the website but that blue box is where the menu to change the image and other image options would be at.

Post back here for feedback and any improvements I would need to do. I am sure you can see the css coding.

Try using IE and Firefox. Firefox is what I used to build my website I heard that Firefox handels css right.

Acorrding to the standared render.

[Artem]

Server down.

I rarely use z-index, I believe it doesn't really help, some browsers just ignore that.

Overlapping might also be a problem of lack of float. When you float elements, make sure the float is determined for every element, and widths and heights correspond to prevent overlap.

[crigby]

Hi,
Must still be server problems. Found server, but no page. I can check it in IE6, Firefox2, Opera9 and several versions of legacy browsers.
Peace,
Clarke
PS Will save the email and try again.

[hockey97]

No, I don't have server problems.

IT'S CHILLENVILLEN.COM

You don't need to register. When you click on the HOME text link it will take you to a login page.

Type in this : UserName:TEST

Password: TEST

All caps.

And it will log you in. Then put your mouse over the image that has a wooden frame around it.

It should fade in a blue box. The blue box is supposed to be a menu but yet not finished.


This home page uses javascript to fade in the blue box.


I don't have my server on 24/7. I usually have it on between 12:00pm to 1:00am.

Eastern standard time. EST

If earily then that or later then that. You won't see a page. You will get a error or the hosting service of my domain name page saying the domain is parked.

[retsoksirhc]

I doesn't see a doctype declaration on your sourcecode. You'll want to read up on doctypes and IE's 'quirks' mode. (These will help)
Activating Browser Modes with Doctype
Quirks mode - Wikipedia, the free encyclopedia

That should help your site be a lot closer in IE and Firefox, as both will follow the standards for what your code is supposed to make the page look like.

Personally, I wouldn't JUST use images to create the layout of your site. It can use a lot of bandwidth, which there's really no need to do. One trick to cut down bandwidth usage, if you plan on making this into a big site, is to make an image for the corners of that little background on the top menu. Then use a span to create the menu, and the only images you need are small ones for the rounded ends... the middle you can just set the background color to the same color as the images. It displays the same, but instead of sending one big image, you're sending two smaller ones.

If you still want to have gradient backgrounds, another trick is to use an image that's a single pixel wide, but have it fade from one color to another going down. If you set it as a background, and turn the background repeat on, the whole thing will be gradient, but you'll be using a small fraction of the bandwidth.

Finally, I would use Div's to load the actual content onto the page. One for each section you're going to have. Div's were basically made to replace tables, for rendering the layout of a page. They're basically just containers, you can position them where you want, and then put your content inside them.

Hope some of that helps you now, or in the future :)

[hockey97]

Thanks for the info. I do have doctypes.

I am using php and having html code inside the php files.

What should I do? I do have the doctypes listed but I guess it's not done properly or something. I will take a look at the codes.

[crigby]

Hi,
Yes it looks okay in FireFox2. Your tranparency on the top graphic does not work in Opera9. And, it does look like crap in IE6.
You need to define height and width for your graphics and see if that helps. I see you have a PNG fix JS; for IE?
Peace,
Clarke

[retsoksirhc]

The doctypes are almost there. They should go before the <html> tag, not after :) But it looks like they're correct

If you copy and paste the source of what's generated in the browser, into here:
The W3C Markup Validation Service

It will tell you what errors browsers can have rendering your HTML code that is output to the browser. If you correct all the errors on there, it will render more closely to the same in most browsers.

[crigby]

Hi,
I saw the DocTypes just fine in source on IE. I did not check in others as I pull up one of two editors for that with IE. I do have a problem with not declaring sizes of graphics. The "alt" was there. Why not the size? If you want I will do a "Save As" and it will "pull down" the rest?!
I still think there is also a problem with that JS. Who does it correct for? Tried "commenting it" out? I do it all the time for base href!
Peace,
Clarke

[hockey97]

I would like this thread to be closed now.

It's too old.

Would a mod close this thread please.