Looks fine in Firefox, but messed up in Internet Explorer

[kyle246]

Hello everyone. I have navigation at the top right of my website [url removed by mod]

In Internet explorer, it is all jumbled up. The jumbled up part ONLY happens when I add a -30px top margin to it. Please help me.

Here is the css code for my navigation if you want it.

.qa-nav-main-link {
display:block;
background-color: #FFFFFF;
padding-top: 6px;
padding-bottom: 6px;
padding-right: 10px;
padding-left: 10px;
margin-top: -30px;
}

My website is in my signature.

Please help,
Thanks

[weegillis]

For best results, I recommend that you not change your core template CSS, which this looks like. A custom.css file is where to put all your changes, and then just make sure it loads after the core so it has higher specificity. If you've dialed in the template properties for the page segment in question, create (or edit) custom.css to hold your new properties. Use the exact same selectors. The higher specificity will cause your custom rules to overwrite the core.

In so doing, you are able to restore the stable core at any time, simply by clearing your custom sheet. Don't delete it, even if it's empty, or your call will return 404 and introduce avoidable latency. Tweak to your heart's content if you do things this way.

Are those your generated style attributes, "font-size: 12px; vertical-align: baseline;"? I don't see any inline styles anywhere else. Seems weird a developer would do something like this on an otherwise pristine layout. Again, I hope you're not tweaking core files without backing up. INCLUDE your own custom modules so as to protect and be able to restore the core without a complete re-upload. Always give yourself a recovery path.

As for the styles, one would need to know your reasoning but you should consider two things: 1. px is a non-scaling unit in some browsers; and, 2. vertical-align: baseline is the default, so the property declaration is redundant and unnecessary. Only if the vertical-align property has been set to something else higher in the cascade do we need to reset it to the default. Otherwise, it's an unneeded line of code.

[kyle246]

Thanks for your reply. Yes, I am editing the core template css to change the look of the website. And yes, I do have a backup of the original css.

I'm not really sure how I would create a custom.css because all of the content in the script is all linked towards the "core css."

For the "font-size: 12px; vertical-align: baseline," i couldn't find that code anywhere in my css. What part did you see that?

than

[weegillis]

The 'core CSS' I refer to is '/qa-theme/Default/qa-styles.css'. There are a couple of ways to merge in a custom style sheet.

1. Add another LINK tag to the header template. Already there is the main sheet:

		<link rel="stylesheet" type="text/css" href="./qa-theme/Default/qa-styles.css?1.4.1">

<!-- which can be accompanied by, -->

		<link rel="stylesheet" type="text/css" href="./qa-theme/Default/qa-custom.css">

Of course, your custom file would need to be where we say it is, in the "./qa-theme/Default/" folder.

One could just as easily create a "/qa-theme/Custom/" folder, and put your custom code in there for easy organization and audit. Remember, the idea of custom modules is to keep us away from the original code. The principle is that we always want to be able to back out of what we've done. With a custom folder, we can turn off our additional code with the flip of a switch.

The link tag has to be after the main CSS link in order to have higher specificity. The facebook link tag should be last (after yours) to prevent any conflicts..

2. Load your custom CSS from the link in the header template, and have that style sheet import the main sheet:

		<link rel="stylesheet" type="text/css" href="./qa-theme/Default/qa-custom.css">

And the CSS:

qa-custom.css

/* first line in the code */

@import "./qa-theme/Default/qa-styles.css?1.4.1";

/* custom CSS below */

The thing to keep in mind is that if you upgrade your theme to a newer version than the one referenced, you will have to edit this CSS file, not the header template.


As to the code not being in your style sheet, it wouldn't be there--it's inline somewhere in a body module template. A quick search of your local folder (Desktop Search or if you have it search site using Dreamweaver) for the text in question should turn up the php module(s) that contain(s) it.