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 5 of 5
  1. #1
    Junior Member
    Join Date
    Oct 2004
    Location
    Stillwater, OK
    Posts
    13
    Member #
    7960
    Hey guys (and girls),

    I'm relatively new to CSS and webstandards. I've tried to read a lot so I can be at least basically proficient with xhtml and style sheets, but I still cannot see what I am doing wrong on my webpage. I'm trying to get it revamped to help with a pretty specific job hunt. However, there are some problems I'm having with both FF and IE.

    http://www.willphillips.org/index2.html

    Internet Explorer: The right side (main) content gets shifted down to below the left side content.

    FireFox: The left column is too wide and bumps the right side content over about 10(ish) pixels.

    I'm sure the problem is pretty easy and I'm just looking over it. Also, I left the CSS within the page - perhaps that will be easier to reference for you.

    Thanks for any help / tips / suggestions.

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    whenever you're dealing with floats and padding, you need to fix it up with the box model hack. here's a good tutorial on it - http://www.sitepoint.com/forums/show...61&postcount=1

    basically, your css should look something like this

    Code:
    #left-area {
    	float: left;
    	width: 145px;
    	margin: 0px;
    	padding: 22px 8px 0px 17px;
    	background: url('bg-left.jpg') no-repeat;
    	font-size: 8.0pt;
    }
    
    * html #left-area {
      width: 170px;
      w/idth: 145px;
    }
    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
    Junior Member
    Join Date
    Oct 2004
    Location
    Stillwater, OK
    Posts
    13
    Member #
    7960
    Hey karinne,

    Thanks so much for the reply and the link to the box model hack information. I've heard the term tossed around a lot, but never have been able to get a good grasp on how to use it. Hopefully that should help.

    That helped fix the width problem I was having the FireFox, but I still hace the right side content bumped all the way down to below the left content in IE. Any suggestions?

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    ah sorry... i forgot to check that

    you're missing a float: left (or right) in your right-area id. remove the margin-left and add a float: left

    Code:
    #right-area {
      float: left;
      width:560px;
      margin-top: -13px;
      padding: 0px;
      background: url('bg-right.jpg') no-repeat;
    }
    see if that works
    [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

  6. #5
    Junior Member
    Join Date
    Oct 2004
    Location
    Stillwater, OK
    Posts
    13
    Member #
    7960
    That works perfectly! However, now I've run into the unexpected after effect of having the "right-area" being bumped down about 10ish pixels in FireFox but looking alright in IE.

    In the same vein as pains with IE and FireFox aligning, in FireFox, the right content text is to wide, and it doesn't seem to change when I adjust the width and/or padding. When the padding-right is added, then it throws everything off in IE.

    Bleh.

    I'm sorry to keep bugging you with questions, karinne; thanks so much for the help.


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 10:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com