e.g. I have such CSS code to edit on the fly:
nav {
margin: 100px auto;
text-align: center;
}
It seems that the ONLY way to edit it through firefox's inspect element is the high light the part and overwrite it.
EVERY TIME when I try to move the cursor somewhere, delete some characters and add something new (for example, move to the position between two zeros, delete the first one and add 5 such that 100 changes to 150), it automatically brings back the characters I have just deleted. See below:
nav {
margin: 1050px auto;
text-align: center;
}
The deleted zero automatically goes back. It turns out to be super annoying to me but I couldn't get around this issue at all. Can anyone tell me how to edit the style just the way the same as people do in any text editor instead of it bringing back EVERYTHING I have deleted, making the edition totally messed up.
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I use CSS to customize some parts of the layouts in Vaadin. It worked fine until now. I tried to apply a new rule to one of my compoenents but it simply doesn't take effect, it stays how it is. I already have a similar rule which I tried to apply and change it, but the applying itself works, but any change I make to the CSS class doesn't take effect too.
I don't know why, but it seems like that at some point the CSS changes started not to do what they should, they just don't get active. I then tried to change existing rules which work fine, but these changes just don't appear on the webiste.
Is there any known bug or am I just doing something wrong what I have been doing right all the time? I can't help myself anymore, I am stuck with this for a time now.
Here are the CSS classes, as simple as it can be I guess:
.v-slot-slotenabrechnung {
padding-bottom: 21px;
padding-left: 21px;
}
.v-slot-myslot {
padding-bottom: 21px;
padding-left: 21px;
}
myslot is used at the moment and works fine. When I change the padding to 150px for example and rebuild the application and deploy it, nothing happens. And that's why my new class isn't working either. But attaching the myslot-class to a new component works, just not any changes to it.
I can for example change the padding to 100px and then attach it to a new component, but that's results in the 21px it had before...
I have an ennoying bug with CSS on my new site.
This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
Fixing Varnish for avoiding the 304 bug (bug described here)
I tried to copy all the content of CSS targeted with #import url(css url) into the main CSS file (described here)
Remove all my custom css
I was able to reproduce the bug on 4 differents computers (same Chrome version)
Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Chrome 44.0.2403.89, no plugins at all
Wordpress up to date (4.2.3)
Theme up to date
This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
Drop floats
The a child elements within your li are floated. That's not necessary and I'd recommend removing them.
Fake it
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a elements
Copy the text of the a to a span, and plop it right next to the other
Example
Mes chiennes
<span>Mes chiennes</span>
Set the following CSS rules:
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.
Hope that helps.
Ok, So I am making a travel blog through WordPress. I have made some fiddles including maps and some tables which work perfectly in the fiddle. however, now that I put it on my site - it is messing up. I think something to do with the CSS is messing it up - but I cannot find where.
The page I am having the most problem with is located here:
http://www.journeywithandrew.com/world-heritage-sites-reviews-info/
Problem (1):
The maps infobox (when an icon is clicked) is not displaying the CSS correctly.
Fiddle is here: http://jsfiddle.net/4V7en/4/
You can see what it is supposed to look like.
Problem (2):
The fusion layer I imposed is not displaying correctly when using CHROME or iOS browsers. So again, refer to the above fiddle. It displays correctly in the fiddle, and internet explorer - but not chrome. As you can see the layers is distorted in some places on my site. (like if you scroll left on the map over Australia - for example)
Problem (3):
around my check mark buttons, there seems to be a border on the table I put them in. why!?! I tried to remove this in the table (, etc) but it does not work. Not sure what CSS is causing this!
I think that is all. If someone can take a look at the site and especially using chrome you will be able to see the problems.
.caption-title-link {
text-decoration:none;
color:#41a62a;
font-size:12px;
font-family: verdana;
font-weight: bold;
}
thanks!!
1 . Add padding: 10em; to .infobox, which replaces the padding:.5em 1em at current. This should make the content sit better.
2 . Dont quite understand the issue
3 . Currently your Td is set to
border-width: 0 1px 1px 0;
Remove border-width and replace with border:none
border: none;
Thanks
Problem 1.
Table inside .infobox has a margin-bottom set. Adding .infobox table { margin-bottom: 0 } should fix it. Adjusting the td padding inside .infobox is also needed.
Em values are dependent on font-size, and in your page, you've set the font-size to 1px (vs in Fiddle, where it was 10px). Setting it back to 10px should fix the padding problems.
Problem 2. Which is fusion layer?
Problem 3. Border is coming from style.css, line 412
While some people use this reset.
* {
margin: 0;
padding: 0;
}
Is every element has default margin and padding in each browser default stylesheet( but differently)?
While eric meyer collected some most used selectors and given this to all
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Are those elements has different type of font sizes?
different baseline, different background, outline and border?
if we keep besides cons of universal selector.
is this
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
better than this
* {
margin: 0;
padding: 0;
}
You can find all default styles here: CSS2.1 User Agent Style Sheet Defaults.
If you investigate the list closely, then you'll notice that the browser-specific margins are only set for HTML-standard block elements and that nowhere a browser-specific padding is been set. In other words, the padding: 0 is superfluous. But indeed, the margin is the most disbalanced among browsers, to answer your actual question.
I am probably going to tread on someone's toes here, but in my humblest opinion using a CSS reset stylesheet is ridiculous. You would have to redefine most of those margins (and paddings) yourself anyway. You could as good just learn and keep yourself the rule to define yourself the margin (and if necessary padding) for every block element which you're going to use in the document.
As to the remnant of the reset:
The border: 0 is superflous as well. The <hr> and the most form input elements are the only elements which have a default border. Without it, the <hr> is invisible (actually, this fails in IE6/7) and the text input elements on a form with same background color are invisible as well.
The outline should certainly not be resetted, it breaks accessibility. You need to control it yourself, e.g. resetting it yourself on only links with a (background) image since that's the major reason to reset it. But still, it breaks accessibility. Rather consider giving it a different outline color or style so that it is still visible, but less disturbing.
The font-size: 100% would force you to redefine them yourself in the <h1>, <h2>, etc elements. But even without the reset, you would often already like to do that anyway. What's the point of this reset then?
The vertical-align: baseline; breaks alignment of <sub> and <sup> so that they look like <small>. Further the table headers may also be affected. Those defaults to middle in all browsers. You would need to redefine them yourself again. Plus, it is known that this reset may cause IE6/7 to go havoc with images.
The value of background: transparent; is unclear to me. I don't see any point of this reset expect that it may make IE6/7 mad. You would also need to redefine the background color for all form input elements yourself again which just adds more work (for the case they're placed in a colored container). I am sure that whenever you encounter an element which needs transparent background, you could easily spot that yourself and set it yourself.
Enfin, see what you do with this information. I don't stop you from using the CSS reset. I myself have found the CSS reset only useful >10 years back when I was just starting with HTML/CSS. But with years and years, I've learnt as well that this is plain nonsense. But I admit, it's useful for starters since the reset will force them to set the margins and other stuff themselves explicitly. Which you could do as good without the reset.
Well, 'better than this' is hard to say, but the one with more stuff does more.
outline 0 makes links not have the dotted border around them.
Border 0 makes images and such not have a border around them.
font-size: 100% probably does something like ensure the fonts are 100%.
vertical-align: baseline sets all vertical alignments to the bottom of the container,
background: transparent prevents some png problems.
but margin:0 and padding:0 are two that defiantly should not be omitted from your reset list.
The short answer is: Feel free to set all of those if you are ready to override it for any element that may need it later.
However, note that you may have a lot of work ahead of you when it comes to form elements. They require at least a border to look good, and some of them (e.g. buttons) need a padding too. Also, some browsers display a 3D-ish border around buttons by default. If you set border to 0, you will not be able to get that 3D look back using CSS.
Also, you might want to check out http://www.blueprintcss.org/. It equalises browsers quite well, it seems, though I haven't tried it myself.