I have a custom font imported to this page using CSS: http://roundup.amebc.ca/
When Show Hotel List is clicked in Chrome, the custom font is ignored on the second line even though it is under the same heading and styling as the line above it (ex: Downtown and Harbourfront). I haven't been able to find anything that talks about this.
Add this to your css:
.hotel-list p {
font-family: 'Calibre-SemiBold';
}
Edit: This solution worked because if you view source or inspect one of the items in question on your page, you will see that they are all in fact wrapped in <p> tags.
Your <p> tag had not yet been styled to show the font you wanted so it was falling back to the font that was set on the <body>.
Hope this makes sense - see image below
Related
I'm trying to customize my disqus link colors which as you may know, inherit the link color from the wordpress theme. The problem is my current theme I think hasnt specified any main color so disqus inherit the default blue link color for all the links. This is my stylesheet: http://goo.gl/p8cA9
Could anyone tell me how I could specify a link color in the style sheet? I'm just beginning to learn css and when I add the a {color:purple;text-decoration:none} class it deforms the rest of the sites style.
Thank you
You need to be specific, look in the source code of your WP webpage (if you use chrome press f12 and then go to the elements tab, press the magnifying glass and select the A tag you want to style on the webpage).
With:
a {
color:purple;
text-decoration: none;
}
You are saying that all the a tags should be this color. You need to look where the a is located.
Example:
<div class="content">
<p class="scribble">
Lorem ipsum google
</p>
</div>
In the example above the way I would style this a tag would be.
p.scribble a {
color:purple;
text-decoration: none;
}
The "."-in the CSS selector refers to a class. So I am saying I want a tag in the p with class "scribble". Good luck with your adventures.
PS. If you are using chrome and you selected your element successfully you can also see the CSS selector it is responding to now (right window).
I have installed a plugin in wordpress that creates image thumbnails and displays links for all the subpages of a particular page. It is being displayed on the front page of this website.
The plugin is called AutoNav. More info here.
The plugin FAQ says the following about what classes are created to create the table:
table elements: subpages-table
tr elements: subpages-row
td elements: subpages-cell
p elements inside each td: subpages-text
Thumbnail images: subpages-image
Excerpt text: subpages-excerpt
My question is how I should go about formatting my CSS to change these settings. Should I just create classes with those names?
Lastly, the links that the plugin generates work on initial page load, but once the page completely loads, the links seem to stop working and just become text. Not sure what the issue is.
My question is how I should go about formatting my CSS to change these
settings. Should I just create classes with those names?
Yes. These are the classes the plugin generates and applies to the elements in the html.
For example if you wanted to add a border to the thumbnail images you would apply the styles to .subpage-image class.
.subpage-image {
border:1px solid #000;
}
Lastly, the links that the plugin generates work on initial page load,
but once the page completely loads, the links seem to stop working and
just become text. Not sure what the issue is.
This is being caused by your slider. Once it is fully loaded the div #slider overlays your content making the links unclickable.
To fix this give #slider height:280px;
HTML name#dmain.com works as normal in an MVC 3 View - except that the display is invisible - white text on a white background and if I mouse over it I see the e-mail address that's "displayed" isn't underlined.
So, I tried adapting George's answer at MailTo link in Razor to
`#helper EmailTextBox(string email, string title) {
#title
}
and
#EmailTextBox("name#domain.com", "name#domain.com") (both in a view)
and this also works - also generates an e-mail message with the e-mail address pre-populated like a normal HTML e-mail hyperlink - except that the display is still invisible - white text on a white background and if I mouse over it I see it also isn't underlined.
Applying a style to the containing tag doesn't work.
So, how can I apply a style to get the e-mail address to display (or is there perhaps some other method)?
Sounds like a css issue, try seeing what styles are applied to this tag (right click -> inspect element in Chrome, Firefox with the firebug extension, etc.)
You can always override the style being applied with something like
<style>
a {
color : black !important;
}
</style>
But it would be much better to find out what rule is causing the color in the first place.
EDIT
I have not worked with the razor view engine in MVC, always keep in mind that this is emitting html, anything you can do in html should be achivable. Make good use of Firebug or equivalent to view what html you are generating.
I would be very surprised if you could not do
`#helper EmailTextBox(string email, string title) {
<a class="email" href="mailto:#email">#title</a>
}
then
<style>
a.email {color:black;}
</style>
But it really sounds like you should make the rule turning links white much more narrow.
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }
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.