Page in question: http://secantmedical.com/biomedical-textiles/biomedical-textiles.php
The heading area with the words "Biomedical Textiles" is set very simply with a CSS class that mirrors the page name, in this instance the class is "biomedical-textiles". Other examples include "medical-applications", "design-and-development", etc. You get the gist.
Exclusively in IE6, every main page after Biomedical Textiles has a blank heading area. The dimensions are kept in place, but the background is not being applied. The same is true for all subpages. The first child of Biomedical Textiles, Textile Science, has the header applied correctly and all other subpages have a blank heading area.
I can vouch simply by viewing the source that the classes are being applied correctly; couple that with the fact that the headings appear fine in every other browser. In the CSS file, the classes that are working appear first in their respective groups. When I swap one of the later ones to the top, that one works and every proceeding one does not. I have no idea why this is. Any assistance would be greatly appreciated.
The CSS in question is on lines 83-123 of style.css. Thanks in advance!
The way you have your selector written in your CSS written for those bg images, ie6 doesn't recognize it. You have it written:
#l2-header.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }
It doesn't recognize the id.class. If you aren't using the class anywhere else just use the class without the id in front of it. Just use:
.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }
That should fix it.
Related
this is my first question here, hope I am doing this right :)
I am trying to change the colours of the calendar on this page:
https://realsailing3.vanbruben.de/dehler-41-shelter.
But the classes are as long as
.monthly-fluid .ext_month_day_nox, .monthly-fluid .ext_month_day_nox_r, .ext_month_day_nox.morning_occ_nox
or
ext_month_day_nox no_start nocuscol
or
.monthly-fluid .cur_month_day_nox.arrival_day
I have tried to separate them with a dot but i get the message "dont use adjoining classes"
Any idea of how I can change these colours?
Thank you very much!!
code picture
try to add !important with that property.
.monthly-fluid td.reserved_nox {
background-color: #f0c2c2 !important;
}
It shouldn't matter how long the classes are. If you've used an email client such as Outlook before, classes act the same way as tags do in Outlook. You can "categorize" each element as cur_month_day_nox or no_start or nocuscol, or any combination of them. Then when the element is styled using CSS, the file will describe how elements will appear based on their categorizations. Each description is called a "rule."
We want to look for a rule which modifies the background-color, since our objective is to change it the color of the day. While the element is selected in the Inspector, If you look on the right pane called Styles and scroll enough, you'll find the following CSS rule:
.monthly-fluid .cur_month_day_nox {
background-color: #c2dfd0;
}
This style "selects" any elements which have the class .cur_month_day_nox, which is all the green days with the exception of today (at the time of writing, that's February 1st). So, you can double click the color value and change it. You should see all the green days change instantly.
Edit: For a weird reason, the class names are different on your end, but regardless the approach is the same.
I am trying to style my website at mathbymiles.com and I am trying to color some social media link SVG icons in the footer of the website. I used the following code to change the colors to orange:
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
So this gave me this desired result:
HOWEVER, other instances of these svg icons are now orange, too like here, which is undesired:
How can I fix this?
Probably your question does not directly point to a problem. In fact, you need to guess the problem you are experiencing in order to find the problem. People may therefore see it as a question of poor quality.
If we come to the answer to the question,
svg.fa.d-icon.d-icon-fab-facebook.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-twitter.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-patreon.svg-icon.svg-string, svg.fa.d-icon.d-icon-fab-quora.svg-icon.svg-string {
color: #FF6C00;
}
The CSS code you wrote above includes features that predominate by nature to include other icons. See Class Selectors.
Let's rewrite this to affect only the icons below,
.social a.social-link svg.svg-icon
{
color: #FF6C00 !important;
}
Thus, when there is a suitable match, we force it to be orange with "! Important". But if there is no match, we leave it to their natural state. Feel free to write if you have any problems.
Note: Delete the one you added and replace it with the new one above.
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
The design of the page should look like this:
http://www.ski.kommune.no/Skoler/Finstad/
Another css-file is loaded in this page, bringing some unwanted attribute of the css-tags, which makes the design undesirable, e.g. the text in the blue field is moved.
http://www.ski.kommune.no/Skoler/Finstad/Praktisk-informasjon/Test-av-bildegalleri/
Which css-tags are creating the design problem in the above example? I looked with Firebug, but I couldn't find.
What is the best way to restore the design?
The problem comes from 5th item in your main horizontal menu.
The list item there has a class="calendar".
according to browser developer tools that class is:
.skole .calendar, .skole .news-list {
overflow: hidden;
margin-bottom: 20px;
}
the problem there is margin bottom.
to solve the problem:
the best way is to separate the 2 classes and remove the margin-bottom from the calendar class.
a word of advice:
try learn how to use different browsers developer tools.
in my view the bests are chrome and firebug.
have fun!
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.