View Full Version : Resolved Any ideas on these IE and Safari issues?

12-09-2010, 11:08 PM
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 (http://www.cineweekly.com/test/test.php) 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.

12-10-2010, 09:27 AM
The problem I think is coming from your html. You have, for instance:

<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>

<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).

12-10-2010, 09:34 AM
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.

12-10-2010, 09:44 AM
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.

12-10-2010, 09:52 AM
You should really have a look at the "why validation is good" link in my signature.

12-10-2010, 09:53 AM
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?

12-10-2010, 09:59 AM
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.

12-10-2010, 10:07 AM
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.

12-10-2010, 10:20 AM
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

12-10-2010, 10:31 AM
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.

12-10-2010, 10:43 AM
How about making your html like this:

<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 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.

and makeing the following amendments to your css.

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}

.dateB span{font-size:10px}

That seems to produce consistent results across FF, Safari/Chrome and IE.

12-10-2010, 10:44 AM
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.

12-10-2010, 10:52 AM
Yes, looks much better.

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

12-10-2010, 02:14 PM
How's it look to you guys now?

Wow, you've been busy! Looks much better.

12-10-2010, 10:15 PM
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.