Hello, I am working on a new site which integrates a header and footer with an existing php script that has its own design. The problem I encounter is that when I add the header to the existing script, some of the CSS definitions used in the header mess up the appearance of the script which has it's own CSS... I thought that including the script's own CSS only AFTER my header inclusion would have fixed that but I guess something lingers on... I even tried something like this, which I am not sure is correct/compliant: <html> <head> css for header here... </html> <body> header here... </body> <head> css for script here... </head> <body> script here... </body> </html> Code (markup): So I was wondering if there is a way to COMPLETELY remove/reset ANY and ALL CSS definitions with one command at one point in the document... It would be impossible for me to go through all the CSS files that are included and manually reset any definition, so I was wondering if there is a quicker way... I've even tried one of those Tripoli reset stylesheets (http://perishablepress.com/press/2008/03/23/more-killer-css-reset-styles/) but that also didn't work... Is there a CSS global reset command of sorts? Thanks
My suggestion to you, if possible is to include the header code in an iframe if possible. iframes don't inhertige styles from the parent page and will make the page complaint. As having more then 1 html, head or body tag in html is invalid.
Thanks GooganA, I've actually thought of that and have tried it... It solves that problem but I can't do it because the menu of the site is in the header and so when you click on a link there it just goes to that page within the iframe... not to mention it's a drop down menu and it doesn't drop over the bottom of the iFrame, you know?
You can't have it drop over the iframe, but to get around the problem of the links you just need the target attribute on the anchor tag. <a href="/page" target="_parent"> to go to refresh the whole page. But... other then that. I'm not sure I have another solution for your problem other then to change the styles in the css.
Ah just thought of something else. You could put a id on the body tag of the page you have. Example <body id="something"> then in your css you only have to put the id before all the styles on your site #something .className this will make it easier for you when your going thru all the css's
the problem is there is sooooooo much CSS that I would be going crazy... I really thought there would be an easy way to just reset/delete all previous CSS
You could try to reset the all the section's CSS like #header *{background:none; border:none; outline:none; padding: 0; marign:0 .....and so on}.
yeah that's the tripoli reset approach... problem with that is I would have to open all 10-12 stylesheets that are called by my header and the other script and copy and paste ALL the CSS definitions in a new CSS stylesheet and set everything to none/0 and then attach that stylesheet which would add a lot of code to the page slowing it down and which would not be upgrade-proof when the maker of the script updates its script or plugins
Do you have live preview/url of your site your working on ? i'm wondering why you need so much css to do it, and why you still need to reset. AFAIK there's no 'css command' to reset all things, thats why tripoli guys have to do that, even Eric Meyer would need more than just one line to reset the browser's css rendering defaults. I think if you comprehend the 'cascading' , inheritance, etc concept of css you wouldn't need to reset things in the middle of page.
I can't really give you a url because it is the admin section of a website that runs based on WordPress... Basically I have WordPress with a Theme (Suffusion) and then a bunch of plugins installed... As you might know Wordpress themes are only applied to the frontend, but not the backend, so because I wanted to brand the backend for my contributors I installed a plugin called WP Admin Themer which allows me to apply a theme to the backend. So basically in the backend I am pulling in the header and footer from the front end... The front end alone, without anything else, has at least 8 different external stylesheets (1 or 2 from WordPress, 3 from the theme, 3 from my own customization plus several inline CSS definitions from the plugins). The backend has only one but because I am pulling in the header from the frontend I now have almost 10 plus all the external ones from the plug ins of the backend... it's a mess ;-) wish I could simply but there's no way around this structure if you want to use WordPress and plugins/themes.
how about this, if you just need header and footer from the front end, wrap them on iframe. so that'll cut off like 8 css right ? does that make things easier ?
ah i see, sorry missed that out. what do you want to take from the header ? if it just the branding and not the menu ( i'm guessing that you'd have your own menu for admin ), how about create some other header for this purpose. ie. header-admin.php and just load what you need there, and load this on your iframe. same goes with footer.
Well I wanted to use the menu so that it'd be seamless and I also wanted to be able to grab the same header so that when I make changes to anything in the header they are reflected everywhere across the site and not only in some places... PS I just noticed from your signature that you are actually very familiar with this specific problem since you are a professional WP theme designer... You'll appreciate where I am coming from... I'd love to show you the design (it should be launched tomorrow) and if you are interested in seeing the problem I can make you a contributor account so you can log in the admin section and see it
Reset stylesheets have always worked for me. Otherwise as someone has already pointed out you could do something like this. Have a body tag of the page <body id="xyz"> and reference the elments in ur code with the id .