Have a look at this picture
alt text http://www.abbeylegal.com/downloads/2009-04-01/web%20part%20top%20line.jpg
Does anyone know what css style is used for the line/border highlighted in red? I'm trying to over ride it in my custom style sheet but I’m not having any luck, so far I’ve tried overiding these different styles...
.ms-viewheadertr
.ms-vh2
.ms-vb
.ms-vb2
.ms-unselectedtitle
.ms-summarystandardbody
which is changing the display but not the border, it's enough to make you go mad!
Update:
.ms-WPHeader is indeed one of the css classes, however if you set the border-style to none there is still a line that appears; just a little thinner. I can use .ms-viewheadertr to completely remove the header but just can't seem remove this one line.
Why don't you use firefox & the firebug addon to work out which classes to override?
Are you using !importance to override the css classes?
I work intensively on customising sharepoint UI. So i know for sure that the class you should be looking at is the following:
*.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-image:url("/_layouts/images/viewheadergrad.gif");
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
background-color:#f2f2f2;
}*
You should remove the image reference in the background-image property like so:
*background-image:url("");*
That will remove the dark greyish line on top.
Happy Customising!!!
Chrome seems to suggest that it's the iframe (id Filterlframe1) that's the culprit:
border-bottom-style: inset;
border-bottom-width: 2px;
Clarification: the Sharepoint list view uses an iframe for the menu bar at the top - that's where the border is being rendered.
Well, after playing in the IE8 dev toolbar, I came up with:
<tr class="ms-WPHeader">
CSS props:
border-bottom:#4e7cb7 1px solid;
border-collapse:collapse;
Check out Heather Solomom's SharePoint CSS reference at http://www.heathersolomon.com/content/sp07cssreference.htm.
Browsing through the webpart specific section at http://www.heathersolomon.com/content/sp07cssreference.htm#WebParts, it looks like this might be ms-WPBorder perhaps?
Hope this helps.
I reviewed each of the responses and none of them was successful. The key is the color of the line "#4E7CB7". I then searched the root CSS files on the server and at line 2683 of the CORE.css I changed the
.ms-WPHeader TD {
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
to
.ms-WPHeader TD {
border-bottom:0px solid #4e7cb7;
border-collapse:collapse;
}
Related
I'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.
I'm trying to achieve this:
But the best I can get is this:
You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.
I could just add a css line in like this:
.ui-tabs-vertical > .ui-tabs-nav li {
border-bottom-color: #C5DBEC !important;
}
But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.
Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:
.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }
And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.
What I've done to attempt to revert this css line is this:
.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }
Note that again, I'm not touching the border-bottom-color here.
The result of this, at least in firefox, is this taken from firebug:
For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.
Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.
Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?
Use #hexblot's answer and get the color dynamically.
To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.
+1 for trying to find a clean solution, without hardcoded stuff.
just add
.ui-state-active { color: #2E6E9E !important; }
and you should be ok. updated the fiddle with this line in the CSS (last line).
http://www.geneseo.edu/new_social_media_test
I am working on a new social media page for my school, and I cannot get rid of this border within my table. Under the <thead> and above the <tbody> there is this grey line that I can't seem to target. I have turned off table borders in the html and in the css, but nothing works. I can't figure out where it is coming from and its driving me crazy. Is it something from a global CSS file? Maybe one of the social media plugins at the top are messing with it? I'm out of ideas; any help would be greatly appreciated.
Also, in Firefox (8.0.1 :: Mac OS 10.7), the row colors flicker when the fade is over. Absolutely no clue on that one, either.
If you are looking at the code, sorry it is such a mess. I'm new to drupal, I don't have privileges to create my own CSS files, so I had to do everything inline.
Thanks!
Edit: Here is a screenshot to clarify: http://i.imgur.com/dOcoE.png. I also forgot to mention that when I am in preview view in Drupal, the color turns to a light blue, but not a color I have defined anywhere (like this: http://i.imgur.com/WWF0e.png).
The border is set on the th, not the thead or tr. There are a couple rules in css_4ea78c62a1f11df9a1a23dfccad4464e.css that target th, creating a bottom border:
th{text-align:left;padding-right:1em;border-bottom:3px solid #ccc;}
tbody th{border-bottom:1px solid #ccc;}
thead th{text-align:left;padding-right:1em;border-bottom:3px solid #ccc;}
Note that !important is intended only for user agent stylesheets. Use the cascade and selector specificity. Since the stylesheet that disables the bottom border is loaded after css_4ea78c62a1f11df9a1a23dfccad4464e.css, all you need is:
table th {
border-bottom: none;
}
You may need to limit the selector to target the chart more specifically, if there are other tables that you want to keep the border.
I found this CSS:
tbody {
border-top: 1px solid #CCC;
}
I disabled it in Chrome's developer tools, but it didn't have any effect. That's all I can find related to the table though, try removing it from your styles, if you can. Or overriding it.
It's this line, it's in your CSS doc.
thead th
{
text-align:left;padding-right:1em;border-bottom:3px solid #ccc;
}
Hi I'm using blueprint and for some reason I can't override some of their built-in styling (screen.css). So far I've tried:
#asset-index-desc .container
div
li
:border dashed !important
...and this does nothing. I'd appreciate any help.
Does your SASS-created CSS come before or after screen.css? The one that comes after should override the one that comes before.
Look at the styles with Firebug for Firefox -- it has a really good UI to see what styles are active and which have been overridden further down the chain.
hmm I can think of a few things:
1) try adding color and thickness: i.e.
#asset-index-desc .container
div
li
:border 1px dashed red !important
2) I presume that the code you provided is not as it appears in your document as otherwise you would get a Sass error about the div tag being too deeply nested.... :)
3) the following does NOT work in my own app,
#sidebar
div
li
border: 1px dashed red !important
BUT if I remove the div tag, then it's all good:
#sidebar
li
border: 1px dashed red !important
Hope this helps.....
I LOVE Sass and blueprint.... Especially with compass gem. It takes all of the pain out of styling....
Don't know exactly what you are trying to override, but you may need to get more specific in your selector. Maybe add an additional class to the markup and reference the additional class in your style sheet
When we use Text Replacement using CSS and give a negative test-indent i.e. text-indent:-9999px. Then when we click on that link the Dotted line appears like in the sample image below. What's the solution for this?
For Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
You can use the CSS property "outline" and value of "none" on the anchor element.
a {
outline: none;
}
Hope that helps.
For Internet Explorer 9:
a:active, a:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
Source: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a
Please note that the focus styles are there for a reason: if you decide to remove them, people who navigate via the keyboard only don't know what's in focus anymore, so you're hurting the accessibility of your website.
(Keeping them in place also helps power users that don't like to use their mouse)
There is the same border effect in Firefox and Internet Explorer (IE), it becomes visible when you click on some link.
This code will fix just IE:
a:active { outline: none; }.
And this one will fix both Firefox and IE:
:active, :focus { outline: none; -moz-outline-style: none; }
Last code should be added into your stylesheet, if you would like to remove the link borders from your site.
include this code in your style sheet
img {border : 0;}
a img {outline : none;}
I hope this is useful to some of you, it can be used to remove outline from links, images and flash and from MSIE 9:
a, a:hover, a:active, a:focus, a img, object, embed {
outline: none;
ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
}
The code below is able to hide image border:
img {
border: 0;
}
If you would like to support Firefox 3.6.8 but not Firefox 4... Clicking down on an input type=image can produce a dotted outline as well, to remove it in the old versions of firefox the following will do the trick:
input::-moz-focus-inner {
border: 0;
}
IE 9 doesn't allow in some cases to remove the dotted outline around links unless you include this meta tag between and in your pages:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
This is the latest one that works on Google Chrome
:link:focus, :visited:focus {outline: none;}
in order to Removing The Dotted Outline href link you can write in your css file:
a {
outline: 0;
}
If the solution above doesn't work for anyone. Give this a try as well
a {
box-shadow: none;
}
-moz-user-focus: ignore; in Gecko-based browsers (you may need !important, depending on how it's applied)
Use Like This for HTML 4.01
<img src="image.gif" border="0">
You can put overflow:hidden onto the property with the text indent, and that dotted line, that spans out of the page, will dissapear.
I've seen a couple of posts about removing outlines all together. Be careful when doing this as you could lower the accessibility of the site.
a:active { outline: none; }
I personally would use this attribute only, as if the :hover attribute has the same css properties it will prevent the outlines showing for people who are using the keyboard for navigation.
Hope this solves your problem.
I'm unsure if this is still an issue for this individual, but I know it can be a pain for many people in general. Granted, the above solutions will work in some instances, but if you are, for example, using a CMS like WordPress, and the outlines are being generated by either a plugin or theme, you will most likely not have this issue resolved, depending on how you are adding the CSS.
I'd suggest having a separate StyleSheet (for example, use 'Lazyest StyleSheet' plugin), and enter the following CSS within it to override the existing plugin (or theme)-forced style:
a:hover,a:active,a:link {
outline: 0 !important;
text-decoration: none !important;
}
Adding '!important' to the specific rule will make this a priority to generate even if the rule may be elsewhere (whether it's in a plugin, theme, etc.).
This helps save time when developing. Sure, you can dig for the original source, but when you're working on many projects, or need to perform updates (where your changes can be overridden [not suggested!]), or add new plugins or themes, this is the best recourse to save time.
Hope this helps...Peace!
I would bet most users aren't the type of user that use the keyboard as a navigation control. Is it then acceptable to annoy the majority of your users for a small group that prefers to use keyboard navigation? Short answer — depends on who your users are.
Also, I don't see this experience in the same way in Firefox and Safari. So this argument seems to be mostly for IE. It all really depends on your user base and their level of knowledge — how they use the site.
If you really want to know where you are and you are a keyboard user, you can always look at the status bar as you key through the site.
This works perfectly for me
a img {border:none;}
Any image that has a link will have a border around the image to help indicate it is a link with older browsers. Adding border="0" to your IMG HTML tag will prevent that picture from having a border around the image.
However, adding border="0" to every image would not only be time consuming it will also increase the file size and download time. If you don't want any of your images to have a border, create a CSS rule or CSS file that has the below code in it.
img { border-style: none; }
Yes we can use. CSS reset as a {outline:none} and also
a:focus, a:active {outline:none}
for the Best Practice in Resetting CSS, The Best Solution is using common :focus{outline:none} If you still have Best Option please Share
I am studying the css methods Google uses to create their ui. I realized that the css code on their home page contains no reference to their search box; it seems like just a naked input tag, with not a border, background image or any of the conventions normally used to stylize a border. And yet it can display not only a hue and a kind of gradient, but it is slightly round and also reacts to the cursor focus.
So, your guess is as good as mine. Please use your Firebug to check it out and help me get to the bottom of this riddle.
http://www.google.com/
EDIT: Just to be clear, I'm not trying to make an aesthetic judgment. Although I think minimalism of Google's homepage is fantastic, I am really interested to find out the techniques they used to stylize the borders around their search box -- without using any css whatsoever.
Are you using a mac? Aren't all of the native UI elements round, glow, and change color?
Do you have any add-ons like the Google Toolbar which could be modifying the UI of the page without you being able to detect it?
Edit: The technique asked about in the question really has nothing to do with CSS and everything to do with the browser. The text input on the Google home page has no CSS style applied to it and is therefore left to the browser to decide how it looks. Here's what it looks like when the field has focus in Google Chrome:
removed dead ImageShack link
No secret. It's a normal text box... Google's home page has always famously been minimalist.
not sure about their home page, but they do the same in Gmail, and there's CSS involved:
.mFwySd:focus
{
border:2px solid #73A6FF !important;
margin:0 !important;
outline-color:-moz-use-text-color !important;
outline-style:none !important;
outline-width:0 !important;
}
.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}
It is all about Chrome, it applies an outer glow effect when you focus on any textbox with this browser.
Now that the some browser such as firefox are able to read css3 u can use that to have corner radius, im using it now! although its not valid by w3c yet.
It does not look like they are stylizing the search box. But if they wanted to they could just use the native HTML tag input. You just have to reference it in the CSS file.
input {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
This would just cover the search field box.
If you needed to cover the button, just add a class to your button input field.
I always use .btn
input.btn {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
Now this should give you complete control over any input field on you entire website.