5 Replies Latest reply on Mar 31, 2010 9:01 PM by thersher

    Still practicing my CSS layout, and IE 7 issues.

    thersher Level 1

      I've revamped my site, and I've been practicing with the last 4 sites or so with mostly CSS layout....definitely a work in progress. My site is the first I've tried with overlapping images and the whole z-index thing. Everything looks great, for the most part. My issue is ALWAYS ie7, and then my issue is monitors with lower screen resolution. My sticky notes are showing up at the top of the page in IE7, looks great in 8. Every other browser seems to look great as well, as long as the resolution of the monitor is higher. I'm hoping someone can help me with positioning my sticky notes, so they don't shove my flash out to the right side of the page. Here's the URL www.theresasheridan.com.

       

      Another site with another IE 7 issue....www.viewcamera.com. Here the issue is that the image in the maincontent div is shoved way down the page. I want to keep my width at 450 px so that I can have my side borders. Anyone have any other suggestions for me pretty please?

       

      Last IE 7 issue (thanks so much), www.losvaquerosridingclub.org. The background color is white under the spry menu, but again...only in IE7.

       

      Thank you!!

        • 1. Re: Still practicing my CSS layout, and IE 7 issues.
          martcol Level 4

          Site one, you could help yourself by working through the validator I also think that positioning the sticky notes could be better achieved by placing them inside your content in the HTMLand using position absolute.

           

          Site two, looks like a case of "float drop."  Whatever width you want your main content, I think you have two much width for a containing element.

           

          Site three, when I look in IE7 using IE Tester, I don't see a white background to your navigation.

           

          Martin

          • 2. Re: Still practicing my CSS layout, and IE 7 issues.
            thersher Level 1

            Thank you for the tip about the validator....there is quite a lot in there that I don't understand. Some of the errors are in the scripts that I've copied and pasted from folks like paypal and linked in, and I'm not wanting to change their code, since everything seems to be working with those.

             

            If I place my sticky notes inside my html content, would I just make the div wider so that everything fits in without crowding?

             

            In site two, I want the main content width to be 450 px. What do you mean I have too much width for a containing element? I'm not understanding that. The image inside is only 410px.

             

            Thanks for your help.

            • 3. Re: Still practicing my CSS layout, and IE 7 issues.
              martcol Level 4

              You are absolutely right about the validator.  Some of it is way beyond me too!

               

              However, it seems to indicate that you have some tag confusion going on there, usually that's about missing a closing element.  Fixing that is a good thing because it can screw your layout.  Another thing the validator points out is the omission of a few of your alt="" text.  That won't muck about with any layout issues but is worth adding if you have the time or inclination.  I'm afraid I don't have time to look right now but if I get the chance I'll have a go later.

               

              With your sticky notes, it struck me that you could use absolute positioning.  The trick there is to place those elements in to a containing element, set that element to position: relative and then absolutely position the sticky notes using px dimensions where you want them in the page.  At the moment, you are using floats on those two parts of the page but again, I haven't quite got the time to look in detail now.

               

              With the float drop thing and width, you would do well to Google "Box Model CSS" or something similar.  Width is not just the content width but also takes into account margin, border and padding.  When you add those up, the width may be too big for the containing element  width which will cause the content to "drop" or to be forced into a space that can accommodate it.  The other snag with the Box Model is that different Browsers handle it differently.  Sometimes what you need to do to create space in the page is to put padding on the nested element which constrains it's content without affecting the width of the container.

               

              I'm a bit of a novice myself at this and it sounds a lot to get your head around.  However there is a a logic to it and once you crack it, it gets easier.

               

              One other tip is to use FireFox browser and get the Firbug plug-in.  That lets you view the page in the browser and you can tweak your CSS "live" to get an idea of how things work together.  Once you have what you want you then turn to DW to make your edits.

               

              I hope that helps rather than misleads!  As I say, I'll try to look later on but in the mean time, an expert might drop by.

               

              And while I'm here, my feeling is that you might have done better to put each of your queries in different threads.  Sometimes, to see several questions in one hit is a bit daunting and I think people here tend to leave the longer questions a bit until they have time.

               

              Regards

               

              Martin

              • 4. Re: Still practicing my CSS layout, and IE 7 issues.
                martcol Level 4

                I meant to say that the validator can be helpful but a lot of people will draw the line at some problems it identifies.  I use it a lot because I like the reassurance but you will find code that works but doesn't validate.  I've learned that validated code isn't necessariy good code!

                 

                Here's a tutorial on positioning:

                 

                http://www.barelyfitz.com/screencast/html-training/css/positioning/

                 

                And here's a really quick and dirty attempt to show you how I think you can position those sticky notes:

                 

                http://www.martcol.co.uk/positionabs.html

                 

                I won't leave that up for long and as I say, it's quick and dirty and you ought to have a bit of a read up on that.

                 

                Martin

                • 5. Re: Still practicing my CSS layout, and IE 7 issues.
                  thersher Level 1

                  You are awesome! I reset the resolution on my monitor and the positioning for my website worked great! Still need to test in IE 7 tomorrow on another machine.

                   

                  I'm still working on the other fixes, but I just wanted to say thanks for the help! And you are NO novice!