SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    works well in IE, falls apart in Firefox and NN

    Thanks for the input so far. I've gone back and made changes to my css and things are looking much better.

    problem though is that in IE it looks good, but when I open it in NN or Firefox, it falls apart. I spent all day trying to piece back a problem I created for myself and thought it was finally going well until I opened it in those browsers to view it. Ugh!

    Site is at:

    http://www.sitesbysarah.com/vj/index.htm

    code is at:

    http://www.sitesbysarah.com/vj/vj3_css.css


    On the following page (http://www.sitesbysarah.com/vj/past_streets.htm) I want the two images to sit side by side, not stacked on top of each other, but can't figure how to make it work. Have tried a couple things.

    On this page (http://www.sitesbysarah.com/vj/past_pre_eng_bldg.htm) the links on the left side of the container shift over a fraction and push the right border out a bit. Can't figure what's causing this either. Am down to scratching my head...


    My footers basically vanish in Firefox and NN.

    Any help would be appreciated. I know I've probably got some messed up code, but I just keep tinkering until things fall into place. Not scientific but seems to get me there for now until I get this css mastered :-).

    Sarahb

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get rid of height:2em; in the #footer part of your stylesheet. That should fix it - in Firefox when a box isn't "high" enough to contain something, the content inside simply spills out. IE ignores this, and expands to fit. In your stylesheet you have given #footer a height of 2em, which is equal to about 2cm. That's not enough to hold what's inside.
    POSTED WITH CARE BY JORDIE, WEBMISTRESS OF WWW.A-SPLODE.NET

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jordie,

    Thanks for the input. I'll change that right away and jot that info in my css book for future reference.

    Sarahb

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jordan, for future reference, should I just omit the "height" completely in the code, or is it important to keep the "height" code, but just make it larger.

    Thanks,
    Sarahb

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends. If it needs to have a height, then give it one, but make sure there's enough room for everything inside. Your footer could probably do without height and spacing etc. could be controlled with padding.
    POSTED WITH CARE BY JORDIE, WEBMISTRESS OF WWW.A-SPLODE.NET

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Minnesota
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem you're running into is that IE treats height like min-height. FF and NN actually do things right by setting a fixed size with height.

    You can use the child selector hack to fix that one, as IE doesn't understand it (it's very useful). Also, it validates, which is always nice.

    Code:
      /* For IE */
         div#container { height: 100px; }
      /* For FF & NN */
         body > div#container { min-height: 100px;}
    For the side-by-side image problem, your paragraph width is set to 270px and each image is 200px wide, so it's just breaking them up like a normal flow of text.

    What I recommend is changing :
    HTML Code:
      <div id="pastcolumn1">
         	<h1>Streets </h1>
         	<p>
     		<img class="floatleft" src="images/brickwall.gif" height="101" width="200" alt="brickwall"> <br class="clearboth">
     		<img class="floatleft" src="images/bricks_on_street.gif" height="100" width="200" alt="paved street">
         	</p>
         	<h2>Williamsburg - Iowa</h2>
         </div>
    into
    HTML Code:
        <h1>Streets </h1>
       <img class="floatleft" src="images/brickwall.gif" height="101" width="200" alt="brickwall"> <br class="clearboth">
         <img class="floatleft" src="images/bricks_on_street.gif" height="100" width="200" alt="paved street">
          <h2>Williamsburg - Iowa</h2>
    That way you're not restricted at all by the #pastcolumn1, and the images should sit the way you want them to.

    I hope that helps.

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I will make that change and see how it works. I appreciate the help.

    Im having a problem with my "past jobs" page:

    http://www.sitesbysarah.com/vj/past.htm
    http://www.sitesbysarah.com/vj/vj3_css.css (code is at bottom of page)

    I am having a problem with the navigation box on the right (this also occurs on the "past Jobs" sub pages that the links take you too. In IE it works the way I want it to, but in NN and Firefox I can't get the nav box to sit right. It moves out of place. I messed with it quite a bit yesterday, but can't quite figure out how to correct the problem. I will work on it today, but if anyone can help me out, it would sure save me a hunk of time.

    Thanks,
    Sarahb

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Darcy,

    I think I'm doing something wrong. Not sure I understand where you want me to place the min height code. Below is where I changed the code and it looks good in IE in that the page shrinks to accomodate the content. But in FF & NN the content won't stay in the container, it bleeds down below it.

    My code is below:




    /* CSS Document */
    html,body{/*html for FF Moz NS7 OP */
    text-align:center; /*IE 5 IE 5.5*/
    margin:0px;/* no margins body */
    padding:0px;/* no padding body */
    }


    body{
    min-height: 100px;
    background: url(images/bluegreen_background.gif);
    }

    div,p,a,span,h1{font-family: arial, verdana, helvetica, sans-serif;font-size: 11px;text-align: left;}

    #container {
    margin:0 auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
    width: 800px;
    height: 100px;
    min-height: 100px;
    background:#ffffff url(images/vj_bgd_800x600.gif) no-repeat;
    padding: 0 0 30px 0;
    }

    Thanks,
    Sarahb

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Minnesota
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for taking so long. I noticed you took care of a few things, awesome. Here's what you need to do.

    1. remove the float from #pastcolumn1. By including the float, your entire content is removed from the flow of the page and the #container won't extend. Doing this creates a problem with the nav, but that should be easy enough to fix by floating it to the right, and declaring it earlier in the html.

    2. Add bottom to your background declaration in #container.

    3. Add the line:
    body > #container { height: auto; min-height: 500px; }

    immediately after the #container declaration you've already got.

    That should fix things up for you.

  10. #10
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Darcy,

    Thanks for the help. I'm not sure I've done #2 correctly though. Here is how I added it to my code. Are you knocking your head against the desk yet What I did seems to put the body background into my container so I don't think I've done it correctly.

    #container {
    margin:0 auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
    width: 800px;
    height: 500px;
    bottom-background:#ffffff url(images/vj_bgd_800x600.gif) no-repeat;
    padding: 0 0 30px 0;
    }

    body > #container { height: auto; min-height: 500px; }

    I'm going to attempt to float the nav box to the right and resituate that.

    Thanks,
    Sarahb

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Minnesota
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, sorry, I meant make it:
    background:#ffffff url(images/vj_bgd_800x600.gif) bottom no-repeat;

  12. #12
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Iowa City, IA
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, it works great!

    Any idea why my navigation box floats down to the bottom of the page? My first guess is that it's being pushed down due to size issues, but when I look at the width's it seems like it should work.

    http://www.sitesbysarah.com/vj/past_pre_eng_bldg.htm
    http://www.sitesbysarah.com/vj/vj3_css.css

    Oh, oh, I just noticed something in IE. I changed my markup and now in ie the content boxes background image moves up so instead of seeing the construction workers heads on the right, I see their rear ends

    The background works fine in Firefox.

    Sarb

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Minnesota
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that if you move the declaration for those links above #pastcolumn1 in your html code and apply a float that should fix it properly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •