I'm specifically wondering about this page: https://podato.herokuapp.com/#/podcasts/http%3A%2F%2Ffeeds.twit.tv%2Ftwig.xml/
Why is the text of each item not alligned with the image on the left?
But a more general question: how do I debug this sort of thing? What's the best way to find out where whitespace is coming from?
For debugging you could use the built-in developer tools.
For official guides:
Chrome: https://developer.chrome.com/devtools http://www.html5rocks.com/en/tutorials/developertools/part1/
Firefox: http://www.howtogeek.com/105320/how-to-use-firefoxs-web-developer-tools/
https://developer.mozilla.org/en/docs/Tools
Also for Firefox i know there is Firebug, a tool developed to make debugging somewhat easier.
To answer your question, take a look at Vikas Kapadiya's answer, in your body tag is a line-height: 1.5; declared. Try and change it in the developer tools to see what happens.
Edit
A possible solution could be wrapping the span elements in a seperate div. I'm thinking of adding a negative top margin. Feel free to come up with other methods, this is the first one i think of.
The reason i'd choose for a div is because it is a block element, whereas span elements are inline elements, which are unable to add a negative top margin to. Also i noticed that you use a data-reactid? I guess it would be a bit cleaner if you could add that to the container div, so the span elements (and the br tag) are free of the data-reactid. Don't know if that is desirable, but see for yourself what would be best.
div.data {
margin-top: -5px;
width: 100%;
}
Try this in basscss line no 121
body {
line-height: 1;
}
Related
Today I was trying to create a dummy css rule for testing and investigation.
.dummy {
some-style : somevalue;
}
Ideally the class should have no visible effect. I want to be able to apply the class to elements but cause the least visible effect possible on any elements it is applied to. For example
<div class="dummy"> should look and behaves as much as possible like <div>
I did not want the class to be empty. Can anyone suggest a style that I could add to the class that would have the least visible impact when applied to a general html element? I can't think of anything completely harmless.
UPDATE: I wanted to add the style to some existing html. The reason was to use the style as a marker for diagnostic purposes. It would help me see when and where styles and stylesheets were getting loaded/cached and where and why some styles were getting overridden, sometimes by the browser defaults which seemed odd. At the time I didn't have exclusive use of the system I was working on so I wanted something that was going to be invisible to other users but I could see in Developer Tools.
UPDATE 2 : the html/css wasn't written by me and I didn't have my own environment in which to work. I was trying to investigate some problems in-situ in someone else's system. I had tried using DevTools in the browser but wasn't getting anywhere with that. I wanted to be able to make some small changes to their html/css to aid my diagnostics. I didn't want them to have any obvious effect on the system for other people (except in DevTools, viewed by me).
It was a Wordpress site and they only had two environments, one for live and one for testing. I was working with the test system. There were other people testing at the time, though mainly checking content.
The real thorny problem was why was the font-size in the calendar widget much larger than everything else on the site? Inspecting using DevTools I could see the font-size style was getting overridden by the browser default style when it seemed to me there were other css selectors that should have taken precedence. It looked bizarre. In the end it turned out to be a missing !DOCTYPE tag in the html. So nothing to do with the css itself.
I didn't like this way of working, fiddling in someone's system, but there wasn't much else to do and it did help to resolve the problem for them.
Hopefully I don't have to do this again, but ever since I have been wondering what was the most harmless style that I could have used?
I thought I would ask here as there must be people who know CSS better than me.
You can use this:
.dummy{
min-width: 0;
min-height: 0;
}
If you just need anything beeing set you could assign rules that are default anyway. For block elements like div set
.block-class { display: block; }
And for inline elements like span
.inline-class { display: inline; }
Of course it could be an issue doing so in some rare cases but in general it's quite harmless I guess.
In principle, for any property you can have an arrangement like this:
div {
some-style : a-valid-value-for-some-style;
}
.dummy {
some-style : a-different-valid-value-for-some-style;
}
And .dummy's style will have an effect, no matter what some-style is.
Your best bet is to make use of CSS variables. These are custom properties and start with a double hyphen. so
.dummy {
--dummy-style: foo;
}
will make --dummy-style a property with value "foo". So long as you don't employ the variable as the value in another property, it will have no visible effect.
I wonder how you would remove the space around text, I know this can be achieved by line-height. But space is always kept either above or below the text. Is there some dynamic way to do this? Either plain CSS or SASS works for me.
Thanks in advance :)
Your developer console tells you which property is responsible for the space.
In your case its the margin that is defined on the element. A simple
h1{
margin:0;
}
will fix this.
In case you wonder, where this margin comes from - some of the elements, like headings come with predefined margins & paddings that are applied by the browsers automatically. In this case, the source in the styles section of your webdev console states "user agent stylesheet".
write CSS
h1 {
margin: 0;
}
It will remove the default margin for h1 getting applied from browser.
I would like to know all the different types of div classes. I have a small amount of understanding of divs.
Here's an example of how I would use a div and then customise the content in the div using CSS.
div .header {
font-family: "Bebas";
font-size: 25;
font-color: #00FF00;
float: right;
position: relative;
right: 120px;
bottom: 1095px;
}
So, if you're not following my question(s), what I want to know is;
A. Does that code look alright?
B. How many div classes are there, and what are they called?
and C. Could someone give me a brief explanation as to what they are and more specifically, how to use them.
I'm mostly self-taught, in case you wondered.
To answer your question you can have as many div as you want. and you assign class or id to identify each div. just be aware id are unique, you can not assign the same id to more than one elements.
and your css format is right, but I am not sure why you declare right/bottom those will only render when your position is absolute with out float.
I would suggest you go through some tutorial at http://www.codecademy.com. it's free. and don't required any sign up, unless you want to save your progress.
As previously said, you can set as many div classes as you'd like, they're not preset. I would also recommend doing the Codecademy tutorials.
Looking at your code, you're telling the div to float: right; - fine. Then you use position: relative; followed by right: and bottom: values. Either float or position, no need to do both.
The way you've written the rule is probably not how you mean it. It's currently looking for this -
<div>
<div class="header">
<p>Content</p>
</div>
</div>
An element with the class header that's inside a div.
You should remove the space so your rule becomes -
div.header {
enter code here
}
Yes, the code you wrote looks fine. I don't know what you intended to do with this code, so going by just the syntax it looks fine.
Coming to your sub-question B and C,
div is block level element with almost no specific task or objective. They are general purpose elements used for most tasks. Block level elements act as containers and div is the most basic type of container we get.
We can use div to store other elements, design web document and proper indention of text and images and what not.
Let's answer your questions one by one:
A - Your code looks fine ( depending on your needs ).
B - You can use as many div classes as you like.
C - Simply you can use div classes to describe it's content like: div.header , div.body , div.footer and so on.
But i recommend to use the new HTML5 semantic tags instead, it is easy, clear and more powerful with search engine optimization.
For more clarification, kindly check the following link www.itibooks.com/html/html5-semantics .
Can anyone explain the weird presentation behavior in the UI screenshot above? As you can see, there's an undesirable separation between the insurance type and the top of the row. When looking at the code via Firebug, there's a clear break in the code. You can view this oddity in the code screenshot below.
The div.insurance-type parent container has no CSS styles. In other words, the vertical-align property, the margin-top property, the padding-top property, and the float property are set to default values and don't inherit a value that might cause this presentation. The children divs have this style:
div#worklist table tr td.col-InsuranceType div.insurance-type div {
display: block;
margin-bottom: 2px;
margin-left: 25px;
}
The span.insurance-company has this style:
div#worklist table tr td.col-InsuranceType div.insurance-type span.insurance-company {
font-weight: bold;
}
The components of this web app are:
ASP.NET MVC 3
Razor View Engine
jQuery 1.5.1
SQL Server 2008
IIS 7.5
This issue occurs in FF4, IE8 and IE7. Please let me know if you know the root cause of this unexplainable presentation behavior.
Thanks.
This is just a guess since I can't see the actual page, could there be some garbage character between the td and div that even firebug has trouble displaying? If the content is not client-side generated (ie: via Ajax), try viewing the source in Firefox (Ctrl-U or Cmd-U) and see if there is any weird character in there. I would even go as far as looking at the raw data in Fiddler.
On a different note, <div class="bold"> is bad practice (not semantic), use <strong> instead. :)
This might help:
Understanding vertical-align, or "How (Not) To Vertically Center Content"
Instead of
<div class="insurance-type">
<div class="bold">
<span class="insurance-company"
have you tried:
<div class="insurance-type"><div
class="bold"><span
class="insurance-company">
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com