kaseytraeger Posted March 30, 2004 Posted March 30, 2004 Hi everyone, I need another set of eyes to look at this for me because I'm going cross-eyed. The web page in question is a small photo album (http://www.kaseyscreations.com/villagepantry/test-customers.htm). This photo album uses thumbnail images and is a fluid layout as described by Mark Newhouse in an article for A List Apart (http://www.alistapart.com/articles/practicalcss/). I'm also trying to implement the Fahrner Image Replacement technique to add a classier header to the page that simply says "Our Customers". Now, if you look at the page first in Internet Explorer 5+, the page looks basically as it should. Beneath each thumbnail image is a short caption. The caption is centered within the bounds of the image, and the caption text has a smaller font size than text in the paragraphs at the top of the page. If you look at the page in Firefox, Mozilla or Netscape, you'll notice that the page now differs from that in IE by the following: (1) The text is no longer centered beneath the thumbnail images. Instead, the text is left-justified. (2) The text's font size is no longer smaller than the standard font size (as used in the paragraphs at the top of the page). Instead, the text is now the same size as the text used in the paragraphs at the top of the page. One final problem that I can see immediately -- I need the header (the one that says "Our Customers") to be centered in the main content div. I've tried several different flavors of CSS properties, but can't get it to move away from that left-hand side and into the center of the page. Does anyone have any ideas on how to correct this? Please feel free to download any code you need to evaluate and analyze the problem. The files involved are: (1) test-headers.css -- a file containing information about the images used to create various headers (in this case, the header is very originally called "hdr-customers") (2) test-base_style.css -- the main CSS style sheet. The other style sheet (test-headers.css) is imported within test-base_style.css so as to filter it from older browsers. This is part of the Fahrner Image Replacement technique. (3) test-customers.htm -- the main html page. This page also has a few CSS properties that have been declared up in the <head> of the page. The "cascade" of style sheets looks like this: test-headers.css ---> test-base_style.css ---> test-customers.htm Does anyone see why (1) the header is not centered, and (2) why the thumbnail captions are different in IE as opposed to web browsers that are more correct in their implementation of CSS standards (e.g., Firefox, Mozilla, Netscape)? Thanks for looking at this for me. If you have any questions about the web page or the style sheets, feel free to give a shout out! I can be emailed at: kasey AT slac DOT stanford DOT edu. Quote
Wilexa Posted March 30, 2004 Posted March 30, 2004 kasey... It looks like you hang out at some of my favorite web sites! Thumbs Up Unfortunately, I don't have a magic bullet for you tonight. Everything looks OK to me at first glance, which just goes to show I don't know enough about CSS. I am using Safari on a Mac, and your page displays the same as you described for Firefox, et al: Left-justified captions at the default font size. This is probably the standards-based way of rendering the page. I have a vague idea (forgive me if I am wrong) that your problem might have to do with inheritance (the CSS, not yours ). I would suggest checking out the DOM tree to make sure all is as it should be. I know, not much help, but at least a little moral support. ...dave Quote
btrfld Posted March 30, 2004 Posted March 30, 2004 Hi Kasey. I think I've found your problems: 1) Centering the 'Our Customers' gif In the bottom of test-headers.css is /* Customer Photo Album Page *//*------------------------------*/ h1#hdr-customers{ background-image:url('header_customers.gif'); background-position: left;} If you change it to background-position: center; the gif moves over. 2) Thumbnail captions In the style block at the top of test-customers.htm, div.float{ float:left; padding:15px;} border:1px solid #000;} div.float p{ text-align:center; font-size:11px;} ... notice the extra right brace after 'padding:15px;' in div.float. The Gecko-based browsers must think the declaration is over, then see the second brace after the border rule, choke, and throw away the rest of the block. IE gets it wrong (what a surprise), and honors the succeeding rules regardless. Hope this helps. It's fun watching this site come together. Thanks for sharing your process with us; I for one am learning a lot from your journey. Jim Quote
kaseytraeger Posted March 30, 2004 Author Posted March 30, 2004 Jim, As usual, you have keen eyes that don't miss a thing!!! Thanks a bunch for spotting the errors in my ways! You know that point in time where you've looked at something over and over again, so many times in fact, that you can no longer see a difference between one version and the next? That's where I was. Even something so obvious as a two closure braces completely missed my scan! It's like missing a semi-colon in Java or C++. Your tips worked like a charm. The page now displays properly! Yaaaaay! Dave, What can I say?!? Great minds think alike (and visit the same web sites)! By the way, if you (shouting across the great TCH family forum "OR ANYONE ELSE OUT THERE") have any other neat CSS web sites, please feel free to share them. I like to regularly browse them and continue my CSS education. Thanks guys ... I certainly appreciate all your help!!!! Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.