I am working on a very annoying bug. The problem is that it happens only in Internet Explorer (I use IE 10). When I try to select the content of a div tag an extra space is added at the end of my selection. Still, Internet explorer has this option for switching the compatibility mode and if I use the extra space will not be there any more. Is there any .css or .cshtml trick I could use for my MVC4 view?
HTML :
<div class="display"> "text" </div>
CSS :
.display {
margin: 0.1em 0 0 0;
border: 0.1em 0 0;
width: 320px;
}
I'm assuming that by selecting you mean when you highlight and copy manually from within the browser
The html you provided, the actual content of the div is [space]text[space]
Chrome appears to be clever and excludes the trailing space. IE, on the other hand, copies the value verbatim
Try removing the spaces surrounding the text - if you require them for your styling, try adding some padding instead
.display {
padding: 1px;
margin: 0.1em 0 0 0;
border: 0.1em 0 0;
width: 320px;
}
Related
Can anyone look at this template and explain why only in Chrome that it adds a whole lot of extra space at the top of the page?
https://html5up.net/uploads/demos/verti
Update:
Actually, I just discovered that when I'm logged into my work Google account (in the browser as a whole), it adds the extra spacing at the top. When I'm just generally using Chrome (guest mode), it does NOT add the extra space at the top. All on the same computer at my house. Different results depending on if I'm logged in or not. Is there an explanation for this?
Padding for the #header-wrapper element, has the following CSS (main.css - line 1839). This equates to a padding-top: 66px in Chrome...
#header-wrapper {
padding: 4.5em 0 1em 0;
padding-top: 4.5em;
padding-right: 0px;
padding-bottom: 1em;
padding-left: 0px;
}
This would be simple to remove or override, if you needed to... e.g.
#header-wrapper {
padding-top: 10px !important;
}
I've a Button with the following super simple css:
button {
background: #005eb8;
border: 0;
padding: 0;
color: white;
line-height: 50px;
}
"line-hight" is set to 50px. But the button is (in Firefox) 52px - I expected it to be 50. Is there any reason for that? In chrome the height is 50 as expected...
Code at JSBIN:
http://jsbin.com/jagiviyima/9?html,output
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
padding:0;
}
Add such css rule.
You ask - is there some reason for that - I believe it is. I don't have Firefox at hand now, but you are using button html element and buttons typically have some default css rules applied to them across the browsers (these are obviously browser specific). My guess is FF is adding some default padding, margin, border or something of that kind to your own defined style. Try setting these to 0 explicitly.
A bit of googling yielded this SO answer which exlains the issue in a more detail, proposed resolution is:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
I came across a little browser compatibility issue.
i have a search input field <input type="search">
and while in Chrome the height is exactly as i want it to be (30px),
the height in IE is always 2px more (32px)
heres the css code:
.search_field{
width: 80%;
height: 30px;
border: solid;
border-width: 1px;
border-color: #eeeeee;
margin: 5px 0 5px 0;
padding: 0px;
}
.search_field:focus{
outline-width: 1px;
outline-style: solid;
outline-color: #919191;
}
html:
<li>
<b>Search</b><span style="float: right; font-size: 10px;">Advanced Search</span><br>
<input type="search" class="search_field">
<input type="submit" value="Search" class="search_input">
</li>
Are there any other IE defaults besides those i already tried to change?
Thanks!
I think, it's because of border you are adding with it. So, 1px from top and 1px from bottom, this way it's taking 2px more than it. Try fixing this once.
if not even this works, then you can add some css hacks like:
_height : 28px; /* IE 6 */
*height: 28px; /* IE 7 */
Note: Keep this in mind that these are not valid css. I mean when you will validate it, it won't. Take reference: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
Are there any other IE defaults besides those i already tried to
change?
You can easily inspect your element style attributes using The IE Developer tool.
Just hit the F12 key and inspect your input search field.
Click the arrow button inside of the Developer Toolbar window at the bottom of the screen and select which Element needs to be inspected by placing the cursor over the Element and then click on that Element
Add the following CSS code, as suggested by #Passerby in a comment:
.search_field { box-sizing: border-box; }
The reason is that otherwise the height property specifies the content width, excluding padding and border, and the 1px borders above and below thus make the total height 30 + 1 + 1 pixels. The box-sizing property can be used to override this.
Arguably, IE (and Firefox) is doing the right thing here, since the HTML5 CR says, in the section about form field rendering, that in “standards mode”, an input element with type=search has normal CSS sizing, whereas in Chrome, it has box-sizing: border-box in the browser style sheet.
The problem is that on my website http://dev.gratefulhearttherapy.org/, at least 2 css properties are not showing up as expected:
html {
background: #fff url('images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}
#bd img {
margin: 0;
padding: 4px;
border: solid 1px #D9D9D9;
}
One background image is missing, and pictures don't have the grey border they're supposed to have.
Yesterday night I was messing with 3 things in my code:
the css file typography-new2.css,
the PHP files elements meta.php, header.php, footer.php, and
the Google Analytics code.
I must have broken something but I can't find what. I tried to pass the website and the css through the W3C validators, I scrutinized the code with Chrome inspector, looking for unclosed tags and such, but didn't find anything.
When using the Chrome inspector, to look at the html element and the img's, the missing css seems absent - not only overridden, but absent.
Any help would be appreciated! With much gratitude.
The issues are in your stylesheet: typography-new2.css
Background not showing:
At the very top you have referenced img before html only separated by comments. So the html rule is actually being interpreted as img html {:
img /* REMOVE THIS LINE*/
/* #import url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/tabs.css'); */
/* All CSS files above will be loaded from this single document. */
html {
margin: 0;
padding: 0;
/* background: #fff; #f9dc91 url(http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/background-sandish-tile.jpg) !important; */ /* #F9D984; */ /* customize_background_color */
background: #fff url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}
Pictures missing grey border:
You have a line full of *s outside of the closing comment / right before the rule #bd img which is probably why the rule is not being applied.
/********************************
*********************************
* $$ GENERAL TYPES
********************************/
******************************** /* REMOVE THIS LINE */
#bd img {
margin: 0;
padding: 4px;
border: solid 1px #D9D9D9;
}
If you remove the two lines, I think all of your issues should be solved.
Your images are not a direct descendent of #bd, I think that is your problem the CSS code is fine. See #150poundsofdonamites response for the other issue.
If this still doesn't produce the desired result try changing html to body.
i have an issue with my css where if i use margin: 0 instead of margin-top: 0, for header p, the header { margin: 0 0 20px; } will be as good as not there. isit supposed to be like that? if i see what happens in firebug, its because the margin-bottom of header collapsed into the next sibling, the section.
html
<header>
<h1>ToDo List</h1>
<p>HTML5 Offline Capable Web Application</p>
</header>
css
header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; }
header h1 { font: 60px/1.4em Hetilica; margin: 0; }
header p { margin-top: 0; }
By default, Firebug only show you part of the story.
To see what really happens when you change margin-top: 0; for margin: 0 0 0 0;, please click on the arrow right to the Style tab (above 'header p' on your snapshot) and select "Display default CSS properties" or sth like that and you'll see downward that html.css already styles p as:
p {
display: block;
margin: 1em 0;
}
Beware, do NOT modify system styles or you'll have to restart Firefox, reopening tabs won't be sufficient.
BTW this 1em margin is what you see in HTML without any style (menu Display / Page style / No style in Firefox or CSS menu of Web Developer Toolbar) : your paragraphs have some vertical margin.
So basically you erased a 1em bottom margin.
I think that the problem here is that your header element is not actually rendering any margin applied to it at all. The space you are seeing is actually the result of a default margin applied to header p.
The reason I say this is that many browsers will not automatically treat the header tag as a block-level element unless explicitly defined as such:
header { display: block; }
After applying this statement to header in your CSS I could successfully apply header p { margin: 0 } and retain the margin specified in header itself. Removing this statement will revert back to the behaviour you are seeing.