Mind Boggling CSS error/problem, calling all professionals.

Hmmm… I saved the page source and the css and opened both in DW. Commented out the first copy of the .post-title-header rule. Saved the page, refreshed and previewed the page and it all looks as it did with both rules in the style sheet.

Why don’t you comment out the first rule, save and upload… then email me or post here and I’ll go take a look to see what’s going on in your actual site?

I’m happy to do that.
do the obvious-> dcaseyATsyncboxDOTcom

Ok, thanks a bunch for trying to help lol. I have it commented out now. So it’s still not showing up at all. =( And of course at this time, the validator site isn’t loading and stuff.. so I can’t check it again. :/

If you’d like, I’ll zip this up as it is and email you a copy of it. =) You’d be like the third person with a copy haha.

https://www.vindictivebastard.net/blog3/

spencerp

spencer, you are clearing browser cache and hard-refreshing after you make changes, right? Just checkin’….

vkaryl, yeah.. =0) I’ve had this problem for sometime now and spent the past week or so trying to figure this out, since Katie1 went in there to clean up the CSS and such. :/

It was all fine before, didn’t have to use that code twice before, and it had passed validation before as well. Both XHTML and CSS passed with flying colors..mmm.

spencerp

syncbox, sent you the email with the download link. =) Good luck with it..and I hope to get this fixed before possibly releasing it. =)

It also works and looks fine in IE6, IE7 BETA and FF. I have it so far to work with a plain jane Contact.php file, as well as the RyanDuff’s ContactForm Plugin. =) (Much thanks to Katie1 for doing that part of it as well.)

spencerp

Mmmm..maybe this is even too mind boggling for them as well lol. I’m just not sure what to do now. Either “possibly” release it as is, with that one CSS error and the problem.

Or just keep it for myself and deal with that problem, and or work at it on my own from time to time…Mmmm. :/ Kinda pisses me off though, was all fine before..no errors at all. :/

spencerp

if you still having problems with this, try this

#containername .post-title-header {
background:url(img/headertop.gif) top left repeat-x;
width:496px;
height:35px;
margin: 0 0 0.3em;
text-align: right;
padding: 0.5em 1em 0 1em;
color: #f0f0f0;
}
(where containername is the id of the div that contains this .post-title-header)

let me know if it works

Hi sadish, thanks for posting about this. =) I have tried this in the CSS file:

#containername .post-title-header {
background:url(img/headertop.gif) top left repeat-x;
width:496px;
height:35px;
margin: 0 0 0.3em;
text-align: right;
padding: 0.5em 1em 0 1em;
color: #f0f0f0;
}

And this together:

.post-title-header {
background:url(img/headertop.gif) top left repeat-x;
width:496px;
height:35px;
margin: 0 0 0.3em;
text-align: right;
padding: 0.5em 1em 0 1em;
color: #f0f0f0;
}

The image shows up, but the CSS error persists..and that’s even adding the id=”containername” to the <div>

Once I removed the second batch of code and left the first, the image went away…the CSS error is there.. I’m not sure what’s going on with it, but if you’d like, I’ll zip the latest of it now, and email ya the download link.. =) Maybe you can tinker with it lol.. =)

spencerp

I’m going to go out on a limb here and offer a suggestion. It’ll seem pointless and stupid, but it might just work.

Change:
.post-title-header {
background:url(img/headertop.gif) top left repeat-x;}

to:

.post-title-header {
background-image:url(“img/headertop.gif”);
background-repeat:repeat-x;}

Note the addition of “-image” to the “background”, and the quotes around the href tag. I also removed the “top left” call, simply because “top left” is already the default placement for images, and I’ve run across issues several times where IE doesn’t play nice with background positioning. Granted, it usually happens with CSS-based rollovers, but still, it may be a contributor here ??

Thanks doodlebee for trying to take a whack at it hehe.. I’m afraid that hasn’t worked either. =( I’m going to zip it all up once, and then maybe send you the download link via your contact page.. =) I’d really hate to even PRE-release it with such problems.. =(

Also the other problem is the search input fields and button don’t show great in Safari, but since I don’t have a Mac/Safari browser, I can’t do nothing with it.. =( Let me know if you’d like a copy of it to play with ok.. ?

spencerp

Sure send it. by the way, I have a Mac ??

Awesome! I already sent it..this will be great! =D I’m so happy now lol!

spencerp

Well! Thanks to Mark and his email that he sent to me with the fix, that CSS error is GONE! Thanks so much Mark! You’re awesome!!!! =) =D Much Props to you man!

Here is the email:

Mark wrote:
On the wordpress site, you have a post about a “mindboggling” CSS problem. I can’t get a registration going but your issue is about 10 lines before where
the error is. The line with /* Opera */ in it closes the comment for the whole block, leaving three lines of cruft that interfere with the parser reading the next CSS block. Thus, it thinks */#containername is all one “selector”… which is bad. Good Luck!

/*
form2 textarea {overflow:auto;}
form2 .hiddenfield {display:none;}
form2 .info {width:95%; padding-left:90px;}
form2 fieldset {border:0 solid;} /* Opera */
#contactform2 label {margin:0 15px 0 0;}
form2 {padding:6px 0;}
*/

I uncommented that out, removed the id=”” from the <div>
And just used the same code as before in the CSS file:
.post-title-header {
background:url(img/headertop.gif);
background-repeat:repeat-x;
width:496px;
height:35px;
margin: 0 0 0.3em;
text-align: right;
padding: 0.5em 1em 0 1em;
color: #f0f0f0;
}

And NO CSS ERRORS! WOOT WOOT WOOT!! Only thing that needs some tweaking yet, is the Search area and that 1px shift on the top background image behind the Post Title and Date in the Safari browser! =D

spencerp