Hey there. I've been working on my new design at 1440x900 resolution and everything has been looking great.

I just now switched over to 1024x768 to see how it looked (since most of my clients use that resolution) and I discovered a problem. The two items in the header - Site name and login box - are squished together.

The coder who coded the design used a lot of absolute/fixed positioning of the elements in the page, and I believe that's what's causing an issue here. I modified his coded end-product to make the header area extend to the edges of the screen. When I did this, the two elements were not in the right place.

To fix this, I used margins to push them where they needed to be (using px). This worked wonderfully for firefox and IE at 1440x900. But, like I said - As soon as I switched to 1024x768, they were messed up (they were too far toward the center)

So, I tried using % margins. For the most part, this worked very well. At both resolutions, in firefox, they looked very similar, and very good. But now, IE wasn't displaying them correctly.

So, can anyone take a look at http://thatscriptguy.com/newsite

I just want to know what I need to do to make those elements look good in 1024x768 in firefox and IE...

/still learning

Kevin

It really depends how you set up your other elements but you could position the misbehaving element absolutely.

Also, I'd recommend developing for the lowest common denominator then worry about larger resolutions as the number of people running at 1440x900 will be much lower.

This is what you do;

Create another div for the header, and center the div. Then place the contents of your header into this new box. In this case that would be the title and login box thing. Then, you use the relative position and align the contents of the header div using a percent based on the position of the header div.

See, right now it's set to be based on the position/size of the browser window. So if you created a new div that was a fixed width in the header and put all the stuff in there it would keep the header, content and footer aligned perfectly regardless of the browser windows/client resolution.

Don't forget the handy IE only style sheet option.

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="/styles/style_ie6+.css" />
<![endif]-->

Set the styles for the elements that are causing problems for IE separately from other browsers, allows you to get the designs looking the same.

You could always design a css layout for the lower resolution, one for larger res's and then use a bit of javascript to specify which one gets loaded at runtime.

But yeah, as xenvz says it is always best to design for lowest common denominator.