Browser Dimension Issues

HTML & CSS
1

I just created a simple portfolio site (http://masonsklut.com). I can’t figure out the best way to make my site look like this instead of [URL=“http://imageshack.us/f/832/wrongq.png/”]this. I would like to style the site to work with any browser dimensions… Thanks in advance for any suggestions!

The stylesheet is located at http://masonsklut.com/style.css

2

I’m not sure of all the implications of this, but to make the layout more friendly and responsive, try removing the red lines below and modifying the last line as shown in blue:

#gallery {
[COLOR="#FF0000"][s]width: 999px;
position: absolute;
top: 0;
left: 450px;[/s][/COLOR]
margin: [COLOR="#0000CD"]30px 0 0 450px[/COLOR];
}
3

Thanks! I also noticed on the “contact” page that the colors are not rendering properly in IE.

The stylesheet for the contact form is http://masonsklut.com/contact/css/default.min.css

4

Which IE? I see you have some opacity in there and box shadows, which older versions of IE don’t understand.

5

IE 9…

6

It’s being caused by the filters you have in there for IE. My advice would be to get rid of them and never touch them again. They seem to cause all sorts f problems. for older IEs, you could use a transparent background image instead.

7

Thanks - that was the issue!

8

Do you have any suggestions for keeping the “view complete collection” link on the photo page (http://masonsklut.com/photo) visible when the browser dimensions are scaled?

9

It tays visible for me. What browser is it not working in?

10

In any browser, when the height of the browser window is scaled before the width, then the link is not visible… Any tricks on how to change that?

11

You might need to play with code for a “sticky fotter” to avoid that, although I’m not sure how it will play with the JavaScript on that page: