I putting wmd on my website. After putting code in and giving it a spin i see this image below.
How can i make the preview div not overlap with the textarea? -edit- the black is the css background of div wmd-preview
some html
<div id="wmd-editor" class="wmd-panel"><div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="body" rows="10" cols="89"></textarea>
...
</div></form><div id="wmd-preview" class="wmd-panel"></div>
Try adding a "Width" property value and "Float:Left" property value for the wmd-panel class.
width: value;
float: left;
If this does't work (and only if it doesn't work) trying setting a high margin-top value on the wmd-panel class. I.e.
margin-top: 25px;
Have you tried increasing the z-index of the preview div?
#wmd-preview { z-index: 100; }
Set the floats or if you need to be stingy set the "wmd-editor" as absolute positioning, for either just IE or all. I know its not the most effective way but it can be the easiest in some cases ^^
Related
Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}
I am attempting to make a div element work similarly to that of an input element.
http://jsfiddle.net/MRP5M/6/
I was wondering how the input element achieves the ability to scroll to the side without having scrollbars? I don't want my div element expanding to multiple rows to hold content, but I did not see any CSS properties controlling this behavior on the input element.
UPDATE: All good solutions. Thank you guys for looking into it. It would appear that some aspects of the input element are controlled by the browser (i.e. highlight-to-scroll). It would appear difficult to emulate this functionality without use of Javascript. I've marked the first response as the solution.
Here's the answer: http://jsfiddle.net/MRP5M/12/
There's is one caveat: I'm not sure how to disallow new lines....
You can set "white-space: nowrap;" inside your .editable div
After that, just set a fixed height to your #wrapper (something like 20px) and overflow: hidden;
It will work as I just tried.
The "white-space: nowrap" will avoid any line break, so you don't need to set a fixed width inside your .editable div.
Update: As for the option to select all text with your mouse, Alohci just pointed out on the comments to this post that you can add "overflow: auto;" to your .editable div and it will behave as wanted, at least on Chrome, where I just tried. Alohci also pointed to a Fiddle. Credits to him.
Input fields aspect and behaviour is controlled by the browser itself. You can use CSS to prevent the text from breaking:
See this working Fiddle example!
.editable {
white-space: nowrap;
}
As to scroll without using scroll-bars, you can only achieve either by using JavaScript or altering the HTML as to have an input disguised as a div:
See this working Fiddle example!
HTML
<div id="wrapper">
<input type="text" value="A really long string of content" />
</div>
<input type="text" value="A really long string of content" />
CSS
#wrapper{
width: 151px;
}
#wrapper > input {
border: 0 none;
background-color: white,
color: black;
}
I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}
There is an horizontal scroll bar on my homepage only (http://balloonup.com) and a black border appears on the right?
How is it possible? Thank you for you help
Here is the new solution. Add the inline style float:none to the highlighted element.
in oldcount.css
.home_count {
display: block;
margin: 0 auto;
width: 420px;
}
remove the width
The black "border" is actually the background of your page (#28292B, defined in stylehome.css for the HTML tag). Your problem is that the width of the <BODY> only depends on the window size, not on the content of the elements contained within. You can force the to the minimum width of the page using:
body { min-width: 930px; }
Alternatively, if you want IE6 / Opera 6 support (they don't support min-width) you need to add a dummy <DIV> to force the page width. You can use this as the very first <DIV> of your document:
<div style="position:absolute; top:0; left:0; width:930px; height:1px"></div>
However, there is another problem that stretches your content more than needed and this is caused by that questions counter on the right side. You can fix that by removing that "width" property from the .home_count rule as it's useless.
You may also revise that double .home_count .comma rule as this seems like an error to me.
Anyway, by applying those two modifications described above your page looks fine on FF4 whatever window size (except for the "Log in" button covering the phone number, but that's out of the scope of this question).
In reset-fonts-grids.css, find all the instances of float:right and replace them with float:none.
Try using this:
body{
margin-right:-50px;
}
In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the right way?
Edit: One answer suggests I turn off "display:block" -- but this causes the rendering to look malformed in every browser I've tested it in. Is there a way to get a nice-looking rendering with "display:block" off?
Edit: If I add "float: left" to the pictureframe and "clear:both" to the P tag, it looks great. But I don't always want these frames floated to the left. Is there a more direct way to accomplish whatever "float" is doing?
.pictureframe {
display: block;
margin: 5px;
padding: 5px;
border: solid brown 2px;
background-color: #ffeecc;
}
#foo {
border: solid blue 2px;
float: left;
}
img {
display: block;
}
<div id="foo">
<span class="pictureframe">
<img alt=''
src="http://stackoverflow.com/favicon.ico" />
</span>
<p>
Why is the beige rectangle so wide?
</p>
</div>
The right way is to use:
.pictureframe {
display: inline-block;
}
Edit: Floating the element also produces the same effect, this is because floating elements use the same shrink-to-fit algorithm for determining the width.
The beige rectangle is so wide because you have display: block on the span, turning an inline element into a block element. A block element is supposed to take up all available width, an inline element does not. Try removing the display: block from the css.
Adding "float:left" to the span.pictureFrame selector fixes the problem as that's what "float:left" does :) Apart from everything else floating an element to the left will make it occupy only the space required by its contents. Any following block elements (the "p" for example) will float around the "floated" element. If you "clear" the float of the "p" it would follow the normal document flow thus going below span.pictureFrame. In fact you need "clear:left" as the element has been "float:left"-ed.
For a more formal explanation you can check the CSS spec although it is beyond most people's comprehension.
Yes
display:inline-block is your friend.
Also have a look at: display:-moz-inline-block and display:-moz-inline-box.
The only way I've been able to do picture frames reliably across browsers is to set the width dynamically. Here is an example using jQuery:
$(window).load(function(){
$('img').wrap('<div class="pictureFrame"></div>');
$('div.pictureFrame').each(function(i) {
$(this).width($('*:first', this).width());
});
});
This will work even if you don't know the image dimensions ahead of time, because it waits for the images to load (note we're using $(window).load rather than the more common $(document).ready) before adding the picture frame. It's a bit ugly, but it works.
Here is the pictureFrame CSS for this example:
.pictureFrame {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
line-height:0;
padding:5px;
}
I'd love to see a reliable, cross-browser, CSS-only solution to this problem. This solution is something I came up with for a past project after much frustration trying to get it working with only CSS and HTML.