CSS Scaling dilemma.

Ok, I've been working on a downloads page for my photography site. I finally figured out a way for it to work properly in IE, but all the other browsers I've tried it in haven't worked.

I believe the problem is the <div> I used along with putting the image in it at 100%. Instead of just filling the div completely, it fills the entire page in Opera, Firefox, Netscape, and Safari. If you want to see my desired outcome view my site in Explorer.

I uploaded the page as a demo to:
http://demo.beauregardphotography.com/

 

Have you stopped to consider that the crappiest browser gives you what you want, while three pretty good browsers don't?

IE will allow inline elements to have dimensions. Proper browsers won't. You made

div {
  display: inline;
  }

Code (markup):

Only a crappy browser would then allow you to set a size.

Never trust that IE got it right. If there's a rendering difference, assume Firefox et al is the correct version.

cheers,

gary

 

Well, I needed the inline feature to allow the main content of the page to scroll sideways instead of up and down.

I hunted for another way to do that, but couldn't find one.

I tried using "float: left;" but it doesn't allow the content to overflow and allow the scrolling. It just bunches everything together.

 

See inline-block gallery demo. Add the following to the stylesheet.

#gallery2 {
  white-space: nowrap;
  overflow: auto;
  }

#gallery2 li {
  white-space: normal;
  }

Code (markup):

Study the methods, and integrate them into your page.

cheers,

gary

 

Wow, thanks. That worked perfectly.

Here's the updated edition:
http://demo.beauregardphotography.com/

Now, how can I make this IE compatible? I tried a bit of stuff from that link you wrote, but I'm unsure of how to make that work.

And, also I was wondering about Opera, because it seems to cut off two of the thumbnails.

 

I'll be able to look at it tomorrow (Monday) I think. I've done something similar, but not with inline block, and I had I think 3 containers. I took a good long look at apple.com/mac 's page and used that as an idea. I just floated stuff left in an inner container that was like a bazillion px wide inside another which was limited in height and width, which gives me a scrollbar.

 

Gary, btw, FF3 supports the full inline-block property.

 

Not tested.

Put a complete doctype (including the url) on the document. You're kicking IE into quirks mode where it's totally wonky.

Remove {overflow: hidden;} from body. I think that's what's doing Opera in.

@ Doc: Yeah, the display value will upgrade gracefully.

cheers,

gary

 

Ah, the doctype did change it, it's now tolerable in IE even though not preferable.

As for Opera, I took out the body's overflow property and it didn't change anything. It seems to cut off the content where the copyright information ends. I added some random characters to the copyright info and it cuts off in the middle of one thumbnail. Any other way to fix it without adding on to the copyright?

Thanks again for all the help.

And, again I updated the demo page:
http://demo.beauregardphotography.com/

 

I wonder if Opera needs a set width??

Gary's set-up might have the advantage of being width-agnostic (I don't know), but if you DO know the width, OR if you don't care if there's white space to the right when there aren't enough images (like the www.apple.com/mac page, I don't use Javascript so I can see the real scroll underneath and there's space to the right so they can add more products), then you could use this:

http://stommepoes.nl/Tests/slideshow.html

I can take the images off if you don't want this online, but robots won't index it and I can find dummy images instead as placeholders if you want...

I have two containers, one (#gallery) with a set height and width set to overflow: auto to generate scrollbars. The second one is inside (#innercontainer is a child of #gallery), positioned absolutely (dunno if I actually need this... haven't tried it without), set to a huge-ass width (apple's page has it at 4000px, but I've set this one only big enough for all the images currently present).

Inside #innerconatiner, the li's are floated (I never thought to use a list for this, that's a good idea) left and the copyright p clears the left. There are currently no width or height declarations for copyright p, and so far IE is okay with this but things might get goofy later if Haslayout becomes an issue. Red borders are to show the copyright p and the li's.

I did this on another page but there were only images, no text, so while I ended up floating them for better control, I could have left them naturally inline.

As a side note, you have alt text in one of your a's. A's don't get alt text.

As a second side note, I had copied the code from the original site first, and then changed the tabbing to my preference and removed the <BR>s... and was testing in all browsers when I found IE was acting like the p copyright should keep floating, and I was like, wuh? And it turned out there's a small error-- the closing ul tag is
<ul>
when it should be
</ul>
which might possibly be what Opera's problem was (though it ignored the error on my version.... strange).

 

De kat may have the nub of it. There are several syntax errors that could cause issues depending on how the browser guesses your intentions.

cheers,

gary

 

Wow, I'm amazed that it finally works.

Thank you guys so much. I've checked it in all current browsers and it's perfect.

By the way, that closing of the <ul> tag wasn't proper because I copied it from your site, Gary. On the Inline-Block Gallery Demo page you linked, that example at the top of the page has the one I copied.

Stomme, thanks for taking it in a different direction than I had, it worked wonders.

So, if you guys want to see the final product, I updated the page again:
http://demo.beauregardphotography.com/

 

Oh, and Gary, thanks for linking that Markup Validation page. Now everything passes validation.

 

Ack! Be careful of demo code shown as text. It doesn't get checked/validated as html, as it's #PCDATA (parsed text), so errors are possible. See the source, and you'll understand. Got it fixed now.

Glad you're good to go.

cheers,

gary

 

So Jason do you no longer need my code? I may keep the thing as a demo without the images, but otherwise I'll delete the whole thing if you're finished.

Gary, is the inline-block deal width-agnostic? The main shortcoming of my version is that the #inner needs a set width.

 

Unfortunately, IE breaks if a width is not set. See my demo. The modern browsers are ok without a set width.

cheers,

gary