35 Replies Latest reply on Feb 25, 2010 11:00 AM by blue_vision

    Experienced Critique Needed Please.

    blue_vision

      I'm hoping to get some critique on this homepage before I build others around it. Not really looking for design crits as much as the CSS/HTML coding. I'd like to squash any bugs and problems before I create multiple pages of them so please help me out and remember that I'm newer to this website coding as I've mostly just helped maintain pre-written code. Thanks!

       

      http://bluevisionweb.com/

       

      If you simply go to my /images folder then you will see a screenshot of my desired result as it appears in Safari to compare. I've only checked this site on Safari and FF on the mac so it may have alot of problems otherwise.

       

      My biggest concerns are not only decent css but also how it resizes when zoomed in/out in a browser or if text sizes change. I realize it can't be perfect and stay the same in that regard but I'd like to have it be the best it can. I'm going to change px's to ems as I hear that can help but I wasn't sure if I should only resize the text px's or every px property I have to an em?

       

      I can tell from my Firefox the wifi logo appears in the wrong height. I can also tell in both browsers that when I resize the text only then the nav bar resizes to the left instead of the words staying centered. Any idea's on fixing those things would be nice.

       

      I'll go back through and reduce my image sizes once I'm past this stage so excuse the slow loading.

       

      Thanks and sorry for the yellow eye sore color but I don't have a choice...

        • 1. Re: Experienced Critique Needed Please.
          Nancy OShea Adobe Community Professional & MVP

          Thanks and sorry for the yellow eye sore color but I don't have a choice...

           

          LOL.

           

          My only problem with increased text size is in the top menu. But it's fixable.

           

          change this:

           

          #navcontainer {
          float: left;
          width: 100%;
          height: 26px;
          background-repeat: repeat-x;
          border-bottom: 1px solid #000;
          -o-box-shadow: 0px 1px 3px #333;
          -icab-box-shadow: 0px 1px 3px #333;
          -khtml-box-shadow: 0px 1px 3px #333;
          -moz-box-shadow: 0px 1px 3px #333;
          -webkit-box-shadow: 0px 1px 3px #333;
          box-shadow: 0px 1px 3px #333;
          }

           

          to this:

           

          #navcontainer {
          float: left;
          width: 100%;
          border-bottom: 1px solid #000;
          -o-box-shadow: 0px 1px 3px #333;
          -icab-box-shadow: 0px 1px 3px #333;
          -khtml-box-shadow: 0px 1px 3px #333;
          -moz-box-shadow: 0px 1px 3px #333;
          -webkit-box-shadow: 0px 1px 3px #333;
          box-shadow: 0px 1px 3px #333;
          background: #666 url(images/navbar2.jpg) repeat-x;
          }

           

          Remove height restrictions:

           

          #navcontainer a {
          height: 24px; /**take this out**/
          padding: 0.1em 1.0em;
          color: #e6e6e6 ;
          text-decoration: none;
          float: left;
          }


          And since we moved the background image back up to where it should be, you can take this out.

          .sm_gray_grad { }

           

          Looks good for me in Safari and Firefox on Win.

          For cross browser checking use Adobe Browser Labs and Browsershots.org

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: Experienced Critique Needed Please.
            blue_vision Level 1

            Awesome! Will do ASAP.

             

            You were the one who told me to use ems so should I change every px I have to an em, just text ones, or what is recommended?

             

            Did you notice the wifi thing bouncing around on text resizes in FF? Do you know a fix to that?

             

             

            Thanks Again!

            • 3. Re: Experienced Critique Needed Please.
              blue_vision Level 1

              ok, yet another problem : (

               

              I've found that on my macbook pro the gradient background shows fine. It's created by cropping a chunk out of the gradient in PS (being sure to get down to the solid primary color), then saving the image as a jpeg, reopening and using an eye dropper to be sure I get the exact primary color hex value for the background. Here is the code:

               

               

              body{
                   background-color: #fcef00;
                   font-family:Arial, Helvetica, sans-serif;
                   margin: 0;
                   background-image:url(images/gradient.jpg);
                   background-repeat: repeat-x;
              }
              
              Anyways, when I view the website on one of our brand new imacs then it shows exactly where my gradient image stops and the background color begins because the background color seems to be appearing alot brighter of yellow. I took a screenshot on the imac in hopes to be able to show what I'm talking about but when I sent the screenshot to my macbook pro it appears nothing is wrong with it.
              What am I doing wrong? Why the inconsistency?
              Thanks!

               

              (no idea what happened to my text above. Sorry it looks funky)

              • 4. Re: Experienced Critique Needed Please.
                JoeDaSilva Level 4

                What I've been doing lately to avoid just the problem you're having with the navigation is to use images instead of text, or more specifically both images and text. Look into CSS "sprite" navigation schemes. You basically set a class or ID on each LI and then move the text off-screen using text-indent, and then put a positioned image in it's place. Search engines and screen readers can still crawl the text, but you have perfect control of your navigation type.

                 

                Here's an example you can look at with Firebug: http://www.jabtech.net/

                 

                Some would argue that Google could be miffed about the text-indent trick, but in my opinion if you're showing the same text in the image thats in the LI, you're not breaking their stated guidelines.

                • 5. Re: Experienced Critique Needed Please.
                  blue_vision Level 1

                  Thanks alot Joey, I'll look more into that idea and fix my other crits once I get past this gradient hurdle as it's driving me nuts.

                   

                  I've attached an iphone picture of my screen to attempt to show what I'm seeing. The picture is obviously way darker then the site and doesn't pop quite as bad as looking at it live but it shows the problem. It's really quite potent outside the iphone picture. The problem is located exactly where my gradient image ends and the background color begins as if I have the wrong hex # for the background but I don't and it appears seamless at random browser/os/hardware.

                   

                  I went to work and checked out every computer I could and here was the results:

                   

                   

                  iMac

                   

                  Windows XP Firefox 2 shows good

                  Windows XP Internet Explorer 7 shows good

                  Windows XP Firefox 3 shows bad

                  Windows XP Internet Explorer 8 shows good

                  Windows XP Safari 4 shows bad

                   

                  iMac

                   

                  Leopard Firefox 2 shows good

                  Leopard Safari 3 shows bad

                  Leopard Firefox 3 shows bad

                  Leopard Safari 4 shows bad

                   

                   

                   

                  Macbook Pro

                   

                  Leopard Safari 3 shows good

                  Leopard Firefox 3 shows good

                  Leopard Safari 4 shows good

                   

                   

                   

                  Mac Pro

                   

                  Snow Leopard Safari 4 shows bad

                  Snow Leopard Firefox 3 shows bad

                   

                   

                   

                  Why the heck does the hardware seem to be affecting things? This gradient is extremely evident when it shows/doesn't show. My macbook pro displays everything seamless but in the same browsers, same OS on the imac/mac pro has a big problem.

                   

                  Is there any logic behind this? Work arounds? Thoughts?

                   

                  Thanks!

                  • 6. Re: Experienced Critique Needed Please.
                    blue_vision Level 1

                    ok, figured it out. I was saving my displays color profile in ps when I saved the jpeg image on accident.

                     

                    It's amazing how inconsistant browsers are....

                    • 7. Re: Experienced Critique Needed Please.
                      Ken Binney-GnPIX3 Level 4

                      Hi -

                       

                      PC FF shows footer links aligned to right... is that your intention?

                       

                      PC IE6 has right column dropped below main text. and footer is wonky too.

                       

                      See attached screen cap

                      • 8. Re: Experienced Critique Needed Please.
                        blue_vision Level 1

                        Nancy O.

                         

                        I made those changes but it still shrunk to the left (instead of shrinking centered) when I resized text only.

                         

                        I also had to re-add the height properties but this time I set them both to the size of the image at 26px. I was fine with removing them but when I did it chopped off the bottom 2 px of the nav bar?

                         

                        Any other ideas of how to get the nav bar text to shrink centered when resized?

                         

                        At the same time I am kind of questioning myself with this by not doing it with images instead since if somebody upsizes the text then the menu words to the right totally disappear. I'm not from a web background odviously so where is a balanced point to draw the line with that type of stuff? It would seem that images are a win/win if you can get SEO work arounds but at the same time its a lose/lose because I can't alter the website in 2 seconds because I'd have to make a new image. I realize you can do that fast but little things like that seem to add up to the versitility of the website if its a site that will be changed often.

                         

                        Advise? Opinions? Help....LOL.

                        • 9. Re: Experienced Critique Needed Please.
                          Nancy OShea Adobe Community Professional & MVP

                          I made those changes but it still shrunk to the left (instead of shrinking centered) when I resized text only. 

                          Smaller text is no big deal.  What matters most is how the page handles aggressively increased text sizes.   Don't sweat the small stuff.

                           

                          I also had to re-add the height properties but this time I set them both to the size of the image at 26px. I was fine with removing them but when I did it chopped off the bottom 2 px of the nav bar?

                          Height property is a restriction in all browsers except IE.  Test your pages in Firefox or Safari/Chrome.  Use CSS min-height if needed.

                           

                           

                          It would seem that images are a win/win if you can get SEO work arounds but at the same time its a lose/lose because I can't alter the website in 2 seconds because I'd have to make a new image.

                           

                          Images of text area a very bad idea for web accessibility reasons too.  Viewer cannot selectively increase text size on images without increasing the image size and that adds to distortion.  Use text links wherever possible.  Use min-height and a compatible gray background-color beneath the nav bar background-image.  It may not look pixel perfect to you, but it's web friendly. 

                           

                          Nancy O.

                          Alt-Web Design & Publishing

                          http://alt-web.com/

                          • 10. Re: Experienced Critique Needed Please.
                            osgood_ Level 8

                            blue_vision wrote:

                             

                            Nancy O.

                             

                            I made those changes but it still shrunk to the left (instead of shrinking centered) when I resized text only.

                             

                            I also had to re-add the height properties but this time I set them both to the size of the image at 26px. I was fine with removing them but when I did it chopped off the bottom 2 px of the nav bar?

                             

                            Any other ideas of how to get the nav bar text to shrink centered when resized?

                             

                            At the same time I am kind of questioning myself with this by not doing it with images instead since if somebody upsizes the text then the menu words to the right totally disappear. I'm not from a web background odviously so where is a balanced point to draw the line with that type of stuff? It would seem that images are a win/win if you can get SEO work arounds but at the same time its a lose/lose because I can't alter the website in 2 seconds because I'd have to make a new image. I realize you can do that fast but little things like that seem to add up to the versitility of the website if its a site that will be changed often.

                             

                            Advise? Opinions? Help....LOL.

                             

                            In my opnion, when choosing to use a horizontal text based menu, you should either:

                             

                            1) Design the page to leave space for the menu items to be enlarged by a few zoom sizes, without disappearing.

                             

                            2) Certain don't restrict their height. It's far better to have the end few links on another line than not visable at all.

                             

                            3) Think about using an elastic layout where widths are declared in ems to accommodate any zoom enlargement. Down size is this will cause a scroll bar after a couple of zooms.

                             

                            4) Use images. Give those images an alt description and search engines plus those using screen readers will still be able to navigate your site. There are far more advance techniques to combine images and text if you want to investigate further.

                             

                            There's a fine line and many differing opinions 'obsessions' about what is correct and what is not correct. Generally you should aim at the majority of your target audience and hopefully satisfy those needs of the minority, without compromising your visions of how you want a page to function.

                            • 11. Re: Experienced Critique Needed Please.
                              blue_vision Level 1

                              Thanks! I'm still thinking about alot of this.

                               

                               

                              Real quick, while I have attempted to fix some things I've screwed some others up browser compatability wise but in the mean time the design is just getting the best of me. I'm really happy with my content area's design but the whole background yellow gradient thing just sucks IMO. So I'm trying to get ideas on how to improve that.

                               

                              Here is the original way:

                               

                              http://bluevisionweb.com/index.html

                               

                              and here was another idea:

                               

                              http://bluevisionweb.com/index3.html

                               

                               

                              Do you like the original or the one with people better? When you look at the design then realize that the top banner will actually end up a rotating flash or java image and not just the static casino image (I just don't have the picts yet). The casino will actually be the second, third or fourth thing they see. Before that there will be local views of the mountains, the park itself, etc. The homepage will be the only one with the rotating images. The additional webpages will have static images of the related topic.

                               

                              Anyways, opinions? Kill the gradient all together? Get rid of the people? Got another idea for a background? Only reason I chose people at the time was because I felt the site was looking more corporate and less fun which should really be a primary focus.

                               

                               

                              Thanks!

                              • 12. Re: Experienced Critique Needed Please.
                                blue_vision Level 1

                                oh, while I fixing the bugs I'd say its best to view it with Safari. Firefox is probably the second closest to what it should look like although there are a few issues like the wifi placement...

                                • 13. Re: Experienced Critique Needed Please.
                                  blue_vision Level 1

                                  ok, still have to go back and fix a bunch of code but I'm working on a different layout but I can't for the life of me figure out how I can make that wifi logo stay on the bottom right of every page I create regardless of the size of the main content area that sizes auto. Only way I could think of was to have that right column always be the same height as the main content column and then I could position it at the bottom with a bottom-margin up a few pixels I think. I don't know if that would work or not but the ways I seen via google on making your columns always the same height seemed really complex so I'm hoping there is something easier that I'm not seeing...

                                   

                                  http://bluevisionweb.com/index.html

                                   

                                  Thanks for any ideas!

                                  • 14. Re: Experienced Critique Needed Please.
                                    blue_vision Level 1

                                    Nancy O.

                                     

                                    "Smaller text is no big deal.  What matters most is how the page handles aggressively increased text sizes.   Don't sweat the small stuff."

                                     

                                    It just seems that if I can make it so the text shrinks towards the center instead of to the left then my nav bar would still be safe from people upscaling the text a size or two without making it bleed over to the right or below. I've made changes as you stated about the height property and background color  to accommodate the upsizing but I still think it would be alot better if someone could tell me how to make it shrink towards the center as well.

                                     

                                     

                                    In regards to my other question I just posted about my wifi logo, maybe this will help explain what I'm talking about more?

                                     

                                    http://bluevisionweb.com/images/issue.png

                                     

                                    Thanks guys!

                                    • 15. Re: Experienced Critique Needed Please.
                                      osgood_ Level 8

                                      blue_vision wrote:

                                       

                                       

                                      In regards to my other question I just posted about my wifi logo, maybe this will help explain what I'm talking about more?

                                       

                                      http://bluevisionweb.com/images/issue.png

                                       

                                      Thanks guys!

                                       

                                      There's a few ways to do that. Experiment a bit and ses which one works best.

                                       

                                      Method 1. Use an absoluetly positioned layer inserted in the 'bottomcontent' <div>. You need to make the 'bottomcontent' <div> have a position of relative (as shown below).

                                       

                                       

                                      #bottomcontent {
                                          width: 815px;
                                          margin-left: auto;
                                          margin-right: auto;
                                          background-color: #FFF;
                                      position: relative;
                                      }

                                       

                                      Then insert the absolutely postioned 'wi_fi_logo' layer in the code as show below:

                                       

                                      <div id="bottomcontent">
                                      <div id="wi_fi_logo">wi fi</div>
                                      <div id="contact">

                                       

                                      Style it with some css:


                                      #wi_fi_logo {
                                      position: absolute;
                                      top: -80px;
                                      right: 28px;
                                      width: 90px;
                                      height: 50px;
                                      background-color:#FC0;
                                      }

                                       

                                       

                                      Method 2. Wrap your 'hometext' and 'right_column' <divs> in a wrapper <div> and then apply a background image (the wi-fi image) to the wrapper.

                                       

                                      Method 3. Apply the background image (the wi-fi image) to the exsiting 'maincontent' <div>.

                                       

                                      Any of the above will work, some maybe better than others.

                                      • 16. Re: Experienced Critique Needed Please.
                                        blue_vision Level 1

                                        Thanks! I'll experiment today with them!

                                         

                                        Any thoughts on this layout?
                                        (different background schemes)

                                         

                                        http://bluevisionweb.com/index2.html

                                         

                                        http://bluevisionweb.com/index4.html

                                         

                                        http://bluevisionweb.com/index5.html

                                         

                                        They should all work fine in Safari and FF. Haven't checked anything else yet. Anyways, do you prefer the original main content/background layout I posted earlier or something like this? Either-way is cool, I'm just experimenting and trying to gather opinions....

                                        • 17. Re: Experienced Critique Needed Please.
                                          JoeDaSilva Level 4

                                          You picked a really odd width for the design, 815px. If someone loads it in an 800x600 resolution they'll get scroll bars. If someone loads it in the much more popular 1024 to 1280+ range it's going to look super narrow. If you pumped it up to 960px (current optimal standard in my opinion) you could make your main navigation font several sizes bigger and convert them to images like I suggested earlier.

                                          • 18. Re: Experienced Critique Needed Please.
                                            blue_vision Level 1

                                            Well, I'm not a web expert so I don't want to get jumped on here but I myself completely ignore 800x600. I don't know anybody who uses it and it seems like coding a browser for IE5 or something.

                                             

                                            As for the other resolution, I made mine bigger then corporate koa.com which is alot more narrower. Alot of sites go with a design this narrow from what I've found, I actually thought mine was bigger then alot.

                                             

                                            I've decided against the image links because I've got penalized by google in the past with another site I did for hiding text behind images and I really don't want to go through that again. Plus, its not as easy to add or remove buttons on the fly.

                                             

                                            Thank you for your opinions though and I did take them into strong consideration.

                                            • 19. Re: Experienced Critique Needed Please.
                                              osgood_ Level 8

                                              blue_vision wrote:

                                               

                                              Thanks! I'll experiment today with them!

                                               

                                              Any thoughts on this layout?
                                              (different background schemes)

                                               

                                              http://bluevisionweb.com/index2.html

                                               

                                              http://bluevisionweb.com/index4.html

                                               

                                              http://bluevisionweb.com/index5.html

                                               

                                              They should all work fine in Safari and FF. Haven't checked anything else yet. Anyways, do you prefer the original main content/background layout I posted earlier or something like this? Either-way is cool, I'm just experimenting and trying to gather opinions....

                                               

                                              Personally I'd go with the very subtle grey scheme. The main information should be the focal point not the yellow background.

                                              • 20. Re: Experienced Critique Needed Please.
                                                blue_vision Level 1

                                                Thats kinda why I went with the gray idea (as well as the corporate site being that way). Only problem with it is that I was instructed to use yellow so its 50/50 if I'll get a pass on it.

                                                 

                                                So far I've got 3 persons opinions now (from forums). 1 for each background choice....LOL.

                                                 

                                                Thanks!

                                                • 21. Re: Experienced Critique Needed Please.
                                                  osgood_ Level 8

                                                  blue_vision wrote:

                                                   

                                                   

                                                  I've decided against the image links because I've got penalized by google in the past with another site I did for hiding text behind images and I really don't want to go through that again. Plus, its not as easy to add or remove buttons on the fly.

                                                   

                                                   

                                                   

                                                  Google wont penalise you for that. For one it has no idea what your code is being used for. It could be a photo gallery for all it knows.

                                                   

                                                  I don't know any resource which addreses definitively what Google will and won't penalise. Ok if you are constantly repeating multiples of words then it can probably work that one out. It can't work out why a layer has been hidden from view or for what reason you may have moved text out of view, a load of drop menus use this method.

                                                  • 22. Re: Experienced Critique Needed Please.
                                                    osgood_ Level 8

                                                    blue_vision wrote:

                                                     

                                                    Thats kinda why I went with the gray idea (as well as the corporate site being that way). Only problem with it is that I was instructed to use yellow so its 50/50 if I'll get a pass on it.

                                                     

                                                    Tell whoever said to use yellow:

                                                     

                                                    1) it looks cheap and tacky

                                                     

                                                    2) it distracts from the main information

                                                     

                                                    3) get an eyesight test

                                                     

                                                    4) if all of the above fail go with yellow but tell them it will cost more.

                                                    • 23. Re: Experienced Critique Needed Please.
                                                      blue_vision Level 1

                                                      Google Webmaster tools knocked me from a top position off the charts and I couldn't figure out why. After weeks of trying to figure it out it came down to the fact that I had text hidden behind a large image for SEO. Once I removed it google put me back on the charts and at the top (local top that is). I actually just moved the text FAR down on the page so it was off screen and you'd have to scroll down a ways to see it.

                                                       

                                                      Although I do understand that its used alot for nav menu's. Eitherway, ATM it's staying a text nav menu but hopefully someone will tell me how to get it so the text resized centered on the thing so it can handle another 2 increases in text sizes before making another row.

                                                       

                                                      As for the yellow, it's an eye sore as I said in the beginning of the thread but we are dealing with a corporation that has a large obsession with yellow so I can only do my best with it and let them decide... It's killing me though as I hate yellow!

                                                       

                                                      Thanks!

                                                      • 24. Re: Experienced Critique Needed Please.
                                                        JoeDaSilva Level 4

                                                        Your decision of course, but for arguments sake I'm not suggesting you replace the text with images that show anything different than the text-indented text. You could have been docked for what Google considers key-word stuffing.

                                                         

                                                        http://www.seomoz.org/blog/css-image-replacements-and-seo

                                                         

                                                        From Matt Cutts:

                                                         

                                                        We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that. We try hard to avoid throwing babies out with bathwater.
                                                        • 26. Re: Experienced Critique Needed Please.
                                                          osgood_ Level 8

                                                          blue_vision wrote:

                                                           

                                                          That link is 4 years old.

                                                           

                                                          http://www.google.com/support/webmasters/bin/answer.py?answer=66353

                                                           

                                                          Most of that is complete and utter garbage apart from the excessive keywords and hiding text coloured the same as the pages background.

                                                           

                                                          How on earth can a robot distinguish what the content in a hidden element is supposed to be for without penalising everything, only if it contains excessive keywords.

                                                           

                                                          If that were the case and Google penalised hidden text then it wouldn't allow concealed menus (of which there are millons of examples) which are hidden from view until activated by the user, tab panels of which many sites now use would be penalised as well as text is concealed in those.

                                                           

                                                          The geeks at Google talks bollocks. <noscript> tags which serve a legitimate purpose would also be penalised too. I've never heard such tripe. A bot is a bot, it can only follow repeatative patterns, not something which could be legitimate or not, only a human can decide that.

                                                          • 27. Re: Experienced Critique Needed Please.
                                                            blue_vision Level 1

                                                            ok, well lets not even worry about the nav bar being image based or SEO at the moment as I wouldn't convert them to images at this very moment regardless. That would be the last thing I do in the process since I'm not even sure what main links will be listed. Most likely I'll be changing them a few times so I don't want to bother creating buttons that will likely be changed. That decision can be handled at the end.

                                                             

                                                            Are there any other crits on the designs I posted?

                                                             

                                                            Thanks for all the input regardless guys! I'll consider all of it before the site goes live for sure!

                                                            • 28. Re: Experienced Critique Needed Please.
                                                              blue_vision Level 1

                                                              I seemed to run into this IE 6 Double Margin on Floats bug. I found online the fix is to either change the margins to padding or to simply add the inline property to each float.

                                                               

                                                              Is there any problems with doing the inline fix? Is there a way to make inline apply to all of my floats without having to add a line of code to each individual div?

                                                               

                                                              Thanks!

                                                              • 29. Re: Experienced Critique Needed Please.
                                                                blue_vision Level 1

                                                                Also, whats the favorite png fix for IE6?

                                                                • 30. Re: Experienced Critique Needed Please.
                                                                  blue_vision Level 1

                                                                  Well, I've still got to check out those wifi fixes but alas... I've got what I believe to be a web friendly version

                                                                   

                                                                  http://bluevisionweb.com/index4.html

                                                                   

                                                                  According to that awesome adobe browser labs and my own chromes I am looking good with:

                                                                   

                                                                  IE 8 XP - Perfect

                                                                   

                                                                  Firefox 2.0 XP - Perfect

                                                                   

                                                                  Firefox 3.0 XP - Perfect

                                                                   

                                                                  Firefox 3.5 XP - Perfect

                                                                   

                                                                  Firefox 2.0 Mac - Perfect

                                                                   

                                                                  Firefox 3.0 Mac - Perfect

                                                                   

                                                                  Firefox 3.5 Mac - Perfect

                                                                   

                                                                  Chrome 4.0 XP - Perfect

                                                                   

                                                                  Chrome Mac - Perfect

                                                                   

                                                                   

                                                                  and of course I have a couple problem children which are:

                                                                   

                                                                  IE 6 XP - Text under fishing image. Fishing Image Gaps.

                                                                   

                                                                  IE 7 XP - Text under fishing image.

                                                                  Chrome 3.0 XP - Large Gap.
                                                                  I'm hoping to get some ideas of how to fix any of the bad 3. IE6 and 7 are my biggest concerns but if you want to help with chrome then that would be great too.
                                                                  I've still got to shrink file sizes so sorry the pages load slow.
                                                                  Here is a couple screenshots of the issues in IE:
                                                                  Thanks!

                                                                  • 31. Re: Experienced Critique Needed Please.
                                                                    blue_vision Level 1

                                                                    alright. It came down to IE 6 not liking the image div's under 20px so I had to reslice in photoshop. That fixed the gaps.

                                                                     

                                                                    IE 6 and 7 didn't like large changes in width of those images so I had to reslice-reslice-reslice until I got it down smoother. That fixed most of it. Otherwise I had to reslice until I found a nice height as well so it didn't clip half lines.

                                                                     

                                                                    So anyways, as far as I can see that last link to index4 should be working across the board with the exception of a single letter in IE7 getting hidden and chrome 3 being out of whack. I'm calling those acceptable losses.

                                                                     

                                                                    What do you think? Does it appear correctly in your browsers?

                                                                    • 32. Re: Experienced Critique Needed Please.
                                                                      JoeDaSilva Level 4

                                                                      It looks fine in Firefox 3.6 Mac. However, don't you consider that a large amount of code for something so trivial?

                                                                      • 33. Re: Experienced Critique Needed Please.
                                                                        blue_vision Level 1

                                                                        Awesome, thanks for checking! Which thing is trivial? The image with text wrapping or coding for older browser compatibility?

                                                                         

                                                                        Either-way, I still need to go back through and group some of my divs and properties but since I'm new at CSS I found it easier to look at it in "expanded view" so-to-speak. I'll also go back through and continue adding comments within the code for simple understanding.

                                                                         

                                                                        I don't know whats "too much code" or not as I'm not a full time web developer or anything but it seems like if its compatible with browsers across the board, user friendly, understandable, and loads within a reasonable amount of time then its ok?

                                                                        • 34. Re: Experienced Critique Needed Please.
                                                                          blue_vision Level 1

                                                                          Guess I jumped the gun. I'm having a hopefully minor issue... Several seconds after the page fully loads (safari and prob others) then out of nowhere I get a large gap in my page:

                                                                           

                                                                          http://bluevisionweb.com/images/Picture%2084.png

                                                                           

                                                                          I've tried moving that free night image's left margin. I've tried clearing every float I can think of. i've tried everything and it just keeps poping up. Sometimes you have to leave your browser sit for a couple mins but sure enough when I return to the computer it goes from normal to the gap again right when I think I've fixed it : (

                                                                           

                                                                          Sometimes it helps it seems to take scolling up and down to get it to do it. Any ideas?

                                                                           

                                                                          thanks!

                                                                          • 35. Re: Experienced Critique Needed Please.
                                                                            blue_vision Level 1

                                                                            found the problem. good again but now in all browsers : )