Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Text size/color issues in IE

    I was checking the browser compatibility of my code, and the text size and color isn't working correctly in IE, yet works wonderfully and perfectly in all other browsers. However, if I style it in the document instead of in the stylesheet, it seems to work, but that's messy code and I don't really want to do that. Also, the text that's not working is under a class, but I'm positive nothing is overwriting it (again, because it worked in all other browsers). Does anyone have any ideas about why IE wouldn't register it?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    hello rsrubinstein,
    So many "ideas about why IE wouldn't register it" that it's impossible to cover them all. We really need to see your page...a link to the test site is always best.

    My first best guess would be that your not using a DocType. See the links about DocTypes in my signature line below.

    Next guess would be an error in your code. See the links about validation in my signature line below.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    So my site is robinrubinstein.com/info.html (this is one of the pages that's having some difficulties).

    I'm using this doc type:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    This is the bit of code I'm having trouble with (that's on the site). The p3 and p2 aren't working:

    <div class="info">
    <p3>Hi, I’m Robin Rubinstein: <br />graphic designer, artist, and conceptualizer.
    </p3><br /><br />

    <p1>I discovered design through fine art and writing, and was fascinated with how design facilitates an understanding between image and content. As a recent graduate from The College of New Jersey, I am thrilled to be entering the realm of design, where I am excited to learn from others and contribute my ideas. Please click below to view my resume; I am happy to provide additional information upon request.
    </p1><br /> <br />

    <p2>E: rsrubinstein@gmail.com <br />
    P: 848.248.9399<br />
    <a href="http://www.linkedin.com/in/robinrubinstein">LinkedIn</a>
    <br /> <br />

    <a href="robinrubinstein.resume.pdf" target="_blank">View resume</a>
    </p2>
    </div>

    Thank you!!

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,229
    Thanks
    10
    Thanked 270 Times in 269 Posts
    Check the validation links that Excavator gave you. There's no such tags as p1, p2 or p3... You probably want to use <p> tags for all of them, and make a class for each type, eg: <p class="lead-in">Hi, I'm... </p>

    Dave

  • Users who have thanked tracknut for this post:

    rsrubinstein (11-28-2011)

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Dave,

    So while that did end up working...it messed with all the spacing between the different paragraphs. Adding a margin-bottom helps, but the margin spacing is just a little bit different in all the browsers. Is there a better solution to change the spacing between the paragraphs? Thanks!

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,229
    Thanks
    10
    Thanked 270 Times in 269 Posts
    Different browsers will have different default margin and padding amounts, so you're seeing a normal situation. Unless going to set all the margins explicitly, it's quite common to start off your css with:
    Code:
    * {margin:0;padding:0}
    which will zero the margins and padding on all tags. Now that will of course change the look of your site, but should make it view pretty much the same on all browsers (barring other issues). Then when you set the bottom margin to what you want, it should apply consistently without some browser adding in a top margin that you didn't expect.

    Dave

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hmm that didn't do it, but maybe I misunderstood you...was this what you meant?

    .project_header .sent1{
    font-size: 24px;
    line-height: 1;
    color:#52C5D7;
    margin: 0;
    padding: 0;
    margin-bottom: -12px;
    }

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,229
    Thanks
    10
    Thanked 270 Times in 269 Posts
    Like this:
    Code:
    * {margin:0;padding:0}    /* put this one at the top of the css file */
    
    .project_header .sent1{
    font-size: 24px;
    line-height: 1;
    color:#52C5D7;
    margin-bottom: -12px;
    }
    ...and, a negative margin on the bottom of your text? You sure that's what you want?

    Dave

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Nope, it didn't work. Yes, I'm sure I wanted the negative because I need the lines to be very close to each other. Any other ideas?

  • #10
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,229
    Thanks
    10
    Thanked 270 Times in 269 Posts
    Do you have the page up somewhere we can see it? And which browsers are you having trouble with?

    -12px will certainly be "very close" - they should overlap by 12 pixels. "0" margin should be touching.

    Dave

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by rsrubinstein View Post
    Nope, it didn't work. Yes, I'm sure I wanted the negative because I need the lines to be very close to each other. Any other ideas?
    Did you resolve the coding errors you have yet? You cant expect any code or styling to work with invalid code.

    I still see those <p1> and <p2> tags, as well as a missing </body> and </html> tags.
    Teed

  • #12
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Dave and Teedoff-

    I didn't resolve them yet. I'm working off of a copy because I didn't want to mess with the real thing. I'm working off of robinrubinstein.com/dp2.html now (I was having problems with this page, too.) Are you sure about the </body> and </html> tags? I think Firefox is showing the biggest difference. Thanks

  • #13
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,229
    Thanks
    10
    Thanked 270 Times in 269 Posts
    Ok, but you've moved from a page with 7 errors to a page with 83 errors. Going to be a bit more of a challenge.

    I'm not following you on the difference in Firefox. I'm looking at this new page in both FF and IE and they look pretty much the same to me.

    Dave

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by rsrubinstein View Post
    Hi Excavator,

    So my site is robinrubinstein.com/info.html (this is one of the pages that's having some difficulties).

    I'm using this doc type:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    This is the bit of code I'm having trouble with (that's on the site). The p3 and p2 aren't working:

    <div class="info">
    <p3>Hi, I’m Robin Rubinstein: <br />graphic designer, artist, and conceptualizer.
    </p3><br /><br />

    <p1>I discovered design through fine art and writing, and was fascinated with how design facilitates an understanding between image and content. As a recent graduate from The College of New Jersey, I am thrilled to be entering the realm of design, where I am excited to learn from others and contribute my ideas. Please click below to view my resume; I am happy to provide additional information upon request.
    </p1><br /> <br />

    <p2>E: rsrubinstein@gmail.com <br />
    P: 848.248.9399<br />
    <a href="http://www.linkedin.com/in/robinrubinstein">LinkedIn</a>
    <br /> <br />

    <a href="robinrubinstein.resume.pdf" target="_blank">View resume</a>
    </p2>
    </div>

    Thank you!!
    ok, lol you were specifically asking about styling the "<p3> and <p2>" section of code. The NEW page you just said you were working off of to avoid messing with your original doesn't even have that specific text and links on it.
    Teed

  • #15
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oh boyyy sorry about that. That page is now robinrubinstein.com/info2.html, and I'm also having trouble with robinrubinstein.com/dp2.html. Super sorry for the confusion. It was the same deal though, about the color and text size. Now it's the spacing that seems a bit strange. I mean, it's slight, but it's noticeable if you compare Safari, Firefox, and Chrome. It seems to be the worst in Firefox. The only way I could move the spacing to where I wanted was to use negative margins (which I'm confused about):

    .project_header .sent1{
    font-size: 24px;
    line-height: 1;
    color:#52C5D7;
    margin-bottom:-33px;

    }

    .project_header .sent2{
    font-size: 20px;
    color:#999999;
    margin-bottom: -15px;
    }

    .project_header .sent4{
    font-size: 11px;
    color:#666666;
    margin-bottom: -10px;
    }


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •