Logged Out
Create an Account
Login:
Password:

Forgot your password?
Site screwy on different resolutions....

Site screwy on different resolutions....
[Back to Index]  [Bottom of Thread]
Thread Tags
Primary: [General]
Secondary: None
We finally got the site looking the way we want it!

.....and it looks fine on my 1280x1024 res 19" monitor as well as my husband's 17" monitor (not sure on his res) but a few of our guildie's report the site looking horrible....I know one is using a 1600x1200 res....how can we make it look fine on all res's and monitors?

BTW there should be electricity along both sides all the way down....

Also...in IE only, I show no events captured in my countdown box...but in firefox it shows fine...what gives? Also in IE my menus and everything are no transparent like they are in firefox
Quote by Kimbelea
Also in IE my menus and everything are no transparent like they are in firefox


This problem may be because of my work blocking stuff....ignore this one, as it works fine at home on IE
I assume this is what you mean by "screwy" (that the electric bars aren't displaying on the sides when the screen gets big)?


This is because the background image itself is 1265 pixels wide. What you COULD do is break up the image into two (just the electric bars, say 150 pixels wide), and then make divs that stretch along the sides of the page.


Something like:

HTML:
<div id=electricleft></div>
<div id=electricright></div>


CSS:
#electricleft
{
	background-image:url(electricleft.jpg);
	background-repeat:repeat-y;
	right:0px;
	width:150px;
	position:absolute;
	height:100%;
}

#electricright
{
	background-image:url(electricright.jpg);
	background-repeat:repeat-y;
	right:0px;
	width:150px;
	position:absolute;
	height:100%;
}


--
It's all in the reflexes.
Duh! I'm such an idiot should've thought about doing that (hubby) Thanks I'll give it a try now!!!
So far no luck...but closer...
Quote by Kimbelea
So far no luck...but closer...


Well its working on the sides but its not repeating downwards....on the site...any ideas?

And how do we fix it on the html for the spash screen to behave the same way?

Also, some of the administrative files just up and diasappeared ?

You could also try using "position:fixed" isntead of "position:absolute"

Though, "fixed" acts like "absolute" in IE6 (and I think IE7 even)

For the splash screen, you'd do exactly the same thing.

What files just went missing? Right now, I'm looking at 5 files on your site.

--
It's all in the reflexes.
Fixed did it thanks =)

"Enter" and "Untitled" went missing...but it's ok, we reloaded them.

Working on splash now....
Quote by Kimbelea
Fixed did it thanks =)

"Enter" and "Untitled" went missing...but it's ok, we reloaded them.

Working on splash now....


I just viewed the site in Firefox and it's perfect!....but in IE the right electric is on top of the left....then the logo and site is down lower...it looks bad...

Man, IE is a pain...I still cant figure out why...in IE only, I show no events captured in my countdown box...but in firefox it shows fine.
I'm thinking i need to create some sort of <td> maybe ? i dunno.. I knew the logo in the middle of the screen was pushing down both side tables and the center area of the website.. i'm very much ok with that. however while on firefox both electric bands end up behind the side menus and to each side of the logo on IE its putting them in the same order they appear on the layout ? left band - right band - logo - rest of website. any ideas on how to fix that.. if anyone else also wants to take a look the website is http://durabilityzero.dkpsystem.com/
You should add something like this then, to the HTML, to fix it for IE.
<!--[if IE]>
<style type="text/css">
	#electricright,#electricleft{
		position:absolute !important;
	}
<![endif]--> 


that will at least prevent it from looking completely terrible in Ie (but it won't be as nice as Firefox).

--
It's all in the reflexes.
this thing is not cooperating with me at all.... correct me if i am wrong...
( A ) if i make 3 tables on the HTML one for each electric side and one for the logo it will push the actual website ( side menus and center area). So i cant do that.

( B ) If i make 3 tables on the HTML starting at the top and equal in height to the header logo ( and by some miracle it works) both them sidebars will end right where the side menus begin (for both IE and FF) so i will end up not having the electric side behind the side menus and the center area. So i shouldnt do that.

Now i dont know if this is even possible, but since nothing is working i am wondering 2 things....

#1 can i make IE not read the electric sides at all BUT have firefox do it ? i mean if i can do that then i might just go for that and do option ( B ) and have everyone see the electric sides on each side of the logo and have FF users see them behind the side menus as well.

2# Can you use a whole HTML as a background ? by this i mean.. say i go ahead and just write an HTML with 2 tables on it.. set the left electric side to be forced to the very left on the left table and set the right electric side to be forced to the very right of the right table. if that works and u can use it somehow wouldnt it force the electric sides to be on the very side no matter what res or size you see it on ?


Again sorry to be a pain in the butt ... im sure you are having as much fun with this as i am /sigh .. thanks again.
Also i found this coding on the web explaining how to stretch a background but to be honest i have no idea how to implement it on my site. but figured maybe someone reading this forum might have an idea.

Faking a Stretched Background

Until CSS 3 is accepted as a recommendation and user-agents catch up, in order to get a background image to stretch, we have to fake it.

The easiest way to fake a stretched background image is to stretch it across the entire page. Then you don't end up with extra space or have to worry that your text fits in the stretched area. Here's how to do it:

1. First, make sure that all browsers have a 100% height, 0 margin, and 0 padding on the html and body tags:

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>

2. Add the image you want as the background as the first element of the Web page, and give it the id of bg:

<body>
<img src="bgimage.jpg" alt="background image" id="bg" />
</body>

3. Position the background image so that it's fixed at the top left and is 100% wide and 100% in height. Add this to your style sheet:

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

4. Add all your content to the page inside of a division called "content". Add this below the image:

<div id="content">All your content here - including headers, paragraphs, etc.</div>

Note: it's interesting to look at your page now. The image should display stretched out, but your content is completely missing. Why? Because the background image is 100% in height, and the content division is after the image in the flow of the document - most browsers won't display it.
5. Position your content so that it's relative and has a z-index of 1. This will bring it above the background image in standards-compliant browsers. Add this to your style sheet:

#content {
position:relative;
z-index:1;
}

6. But you're not done. Internet Explorer 6 isn't standards compliant and still has some problems. There are many ways to hide the CSS from every browser but IE 6, but the easiest (and least dangerous) is to use conditional comments. Put the following after your style sheet:

...
</style>
<!--[if IE 6]>
<![endif]-->

7. Inside the comment, add another style sheet with some styles to get IE 6 to play nice:

<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
Aight so this sorta works
In FF it works great.. the 1 whole background image stretching to fit any res and size.

In IE the background image works fine it stretches as well just like FF BUT lol the problem is that everything else is BELLOW the background not over it..

Ideas ??
Ok so how do we make it look right in IE?

It looks and behaves great in firefox...
I would do what I suggested above.



--
It's all in the reflexes.
Quote by Chops
I would do what I suggested above.



We did...and it didn't seem to work
Quote
We did...and it didn't seem to work


Alrighty. I was convinced it HAD to work, so I went and played around with it, and I got it to work. It doesn't break the site in IE, but the electric doesn't stay on the sides the whole way down in IE (at least IE7/8)

I should have specified that that change I recommended needed to go into the layout file (layout.html), rather than into the CSS.

--
It's all in the reflexes.


[Back to Index]  [Top of Thread]