www.photolatino.com/dev/

Hello guys!

My problem is mostly technical (CSS) than design, but any graphic suggestions are completely welcome :)

Ok, I'm designing this new stock images agency site for a Colombian company, and I have some mayor issues here, so if any other designers could give me a hand, I will appreciate it tons :)

1. CSS
AS you can see, in Firefox 1.0.x the website looks really good, but in Opera it has little misplacements like the picture, and in Explorer it's just a complete mess.

This is my second site designed entirely with CSS, so I'm just learning the tricks, but I know there are "hacks" for Explorer that I don't really know yet.

My future solution at this moment is to design a table-based page for Explorer/Opera, and through a script that reads the user-agent (which I don´t know yet how to do that), it will show the CSS based design or the table-based, but we all know that's not the right solution.

What can I do with my CSS to see this page correct in FF, EX and OP?

2. Horizontal and Vertical scrolls

I´m visualizing this page in a 800x600 resolution, so I get a horizontal scroll which I haven´t been able to remove.

This is my container id class:

I have been playing around with the margin, but once I touch that line, the page moves all the way to the left and stops being centered.

I also have some space at the bottom of the page which it's not needed. I have checked the HTML and there are no lose tags or anything that can cause that extra space at the bottom.

How can I remove the scrolls?

Thank you very much for your help guys.

www.photolatino.com/dev/

__________________
Ricardo Zea
Web Designer (X)HTML + CSS Certified by W3Schools

Hi there, just to start off, i have little expert knowledge, so my comments are soley based on what the average user sees!
You might want to look at the code surrounding the login area in, IE and Opera, its fine in FF but some of the code must be contradicting itself since its displaying in such a variety of ways.
The layout of the design is really clean, i like it a lot, very aesthetically pleasing.

Ok, now ive had a peek at the code... I dont understand why you have the catergory thing at the very end, it must go somewhere in the middle. The code seems very cluttered, maybe you could have a go at tidying it, then you may be able to spot some of the errors in it more easily.

Why dont any of the links work??? Is it just like a test run that your doing, would be interesting to see the rest of the content in the site, it has a lot of potential.

Craig

__________________
www.ecampsite.co.uk

my only suggestion is to play with the margin and padding numbers. Maybe the 'auto' setting is not working. Try a slightly smaller width I believe 768 is standard.

And a couple of CSS resources:
http://w3schools.com
http://glish.com/css/home.asp


Hope this helps,
NV

__________________
Blog | Web Consulting

Now that's going to be a really nice looking site!


re: scrolls & centering...

There's lots of ways to do these things, but I prefer to center the container left-right by setting "left:50%" and left-margin equal to "minus" one-half of width, something like this:

#container {position:absolute;
margin-top:0px;
margin-left:-400px;
top:0px;
left:50%;
width:800px;
height:600px;
padding:0;
background-color:#FFFFFF;
visibility:visible;}

If you're curious to see this implemented, here's something I've been playing with lately: K.B. Thomas, author of The Fabric of Desire.

IMHO, with a little perserverance you can overcome the IE / Opera problems without resorting to tables, and that's really the way to go.

Hey, I grinned when I saw where you positioned that header (i.e. "position: absolute; left:-10000px;")... Do you think that works better than simply "display:none;"?

http://www.photolatino.com/dev/

Hey guys, what's up! Hey, thanks for your very constructive comments :)

Ok, I have good news and not so good news.

GOOD NEWS

Content box centered
Ok, I finally got to center the content box in all three browsers, FF, IE and OP.

Thanks to nullvariable's reference to http://glish.com/css/home.asp, I saw how he worked it out, and did the same thing.

I also found out that my navigation under the moving pictures, was causing some problems too, so I had to fix that also.

This is my new code:

Also, thanks to ecampsite.co.uk by letting me see that the #categories id div was badly placed in the code, that is fixed too.

NOT SO GOOD NEWS

Horizontal scrolls
Well, the HS don't show up anymore on FF and IE, but OP still shows it, and in fact it shows a strange "srhinking" movement on the HS. Open up OP, but your resolution at 800x600 and you'll see.

Vertical scrolls
For some reason in OP the vertical length is perfect, but in FF and IE the strangest thing is happening: I have a big space INSIDE the content in Explorer, and in Firefox that big space is OUTSIDE the content... ¬¬.

Now, how could I fix that?

I´m going to try CJacobson's code and see how it works out.

Jaja, I imagined your face seeing my code there, but I knew that my code wasn't as "pro" as the one your suggesting now, but it worked for me... until I read this post :). Thanks a lot man (y).

ecampsite.co.uk, none of the links work yet because the site isn´t finished graphically, but I will be updating this forum to let you guys see what's behind the home page.

I´m putting a dark background color so that you can see more clearly how the content is placed and how that big space for vertical scroll looks like.

CJacobson, http://www.kb-thomas.com/ has horizontal scrolls at 800x600.

Yes, thanks for your advice CJacobson.

I am putting my URL at the top and bottom of my posts just for quick reference to my dev site, I don't intent to spam.

http://www.photolatino.com/dev/

__________________
Ricardo Zea
Web Designer (X)HTML + CSS Certified by W3Schools

Glad I could help.

The scroll-bars in Opera are quite entertaining! I loaded it up and found that it has something to do with the way you are doing the image scroll at the top. If I scroll all the way over to the right in Opera and watch, it will shrink until I can see part of the main body, and then it will jump back to the larger size. I don't generally suggest flash but in this case it might be easier to load a flash based version of this to eliminate the problem. I'm not sure if this is related to the space in both IE and FF but a careful look through your code didn't help me spot anything that just jumped out and said "I'm the problem" ;)

That said maybe this would be solved by changing up the way the image scrolls, I don't know.

Great job on the site btw I really like it!

NV

__________________
Blog | Web Consulting

Yes... because my background graphic is literally 800 pixels wide, not 768 (or whatever the magic number is).

I just use http://www.anybrowser.com/ScreenSizeTest.html to verify that the site looks okay at 800x600 and all meaningful content appears unobstructed...

The suggested centering technique works. Just tweak the numbers to "width:768px;", "margin-left:-384px;", etc.

I like that dark background.