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.
Results 1 to 15 of 15
  1. #1
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts

    Internet Explorer Any ideas on these IE and Safari issues?

    Please help me fix my site's CSS in IE and Safari. Everything is fine in IE, Safari, and FF except for the home page's news boxes. To see what it's supposed to look like, open in FF.

    HERE is the only test page at the moment.

    The CSS is here: http://www.cineweekly.com/core-style.css

    I don't even know where to begin but it's really only one of the news boxes that need fixed. They're just duplicated on the page. Thanks in advance.
    Last edited by cineweekly.com; 12-11-2010 at 03:22 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The problem I think is coming from your html. You have, for instance:

    Code:
    <a href="/saturday/101030.php">
    <p class="newsA"><span class="dateB"><center>Saturday<br>October 30<sup> th</sup> 2010<br><br/><font size="1">- Tomahawk</font></center>
    
    </span>
    <em><span class="newsTitle"><u>BEHIND-THE-SCENES</u></span>:</em><br>The world had no idea what classic horror was about to come <strong>ALIVE</strong>! sf sf rgerh rhehehteh ehehet sah fheeew ieihe iheeflk  iaflhef lhelfih </p></a>
    - a <p> nested within an <a> element, which is invalid. I suspect different browsers are parsing this invalid code differently. I suggest sorting this invalid code and also removing the deprecated <center> tags (and using css instead).

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cineweekly.com,
    I agree with SB65, a bit of tag soup going on there.

    Check in with the validators for help. 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

  • #4
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    If I can't have a <p> within an <a> how can I still get these very simple results? My site's design isn't that complicated at all.


    I've tried validating before but it just comes up as a never-ending cycle of nitpicks. I just test my site out on four different computers with different resolutions and browsers and it looks the same so I'm fine with that. It's a personal site and just for fun anyway. Not trying to impress coders (no offense). Thanks though.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You should really have a look at the "why validation is good" link in my signature.
    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

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by cineweekly.com View Post
    If I can't have a <p> within an <a> how can I still get these very simple results?
    How about putting the <a> within the <p> instead?

  • #7
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Putting the <a> in the <p> takes away the background and messes everything up. I tried it when I first started coding it and this was the only way that worked.

  • #8
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Excavator, even when I validate it gives a huge list of things that are wrong but those are my Amazon banner ads. As soon as one problem is fixed it creates 5 more. I'd rather my site look fine on all the computers I test on than cause my head to explode because someone out there is using an older version of Opera or something ridiculous like that.

    But I did read the article out of courtesy anyway.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Just use the validator to find your errors. You can fix the errors in your ads if you want but those aren't the ones that are affecting your layout.

    The errors like these are important enough they need fixed -
    Error Line 41, Column 6: end tag for "p" omitted, but OMITTAG NO was specified
    Error Line 102, Column 17: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
    Error Line 102, Column 99: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
    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

  • #10
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Thanks. I'm changing the <p> tags to classes with the same style info so that I can have the "<a> before the <p>" like before only without it being a <p>. Still not working entirely.

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    How about making your html like this:

    Code:
    <p class="newsA">
    <a href="/saturday/101030.php">
    <img class="test" border="0" src="../test/test.jpg" />
    <span class="dateB">
    Saturday<br>October 30<sup> th</sup> 2010<br><br/><span>- Tomahawk</span>
    </span>
    <span class="newsTitle">TITLE</span>:<br>Sample text repeated over and over and over. Nothing to see here but a test page that is of no use to you.
    </a>
    </p>
    and makeing the following amendments to your css.

    Code:
    p.newsA a{display:block;padding:0 8px;color:black;font-weight:normal;overflow:auto;font-size:15px!important;line-height:25px;
    }
    p.newsA a:hover{background-color:#FF6600}
    
    p.newsA{
    background-color:#E0E0E0;
    clear:none;
    color:#000000;
    font-weight:normal;
    padding:0
    }
    .dateB{text-align:center;width:135px}
    .dateB span{font-size:10px}
    .newsTitle{text-decoration:underline;font-style:italic;font-weight:bold}
    That seems to produce consistent results across FF, Safari/Chrome and IE.

  • #12
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    How's it look to you guys now? I think I have it fixed, maybe if I have the strength I'll clean up validation before I put the site up. I only need to do it once because after that I'm just adding text and image content, no new coding.




    EDIT: I'll look into your suggestion more in depth tomorrow, it's 5AM and haven't slept yet. Thanks for your help, the biggest change came when I took out the <p> and gave the same attributes to a class.
    Last edited by cineweekly.com; 12-10-2010 at 09:22 PM.

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, looks much better.

    IE7 is displaying scrollbars - to fix these add a width to .dateB of 135px or so.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by cineweekly.com View Post
    How's it look to you guys now?
    Wow, you've been busy! Looks much better.
    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

  • #15
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Haha, thanks, I definitely have been. I'm trying to figure out the best way to experiment with IE7 since I have IE8 installed and there is no scrollbar issue. I'm guessing it's a horizontal scrollbar since you suggest setting a width? My only concern is I want to keep the .dateB more fluid since it's such tiny section.

    It now looks the same in the latest versions of FF, IE, Safari, Chrome, and Opera.


  •  

    Posting Permissions

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