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 2006
    Posts
    5
    Member #
    14117
    Hey every, new here.

    Ok, so I finished designing my template. Looks alright and the code is straightforward - problem is that it shows differently between browsers. I do have one issue though, which is when you view my website in either Firefox or Opera. The padding I put in for the content area seems to be ignored and the text simply overflows. Is there any way to put that text into it's correct place without compromising the design?

    Thanks everyone.

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Could you provide a link or your markup/css for this perticular area?


  4. #3
    Junior Member
    Join Date
    Oct 2006
    Posts
    5
    Member #
    14117
    O yeah, my mistake. I originally had a different thread, there were no replies so I just changed this one - removing the link in the process. Anyhow, http://www.xerolide.com is my website.

  5. #4
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    take the first line out of your source code, it is causing IE to go into quarks mode.. then refresh your page, it should now look like what firefox and opera have, witch is correct ironically.

    Then change the width of you #body-content div to 581px.

    HTML Code:
    #body-content {
    ..
    ..
    width: 581px;
    }
    What is happening is IE 6 does not understand how to process a page properly if it is in querks mode. How to get it out is to make sure the VERY FIRST line of your page is a proper <DOCTYPE> decleration. What happens is IE will then misinterperate the box model. If you set a width it will make it that wide no matter how much padding you put in it.

    Instead what it should do is this.. in your case the total width of the element is not 611px, but 641px wich will give the illusion in most all other modern browsers that it is stretching to far. This is because you have padding on both sides of of the #body-content div of 15px causing it to stretch all the way to 641 (15+611+15 = 641). The way to counteract this is to take off the amount of padding you apply to the width to the total you want the div to be, in this case it is 581. (15+581+15 = 611).

    Look though your source code and make sure you dont have the same problem with other elements..

    TIP: Install the firefox web developer plugin. With it, you can automatcally put borders around certin elements and see exactly where they are extending to and if you have the problem elsewere, it will also allow you to edit your css directly though firefox and update instantly..

    As an alternative, you can also a thin border around your elements one at a time..

    HTML Code:
    #selector {
    ..
    ..
    border: 1px solid black;
    }
    It will allow you to visually see exacly how wide that element is but also take into account the border will add 2 pixles to the width of your element.. (1+15+581+15+1 = 613)


  6. #5
    Junior Member
    Join Date
    Oct 2006
    Posts
    5
    Member #
    14117
    That sure did the trick - I never knew comments could be so devastating. Thanks a lot, you have saved my life and introduced to me a very useful tool, one which would be great for web designing. I owe you.


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