I am almost done with my project, but have one final looming problem that I'd like some advice on. Info on the CSS "margin transference bug" relating to ie6 and ie7 can be found here and here.
So I have all of these heading tags with margin-bottom: 24px. They sit above any number of left-floated divs, depending on the page.
Each of the floated divs sitting below the heading tags "inherit" the heading tags' margin of 24px.
Short of putting EVERY SINGLE heading tag in it's own div, I am out of ideas. Do you have any ideas?
EDIT:
Maybe a BETTER question is, "how would you add space below all heading tags without using margin?" Line-height isn't quite cutting it, but what about padding-bottom?
If you're not using background images or background colors behind your headings, I don't see any problem with using padding-bottom.
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
Now I know there are similar questions posted, but I'm looking for a solution for pixel perfection.
Sandbox: http://jsfiddle.net/unqc4a0f/1/
Problem trying to solve:
Attempted code:
.mi{float:left; width:150px;height:200px;padding-right:10px;/*margin-top:3px;*/}
.mt{float:left; width:400px;margin:0;}
In the past I've used the padding/margin hacks to push the image or the text objects down a few pixels to make them visually align at the top edge. And by visually I mean that I know that the fonts have a size and line height, but even taking that into account, the height of the actual font characters may include some space. This you can see in my example above. I've also —based on other threads here —tried using line-height, and although that did achieve pixel perfect alignment, it mangled the the vertical line spacing of the entire paragraph.
My question essentially is whether to continue using the padding/margin hacks or is there a more 'legit' solution. I ask this in regards to building layouts that are responsive and then having no issues with uniform layouts.
Thanks in advance.
Realize it's an old question but...
In CSS one can use a ::before element add a negative margin-top value to it.
Specifically, I wanted to share this Interactive Text-Crop tool I found that helps create a SASS mixin for this purpose.
The gist in this tool is that you remove the capital height from the (font-size * line-height) and then divide by two. But that is a simplification of how your font may or may not be structured.
In reality - There is no "pixel-perfect" answer because when it comes down to it, the physical structure of fonts doesn't always match their font-size and different font-families at the same font-sizes can still look taller or shorter.
Instead of float use a display:table; layout for a perfect inline placement and vertical alignment.
It only requires that you wrap them within an element...
Updated JSFiddle
.wrapper {
display: table;
}
.mi{width:200px;height:200px;display: table-cell;}
.mt{display: table-cell;vertical-align:middle;}
<div class="wrapper">
<img src="http://www.thehollywoodnews.com/wp-content/uploads/2839335-morgan_freeman_wallpaper_4_normal.jpg" class="mi">
<p class="mt">Join me in San Diego at the Global Event for Data-Driven Engagement Marketers. DMA is doing great work to protect marketers around the world, come and hear from leading marketers how DMA is enabling them to NOT MARKET ALONE</p>
</div>
The space is supposed to be there it normally comes from line height which is something you need. If you font size is 14px and you reduce the linee-height to 11px you see the gap will vanish from the top, but the text will look very cramped..
Sometimes to get pixel perfect you have to just tweak like you have with the margin on the image..
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?
I'm having a couple of problems with this site. Actually it's my lack of CSS skills that is the major issue.
In any case, if you go to this page: http://winteradagency.com/Arvin/lifestyle/lifestyle.htm,
you'll see that in the center area <div id="centerInc">, I want some text (aligned to the right and bottom) to be on top of the image . So I've used a <p class="centerAlign3"> and another one <p class="centerAlign2">. It all comes out fine in Firefox and the others but not on IE6 or IE7.
Also the background image that is set to take up the entire browser window looks good in Firefox and the others but stops short on the right in IE6 and IE7.
I think I'm getting confused about the absolute vs float positioning among other things.
Any help would be greatly appreciated, I'm smelling rubber as these wheels are spinning.
Sorry, I opened the website in IE now, just add a simple left:0; to both of the text elements(centerAlign2, and centerAlign3) and it will work
Set position relative
(position:relative;) to the element containing the image, and
position absolute
(position:absolute;) to the text and also add (bottom:20px;
right:20px;) this represents the
spacing of the text inside the image.
You can use any value that you want, I
used 20px.
I have setup my form using CSS.. Labels float to the left and input/textareas float to the right. They align fine.
However I recently added a block with checkbox elements. For some reason, there is a margin appearing above it which I have not been able to find the solution to fix. I suspect it is a float problem but I can not figure it out. I'm generally pretty good with CSS.
(no longer viewable)
Notice the extra space above the checkbox block... Borders are on to help you understand where the divs lie.
So where is the offending CSS code?
Thank you!
Update
It appears to be fine in Safari.
I am testing on firefox 3 on mac osx .
This is because you are using a fieldset with a legend. The legend is pushing the top margin out. Legends are very difficult to style cross browser, in fact most browsers cant style them at all other than font color.
Check this link to see some research that has been done on styling legend elements (with cross browser screenshots): legend styling
I suggest you hide the legend, and include an extra label inside the fieldset for cross browser goodness.
I think its this:
.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}
Firebug is telling me that your borders overlap. Reducing the width of that box to 8% would work, but not sure that achieves what you want?
if i'm not mistaken, your checkbox and label within the option-row class are both defined as block-level elements. try removing the display property or setting it to inline.