Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member
    Join Date
    Feb 2005
    Location
    Portland, Oregon
    Posts
    93
    Member #
    8959
    Hello again!

    I have successfully cleaned the HTML and CSS files and they all are valid XHTML 1.0 transitional said to be clean by W3C.

    Pretty much the last issue I have is between Firefox and IE. In Firefox everything is layouted out perfectly whenas in IE; you will notice that the right content information has been shifted down according depending how long the sidebar is. Go to www.ardia.org/sodapop/films.html in both browsers and you will understand what I am struggling with in fixing.

    It is basically in the content, leftcontent and rightcontent divís Ė I think or it may have something to do with the sidebar divís? I am clueless and has been struggling for so long now that I think I am not seeing anything anymore. I am hoping the extra eyes would catch what I am missing out.

    Again, thanks!
    -Ardia

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    I think this is where your problem lies:

    HTML Code:
    #leftcontent { /*holds sidebar*/
      margin-left: -15px;
      margin-top: 10px;
      width: 170px;
    }
    
    #rightcontent { /*holds content*/
      margin-left: 180px;
    }
    Try changing it to:
    HTML Code:
    #leftcontent { /*holds sidebar*/
      margin-left: -15px;
      margin-top: 10px;
      width: 170px;
      float: left; <------------------
    }
    
    #rightcontent { /*holds content*/
      float: right; <---------------------
      width: 525px; <-----------------
    }

    And this part here:
    HTML Code:
    <div id="content">
    <div id="logo"><img src="_images/bottle.jpg" alt="" /></div>
    <div id="leftcontent">
    <div id="sidebar">
    I would put that image (logo) as a background to your #leftcontent

    HTH
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Member
    Join Date
    Feb 2005
    Location
    Portland, Oregon
    Posts
    93
    Member #
    8959
    Wow, you are a genie Karinne! I did everything you suggested and that worked. Whew! Now problem as seen is in firefox now with the content div not being forced down when the text runs long. Could you assist me on that part as well? I am unsure how to do this, thanks!

    See http://www.ardia.org/sodapop/crew.html in to compare in FF and IE.

    AGAIN - Thanks!!!!
    -Carrie

  5. #4
    Member themayanlion's Avatar
    Join Date
    Mar 2005
    Posts
    40
    Member #
    9225
    i can't remember why, but for whatever reason, floated divs inside a container div do not extend that container div vertically to match the floated div's contents. the floated divs seem not to register as actual content.

    on thing you can do, is add a non breaking space "&nbsp;" with a "clear:both" css style right before the closing tag of the container div that is not stretching, so it gives it something to consider actual content.

    HTML Code:
    <div id="container">
         <div id="float">floated content</div>
         <div id="float">floated content</div>
         <div id="float">floated content</div>
         <div style="clear:both;">&nbsp;</div>
    </div>
    of course, that will give a measure of empty space at the bottom equal to whatever your font size on the page is.

    another thing to do is to add a paragraph or div tag with a non breaking space in it, and use CSS to make it the tiniest size possible

    here's the CSS

    HTML Code:
    .spacer {
         line-height:1px;
         font-size:1px;
         clear:both;
         margin:0;     /* in case you use a p tag */
         padding:0;    /* in case you use a p tag */
    }
    here's the HTML
    HTML Code:
    <div id="container">
         <div id="float">floated content</div>
         <div id="float">floated content</div>
         <div id="float">floated content</div>
         <p class="spacer">&nbsp;</p>
    </div>
    that's what i do anyway, there may be a better way out there, but this one works.

  6. #5
    Member
    Join Date
    Feb 2005
    Location
    Portland, Oregon
    Posts
    93
    Member #
    8959
    themayanlion - it was also suggested to do this: overflow:hidden to #content so that floated divs are enclosed. i tried this and it worked. just fyi so u know the easier way for next time.

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Thanks Carrie. So... did you fix your problem there? 'Cause I can't see a difference between the pages in FF and IE.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Member
    Join Date
    Feb 2005
    Location
    Portland, Oregon
    Posts
    93
    Member #
    8959
    Yes Karinne, the problem has been solved. Firefox and IE (PC) is looking just as I want it to.

    The very last thing i have to do is add a mac filter for IE 5 on Macs. So if you are a Mac user, things are a bit messed up still in the IE. I am going to worry about that later (will have to borrow a Mac somehow to work on it abit).

  9. #8
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Ah good stuff!

    Mac eh? I'm trying to get my husband to buy himself one for his music... So far it's not working :ermm:
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  10. #9
    Member
    Join Date
    Feb 2005
    Location
    Portland, Oregon
    Posts
    93
    Member #
    8959
    :cross-eyed: good luck!

    Quote Originally Posted by karinne
    Ah good stuff!

    Mac eh? I'm trying to get my husband to buy himself one for his music... So far it's not working :ermm:


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com