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
    Junior Member
    Join Date
    Oct 2004
    Location
    Stillwater, OK
    Posts
    13
    Member #
    7960
    Hey guys - as always thanks so much for helping out a completely ignorant css newbie such as myself. Things are finally looking great with my site, however I have two minor problems that are giving me headaches.

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

    In IE, everything looks fine and that will do for now as the majority of my visitors are not designers and unfortunately use IE out of ignorance until I pester them out of it.

    However, in FireFox I have a problem with the width of the right are'a content - for some reason it is too wide and any padding I set and/or increase doesn't seem to work. So I'm stuck with text that goes to the very edge of the area w/out leaving any whitespace.

    Also - as you will soon find out - my entire right side content (which includes my menu buttons) is bumped down about 10-15ish pixels too far. I can't particularly put my finger on what's wrong there.

    Thanks so much for your insights!

  2.  

  3. #2
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    I'm a little rusty on this issue but here goes...
    Standard compliant browsers for the most part such as FireFox, Opera, Netscape, Mozilla etc, include any padding as extra width. Reading up on the CSS Box Model will help you understand.

    Example

    Code:
    width: 560px;
    padding-right: 20px;
    Essentially renders as:

    Code:
    width: 580px;
    There're hacks available that will allow you to specify separate values for IE only or vice versa (I don't recommend this.)

    However, if you start using doctypes to prevent Internet Explorer from rendering in quirks mode this shouldn't be a problem as IE6+ now interprets it correctly. Personally I tend to bypass the whole problem by not using padding on any block level elements, only inline ones or elements that don't need a width, which I'll get onto in a second

    Another solution would be to define margins/padding for your <p>paragraphs</p> instead by using CSS as you don't actually need to specify a width for them relying on the text to wrap when required.

    I hope this helps.

    If I've fouled up any of the above somebody please jump in to correct me.

  4. #3
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Here's a great resource on visualizing how the box model renders...
    http://www.redmelon.net/tstme/box_model/
    Additionally, W3C's diagram: http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions

    Total block width = width + padding
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  5. #4
    Junior Member
    Join Date
    Oct 2004
    Location
    Stillwater, OK
    Posts
    13
    Member #
    7960
    Ok, great - that helps with the content width problem, but how is that affecting my right side content being positioned lower in Firefox than in IE? I don't think I even have any padding-top set there?

    Some help would be great!

    Thanks again.

  6. #5
    Senior Member Holy Promethium's Avatar
    Join Date
    Jan 2005
    Location
    Scotland
    Posts
    157
    Member #
    8707
    In your source code (html) the UL tag in which the links lie, you have id instead of class, class being used by all the other UL's, this may be the reason why when I used the web developer extension in Firefox, the UL wasnt getting outlined.

    EDIT: just pointing out, I could be completely wrong. There is someone else with a similar problem to yours in the "hows my site" section.

  7. #6
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Set a margin for your p tags, it looks like IE has a different margin height than Firefox to me - so it's lower in IE. Other than that, it looks identical.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  8. #7
    Junior Member
    Join Date
    Oct 2004
    Location
    Stillwater, OK
    Posts
    13
    Member #
    7960
    Quote Originally Posted by Brak
    Set a margin for your p tags, it looks like IE has a different margin height than Firefox to me - so it's lower in IE. Other than that, it looks identical.
    Ok, I set the margin / margin-top to 0 on my p tags, along with the relevant menu tags and am still having this problem.

    Once again, my site is located at http://www.willphillips.org/index2.html and I could sure use some help figuring out this menu spacing problem...

    Thanks!

  9. #8
    Junior Member
    Join Date
    Jan 2005
    Posts
    1
    Member #
    8787
    I think I figured it out.

    For Mozilla, Safari, etc, you have to have top tags in order for it to show up correctly. For example:

    Code:
    #div {
         top: -20px;
         margin-top: 15px;
         }
    I'm not exactly sure of your measurements, but once you find the right combonation of the two, it should look the same in IE, FF, Safari, etc.

    Good luck, buddy.

  10. #9
    Junior Member
    Join Date
    Oct 2004
    Location
    Stillwater, OK
    Posts
    13
    Member #
    7960
    Yeah that's it! Sweet - I don't know how you figured that one out, but I'm glad you did. It ended up taking this snippet in the right-menu div:

    Code:
        position: relative;
        top: -17px;
        margin-top: 17px;
    Now would any of you more professional types like to explain why in the world that works to me?


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