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 19

Thread: google vs ie

  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    google vs ie

    please look at www.txacom.net in Google and then IE. Google is perfect. IE puts a huge space before the text in the second column. What is making it do that? Thanks!!

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    different browsers render tags with different amount of default margins/paddings and font

    Code:
    * { margin: 0; padding: 0; }
    body { font: 13px Arial, Helvetica, sans-serif; line-height: 1.28; }
    the first part will set all tags with no margins and paddings
    the second part will make your font the same across all browsers

    Code:
    p            { font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height: 
                   1.5 em;margin-left:24px; margin-right:12px; margin-top:12px; margin-bottom:12px; }
    all I can really say is try to add this code to your css and see what happens. I think you should consider rewriting the site with cross browser compatibility in mind
    Last edited by Sammy12; 11-15-2011 at 04:05 AM.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would love to design it for cross-over browser support. I just don't know what the issue is so I can solve it. Here is my css code:

    body { font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height:
    1.5 em; margin-left:24; margin-right:12; margin-top:12; margin-bottom:12 }

    p { font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height:
    1.5 em;margin-left:24; margin-right:12; margin-top:12; margin-bottom:12 }

    h1 { font-family: Trebuchet MS; font-size: 1.5 em; color: #AA0F09; font-weight: bold;
    line-height: 1 em; margin-left:24; margin-right:12; margin-top:12; margin-bottom:12 }

    a:link { color: #000080 }

    a:hover { color: #AA0F09}

    a:visited { color: #AA0F09}

    li { list-style-type: square; font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height:
    1.5 em; margin-left:24; margin-right:12; margin-top:0; margin-bottom:0 }

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    if you have google chrome installed, right click on the website, then click "inspect element". everything with a yellow ! sign (and crossed out) are things that aren't rendered because they aren't correct.

    in this instance, you are missing px at the end of 12. (12px)
    1.5em <-- no space


  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can fix that. Why are the margins crossed out?

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK - figured out the margins - it was the px. But it still leaves the huge gap in IE.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I put the px after the 12 and 24 and removed the space before em, but google still crosses those lines out. By the way, Sammy, never knew about the inspect element - thanks!!

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I think I'm just going to redo this page.

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That would be cool to see!!

  • #10
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Elements are crossed out because they're more than likely overrode by another class or id's elements.

  • #11
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone know anyone who can teach me css in Dreamweaver. I have a basic, basic understanding, but as you can see, I need a lot of help.

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    2 hours spent, your welcome
    used float: left on side panel in case absolute failed

    unzip the file, make sure you're using either an apache server or website server, or it won't show up right

    download link:
    http://www.mediafire.com/?0z5wxmy9ea7byuw

    live view:
    http://testingserver135.pcriot.com/txacom/

    google chrome


    firefox


    opera


    ie7
    Last edited by Sammy12; 11-15-2011 at 07:00 AM.

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I would love to design it for cross-over browser support. I just don't know what the issue is so I can solve it.
    One thing that hasn't been mentioned is the fact that you NEED a valid doctype if you ever expect cross browser compliance. Presently, you dont have one.

    The validator will show you this and your other coding errors. Clean code is another good step to rendering your page correctly in all browsers.
    Teed

  • #14
    New Coder
    Join Date
    Nov 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So what's a valid doctype?

  • #15
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by askjacq View Post
    So what's a valid doctype?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    Teed


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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