SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: CSS and Firefox

  1. #1
    SitePoint Enthusiast mdeluise's Avatar
    Join Date
    Oct 2003
    Location
    RI, USA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and Firefox

    Hello,

    I am new to CSS and I've created a page using Adobe Image Ready. I chose the CSS route instead of having it (Image Ready) create everything in tables. The problem I'm having in shown when viewed in Mozilla Firefox v 0.9.2 (see html link below). The text runs off the page. In I.E, it looks fine. I've given the link to the CSS file below so hopefully someone can tell me what I'm doing wrong. Should I not use Image Ready in the future? Does it write the CSS cleanly?

    Thank you for your help.
    mdeluise

    HTML: http://www.deluisedesigns.com/mike3/about/index.html
    CSS: http://www.deluisedesigns.com/mike3/index.css
    MDeLuise
    ------------------------------------------------------
    How do you get off of a non-stop flight?
    Steven Wright

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Looks fine in fireFox 1.0PR

  3. #3
    Romans 12:2 codyrockx's Avatar
    Join Date
    Jul 2003
    Location
    Newberg, Oregon
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks fine on this end of the island also, same settings
    Codyrobert.com - Designer and Developer

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The only thing I can see in direfox 0.9 is that one of the words is getting cut off in the main block of text. It seems that your border image is being placed on top.

    You should try and set those decorative border images into the backgrounds of elements anyway and not have them clutter up your html.

    For your main text and the right border you could do this.
    Code:
    div.md-about-body {
    position:absolute;
    left:156px;
    top:75px;
    width:602px;
    height:299px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    padding-top: 2px;
    padding-right: 25px;
    padding-bottom: 1px;
    padding-left: 2px;
    margin: 0px;
    overflow: auto;
    background:#04584B url(http://www.deluisedesigns.com/mike3/about/images/md_about_right.gif) repeat-y right top;
    }
    You can then completely remove the "md-about-right" styles and the associated div. This cuts about 10 lines of code in one swoop. You can also then reduce that border image to about 5pixels high and just let it repeat and save on bandwidth also.

    You could do similar things with your other images bearing in mind of course that you can only have one background image per element.

    You will also need to look into the broken box model of ie5 and ie5.5. as you have included padding/borders at the same times as specifying width (see the FAQ on the broken box model for a full explanation).

    I also note that you main text is a paragraph but you have separated each paragraph using 2 break tags. This is bad practice and a paragraph is either a paragraph or its not. You should finish each section of text with a closing </p>, the margins of which can be precisely controlled through your css.
    Hope that helps.

    Paul

  5. #5
    SitePoint Enthusiast mdeluise's Avatar
    Join Date
    Oct 2003
    Location
    RI, USA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    It sounds like I have much work ahead of me. I did change the <br>'s to <p>.

    I tried using the code you included in your reply, but I could not get the md_about_right.gif to go all the way to the right. I'll play around with it a little more tonight.

    Question: Would it be better, in the future, to not use ImageReady to generate the CSS?

    Thank you.

    mdeluise
    MDeLuise
    ------------------------------------------------------
    How do you get off of a non-stop flight?
    Steven Wright

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Question: Would it be better, in the future, to not use ImageReady to generate the CSS?
    I don't have any experience with image ready but I hand code all my css. I use DW as an editor and occasionally let it enter things like lists of fonts that saves me typing but as a general rule I find my coding is much more precise by hand.

    It also makes it easier to understand when you can get your hands dirty as you know what you have done and why you have done it (even if it doesn;t always work lol).

    Its ok to use css editors but they are just something else that gets in your way most of the time as far as I'm concerned.

    I had the code above working perfectly locally so it will work but you may have changed something since I posted. I did change some dimensions to make it all line up.

    If you still can't get it to work then post again and I'll take another look.

    Paul


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
  •