In this ASP.NET MVC 3 project, I've just started experimenting with Twitter Bootstrap, but I notice it messes with the rendering of <fieldset> legends. What is happening to the legend rendering here, and how do I get it back to normal? That is, I want the right line to be vertically aligned with the left line again.
The standard legend rendering, pre-Bootstrap, to the left, Bootstrap-affected rendering to the right:
Update:
I've found out what's causing the broken rendering, at least: Bootstrap changes the legend's width property to 100% and the border-bottom property to '1px solid'. This causes the original border to the right of the legend to be erased and a border beneath it to appear instead. The question is how this is meant to work. Maybe MVC's CSS (Site.css) is interfering with that of Bootstrap?
If you switch your stylesheet declarations so that the bootstrap is last it should correct the issue, ie:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
Bootstrap styles
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 27px;
font-size: 19.5px;
line-height: 36px;
color: #333;
border: 0;
border-bottom: 1px solid #E5E5E5;
}
default MVC Style.css styles
fieldset {
border: 1px solid #DDD;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
end result should look like:
vs the other way around (MVC default styles declared last)
Alternatively, get rid of the MVC stylesheet altogether and use bootstrap along with whatever custom styles you need.
Related
I used to have no problem with the css code i have been using. But, after I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?
Compare the problem page after switching to using fancybox (www.lixiao-art.com/test.html ) with the page using Lightbox2 ( www.lixiao-art.com/latest.html )
This is the code I use:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}
#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}
#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}
#content a {text-decoration:underline}
h2 {height: 2em;}
.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}
a{text-decoration: none;
color: #645630;}
a:hover {color: red;}
* {margin: 0;}
html, body, wrapper {height: 100%;}
.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}
.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}
img { border: none; }
Thank you!
In your previous Lightbox2, each image is wrapped in an anchor
<a class="ImgBorder">
and the class ImgBorder has the value margin: 30px 20px
In your current Fancybox, you can just add this missing margin margin: 30px 20px to the class fancybox as each image is now wrapped in an anchor
<a class="fancybox"/>
As I just noticed that there doesn't seem to be any class fancybox already defined, you just have to add
.fancybox
{
margin: 30px 20px;
}
e.g. in your global.css
Update: In case you also want to display the border for the fancybox-images, there are two ways of achieving this: Currently you have both lightbox versions on your test page. For the first image the border is still displayed for hover. Following CSS is taking care about that:
.ImgBorder img {
border: 2px solid transparent;
height: 100px;
}
.ImgBorder:hover img {
border-color:white;
}
for an image markup as follows for your first image:
<a class="ImgBorder" rel="lightbox[gaze]"
href="http://www.lixiao-art.com/work/2014/52.jpg">
<img src="work/2014/52_t.jpg">
</a>
Your current fancybox-markup is like this for your second image:
<a href="work/2014/52.jpg" rel="group" class="fancybox">
<img src="work/2014/52_t.jpg">
</a>
So all you have to add is the border and hover for the fancybox-class:
.fancybox img {
border: 2px solid transparent;
height: 100px;
}
.fancybox:hover img {
border-color:white;
}
It's possible that there are some additional adjustments because of the CSS that fancybox uses, but it's easier if you just check this on your site as I just noticed that you're currently working on it.
At the moment your fancybox images "jump" because you added the CSS
.fancybox:hover
{
border-color:white;
margin:30px 20px;
}
which results in setting this margin on hover (therefore jumping then). I suggest you just try the CSS I posted above, that should work.
Update 2 for the comments follow-up questions:
The attributes class and rel stands for the following:
rel (='related') is an attribute containing information for you previous lightbox. The lightbox script will just fetch the information for e.g. a big image or a link from there.
class: as you noticed, almost all in your css-file starts with a dot (.) followed by a name. This name is the name of the class to which the style information will apply. So .test {color:red;} results in displaying a text red in case it's wrapped in an element with the class test, e.g. a <div>: <div class="test">This is red text</div>.
Update for the margins:
To keep the margins to your images when you remove it for the :hover - the correct way to have the margins is just like that:
.fancybox img
{
margin:30px 20px;
}
As you already have one .fancybox img in your CSS, just add this margin to it, though you can also have these selectors multiple times in a CSS file, it's better to keep the styles applying to an element together.
Thank you very much! You've pointed out the problem with my multiple classes, and I've fixed it accordingly like this:
<a class="fancybox ImgBorder" rel="group" href="work/2014/52.jpg"">
<img src="work/2014/52_t.jpg">
</a>
(instead of making new definitions in my global.css)
But, a small problem shows up: this line shows in red colour in the editor at the backoffice. Is there a problem with this line? but I guess I will open a new thread for this.
Thanks again!
I want to use two css styles bootstrap and topcoat. I use the angular slide menu feature (ng-mobile-menu). When I add the bootstrap cdn. it overrides the topcoat menu as the result the background color of the slide menu become shorter just cover the menu list: http://www.elmandato.pl but it should be http://www.shoppinpal.github.io/ng-mobile-menu/demo/#/skinny. That should I add to (change order of link rel doesn't matter):
<link rel="stylesheet" href="topcoat/css/topcoat-mobile-dark.min.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0./css/bootstrap.min.css"/>
<link rel="stylesheet" href="ng-mobile-menu.min.css"/>
<style>
html, body {
margin:0;
padding:0;
height: 100%;
}
#menubutton {
padding: 0 1.25rem;
font-size: 16px;
/* vertically center button text */
line-height: 3rem;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #454545;
text-shadow: 0 1px #fff;
background-color: white;
-webkit-box-shadow: inset 0 1px #fff;
box-shadow: inset 0 1px #fff;
border: 1px solid #a5a8a8;
}
</style>
Bootstrap is overriding topcoat because you've placed the link to it below topcoat. CSS cascades from the top down, meaning bootstrap overrides, topcoat, and ng-mobile-menu.min.css overrides bootstrap and topcoat. Try putting bootstrap above topcoat, then use developer tool to see what the selectors are for the classes / ID's and overwrite if needed
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
I am struggling through the documentation on jquery ui (specifically tabs:
I've digested the js functions...but I am struggling with the css. For example, I cannot figure how to change the border color (it is like my customizations are not even being read)...
Here is my code so far...
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
ui.tabs-container {position: relative; background: #0000cd; }
ui.tabs {
float: left;
background: white;
height:400px;
line-height: 30 px;
padding: 0 16px;
width:409px;
scrollbar:false;
cursor: pointer;
}
ui.tabs:hover{ background: #f4f4f4; }
ui.contents {
float: left;
position: absolute;
left: 5%;
height: 300px;
margin-top: 31 px;
padding: 0 px;
border: 1 px solid #ccc;
font-weight: normal;
display: none;
}
When it comes to jQuery UI there's usually a lot of classes involved with different levels of cascading, so I recommend you use Chrome's developer tools or Firefox's Firebug to figure out what you need to target with your css.
For example, with this:
.ui-state-default.ui-corner-top.ui-tabs-active {
background: red;
}
You can change the color of the active tab...
Demo: http://jsbin.com/umixan/1/edit
Probably you are looking for two classes. ui-state-default and ui-state-active. So, just add the styling you need for each state. Example:
.ui-state-default {border:1px solid #000;}
.ui-state-active {border:1px solid #fff;}
Note, that your css (above code) must be after jQuery's jquery-ui.css, otherwise you have to use !important for changes to take place.
As darkajax mention though, you have to start using firebug (or Chrome's tools).
I have some css, which when inside my CSS file isn't applied to my designer in Visual Studio, but is applied to the page when I publish it. This issue is slowing down site development massively as I'm trying to pick up CSS as I go...
Here's a sample bit of CSS:
.header {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 100px 100px 100px 100px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
}
Me applying the CSS on the page:
<header>
<asp:Label ID="lblQuestion" runat="server" Font-Bold="True" Font-Size="16pt" Text="Your question goes here..." CssClass="header"></asp:Label>
</header>
Me adding the CSS to the page:
<link rel="stylesheet" type="text/css" href="mycss.css" media="only screen and (max-width: 480px)" />
I'm pretty new to CSS, so I'm hoping someone can tell me what I'm doing that is stopping Visual Studio rendering the CSS properly in the designer...
Also, if I put my CSS tags directly in the page then it works, but I'd much rather keep my CSS out in it's own file, where it can be reused.
Example style working:
<style>
.header {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 100px 100px 100px 100px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
}
</style>
Thanks
I suggest taking a look at Jeff Widmer's blog post, Why does Visual Studio not resolve my CSS class names?
Basically, site relative path's aren't supported by Visual Studio. It is the same reason why intellisense doesn't work for javascript.
He offers a fix for this issue:
<link href="/content/default.css" rel="stylesheet" type="text/css" />
<% if (false) {%>
<link href="../../content/default.css" rel="stylesheet" type="text/css" />
<% } %>
UPDATE:
The problem here was the media element in the link tag for the css. It doesn't appear that VS knows what that tag is and thus doesn't try to resolve the url.
In this case, the css file is in the same folder as the page, so it would work. But, if the css file is moved into another folder, then it would stop working and the fix above would solve the issue.