I use markdown with css, output html sometimes.
But when display in browser, a space prefix to my code segment, only first line. In the pic below, it just before "gconftool".
If I disable css, here is no space anymore. So it really comes from css. Of course I checked html, no space character here.
Below is my css.
pre {
display:block;
/* overflow:auto;*/
width: 90%;
margin-left: 5%;
background-color:#333;
padding: 0.1em 0.5em 0.1em 0.5em;
word-wrap: break-word;
/* border-color: #080;*/
/* border-style:dotted none;*/
border-left:0.5em solid #080;
}
code {
background-color:#333;
color: #eee;
font-family: 'Courier 10 Pitch',"Courier New",Monospace;
text-shadow: none;
}
So how can I get rid of this space.
append:
I had solved it. thanks jsfiddle.net, thanks all.
You have a margin and padding here:
em,strong,code {
margin: 0px 0.2em 0px 0.2em;
padding: 0px 0.4em 0px 0.4em;
font-weight:bold;
font-style: normal;
}
Are they there for any need? Because when I remove those two your spacing is gone. Below a fiddle.
https://jsfiddle.net/Ly0429yr/2/
Related
I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.
I need to center vertically the text inside a div but I am having a problem. This is the situation:
There is an hover attribute that I added in the CSS and in fact, when the mouse goes on the div, it changes the background and the text goes at the center of the div.
I would like the text to be centered also in the first case shown in the picture (when the mouse in not over the div). You can find the fiddle with the code here: Fiddle
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
This is the code that I have used for the div. And when the mouse goes over:
.tab:hover {
cursor: pointer;
box-shadow: inset 0 0 10px #999;
-moz-box-shadow: inset 0 0 10px #999;
-webkit-box-shadow: inset 0 0 10px #999;
background-color: #555;
line-height: 50px;
}
I have used the line-height in both cases but it works only in .tab:hover. Any idea?
That happens because you are setting after a declaration for the font:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
This CSS is after and then the specificity goes with the declaration here. If you just change the order it will work, since the last has more precedence:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
UpdatedFiddle
You need to set the line-height: 50px; for .font_header as well.
Example fiddle: http://jsfiddle.net/6tzwc17c/2/
At least in Chrome it works if you just split the font declaration, like:
font-family: Century Gothic, sans-serif;
font-size: 19px;
Instead of:
font: 19px Century Gothic, sans-serif;
CSS reset (yahooReset) is not working in cross browsers mainly between IE and chrome, why are all the div elements and fonts comparatively bigger in chrome? How can i make both browsers compatible? Appreciate any suggestions. See my code below:
div#topBar {
border: 1px solid black;
margin: 0.2em auto 0em;
height: 6em;
background: #74756c;
}
.logo {
font-family: 'Cinzel', serif;
/* google font*/
color: #191970;
font-size: 350%;
padding: 0em 0.3em 0em;
background-color: #E6E6FA;
text-shadow: 0 0 2px 8px white;
border: 1px solid #4195fc;
}
div#box {
margin: 0.6em 0em 1em 1em;
}
nav#navigation {
float: right;
font-size: 140%;
margin: 15px 6px 0px 0px;
}
<body>
<div id="topBar">
<div id="box">
<b class="logo">RaGa</b>
</div>
<nav id="navigation">
Home
Imprint
Privacy
Terms & Conditions
</nav>
</div>
</body>
I think some changes will help you
change font-size value in px
change em to px
remove <b> tags. This is very old.
I have found the answer. In my code I wrote below code
body { font-size:12px }
/* this will create problems in cross browser rendering */
Google chrome got default font size of 15px which wont allow your code to render below this, but IE does.
I heard Google stopped support to below code to reset default font size.
* {
-webkit-text-size-adjust: none;
}
.ui_btn , .sub_txt {
margin: 2px 0px 2px 3px;
background:#181c18;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
text-transform:lowercase;
}
.ui_btn input, .sub_txt input , .disabled input{
border-spacing: 0px;
background: none;
color: #fff;
outline:0!important;
margin:0!important;
cursor: pointer;
display: inline-block;
font-weight: bold;
border: 1px solid #181c18;
font-family: Arial, sans-serif;
font-size: 11px;
padding: 7px 6px!important;
white-space: nowrap;
text-transform:lowercase;
line-height: 12px!important;
}
And this is my button:
<label id="SD_mrs_t" class="ui_btn" for="SD_mrs">
<input id="SD_mrs" value="More Specific" type="button"/>
</label>
As a result button in Firefox has something like:
padding: 9px 8px!important;
Is there any solution without definition of special parameters for Mozilla browser?
Firefox applies a special padding to buttons, which you can address like this:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
In Firefox, the input button has more padding, this might help to resolve it:
/* Remove button padding in FF */
button::-moz-focus-inner {
border:0;
padding:0;
}
Also, this question seems more or less the same (above code is suggested there): CSS: Size of buttons in Chrome is different than Firefox
If you use a reset.css in your stylesheet, it can set the default values for all browsers on load, then the firefox button wouldn't be bigger. I use this one:
http://meyerweb.com/eric/tools/css/reset/
I made a CSS menu but the individual tabs, or rather a row of tabs, seems to be overlapping each other. I used white-space: pre-wrap with a width on the tab menu itself:
html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}
#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}
In general, don't style the LI for menus, style the A tag and use display:block or inline-block
not sure if this is what you want but I think you may be missing a float: left in your li
code: http://jsfiddle.net/vT5vd/
BTW lists are fantastic for menus and are used so almost exclusively!
The tabs are treated just like a line of text. The line spacing is set to the height of the text, causing the larger tabs to overlap. To correct this just add a
line-height: 1.8;
line to the css file in the tabs list item section. Also. you can put a break or paragraph tag in the list of tabs to control where they wrap to the next line and avoid splitting a tab.
ul.tabs li a
{
font: normal 18px Verdana;
line-height: 1.8;
text-decoration: none;
position: relative;
padding: 0px 8px;
border: 1px solid #CCC;
border-bottom-color:#AAA;
color: #000;
background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
border-radius: 2px 2px 0 0;
outline:none;
}