I have added schema markup to my website, and I have placed it at the bottom on my page in the footer. On my CSS it says
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
But when I browse it through Firebug it doesn't show the margin, only the float and width. It was showing it before, and all I changed was the first and last numbers of the margin trying to get the schema markup exactly where I wanted it.
One thing I see is that the 23 in your margin list does have 'px' on it. Could that be the issue? Try updating it to:
margin:13px 10px 0 23px;
You have syntax errors:
This:
#copyright {
float:left;
margin:13px 10px 0 23;
width:380px
}
Should Be:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
Notice the missing semicolon after width. This could cause the previous styles from being read. Also the left margin won't be read because you didn't define a unit.
This should work:
#copyright {
float:left;
margin:13px 10px 0 23px;
width:380px;
}
Related
On this fiddle (https://jsfiddle.net/9v38rju6/3/), whenever I hover the cursor over an element in the second column, Firefox 87 on Windows starts switching back and forth between two renderings of the list, very rapidly.
Lower right panel must be ~850px wide to reproduce bug.
This does not happen under Chrome (or Edge).
The problem disappears when I comment the rule
li {
margin: 0.25em 0 0.5em;
}
Can someone explain what is going on?
Dude, this is because you change the height of the border AND the margin-bottom on :hover!
Some browsers change the layout on an specific point (what is in your hand, with CSS) and could get ugly like your problem here.
If you hover over one of there links, the height of the link grows 2px more (because of border-bottom-width 3px instead of 1px) and the entire list-element also grows 2px. Now the browser has to "re-render" the layout of your list and height of elements. Also,
you reset the margin-bottom from 0.5em to -2px.
This does not remove 2px from the margin-bottom, this set the margin-bottom to 2px! Could be kind of confusing.
ul.index {
columns: 15em;
}
li {
margin: 0.25em 0 0.5em;
}
a[href] {
text-decoration: underline;
border-bottom: 3px solid transparent;
}
a[href]:hover {
text-decoration: none;
border-bottom: 3px solid;
}
<div>
<ul class="index">
<li>#bottom-center
</li><li>#bottom-left
</li><li>#bottom-left-corner
</li><li>#bottom-right
</li><li>#bottom-right-corner
</li><li>#charset
</li><li>#color-profile
</li><li>#counter-style
</li><li>#custom-media
</li><li>#custom-selector
</li><li>#font-face
</li><li>#font-feature-values
</li><li>#font-palette-values
</li><li>##hasinstance
</li><li>#import
</li><li>##isconcatspreadable
</li><li>#keyframes
</li><li>#layer
</li><li>#left-bottom
</li><li>#left-middle
</li><li>#left-top
</li><li>#media
</li><li>media
</li><li>#nest
</li><li>#page
</li><li>#property
</li><li>#right-bottom
</li><li>#right-middle
</li><li>#right-top
</li><li>#scope
</li><li>#scroll-timeline
</li><li>#supports
</li><li>#top-center
</li><li>#top-left
</li><li>#top-left-corner
</li><li>#top-right
</li><li>#top-right-corner
</li><li>##toprimitive
</li><li>##tostringtag
</li><li>#viewport
</li><li>#-webkit-keyframes
</li></ul>
</div>
It happens as the margin changes the height of the element and the item does not suit into the first column anymore.
It does not happen if you remove the margin from either top or bottom for each li element like this:
li {
margin: 0.25em 0 0 0;
}
or
li {
margin: 0 0 0.25em 0;
}
Not sure why, but it happens with 2 and 3 columns.
I think I could work around it by using padding instead, like this:
li {
padding: 5px;
}
This way, the element height remains the same as the padding applies to the inner of the li element, not to the outside as the margin does.
I'm trying to remove ALL space around a <h2> element
I have this simple markup:
<div>
<h2>Count down</h2>
</div>
I tried to remove spacing with:
h2 {
margin: 0;
padding: 0;
line-height: 0;
}
But some white space remains. You can see it on this screen shot:
There's spacing both over and under (and it's not padding or margin). How can I get rid of that extra spacing?
EDIT: Here is a simple jsfiddle to illustrate. I want to remove the space colored light blue.
The inspector in the screenshot shows
.countdown h2 {
margin: 0 0 10px;
}
which equates to:
.countdown h2 {
margin-bottom: 10px;
}
That means you must have a styled h2 somewhere in your css.
Because the style is nested as .countdown h2, it will take precendent over just styling h2 by itself.
If you cannot delete it, and would rather not use !important to override it, you may be able to override the style like:
body .countdown h2 {
margin: 0;
}
This gives it three elements, making it more specific than the two in the inspector. See an example of how it works here: JS Fiddle
More on CSS precedence: W3 - The cascade
you have padding on your countdown class which surrounds your h2 of 40px as you made it global it will put padding on top bottom left and right at 40px to fix try this
.countdown { padding:0px 40px 0px 40px; }
if you mean the h2 has space at the bottom thats because you have a style on it putting margin of 10px at the bottom to remove just delete that style.
.countdown h2 { margin: 0 0 10px; }
if you dont want to delete it you can overide it by doing
h2 {
margin: 0px !Important;
padding: 0px;
line-height: 0;
}
you should not really use the !important unless really needed which in this case it is not.
I have downloading the responsive framwework http://996grid.com/ and in the Normalize.css it has default settings of padding: 0 0 0 40px; for various items. for example
menu,
ol,
ul {
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
Can someone explain the reasoning of this as when I add a ul it adds 40px onto it... If I remove the 40px in the normalize will it effect browser support?
Thanks for your help
In the official Normalize.css (available at https://github.com/necolas/normalize.css/), there is no such padding, however most browsers will add this padding anyway to simply give the list some indentation from regular text.
If you want to remove this, simply modify the provided CSS or override it within your own CSS:
menu,
ol,
ul {
padding: 0;
}
dd {
margin: 0;
}
It's up to you to style your own documents however you like; aside from the default styles defined in the HTML specification, most browser default styles are simply there to make simple unstyled documents a bit prettier.
According to Erik Meyer it's a remnant from Mosaic. He said it at the end of Web Platform podcast episode 139
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I'm having some problems with IE compatibility with my website. I currently have it parked at http://www.verdasconews.com/tiago while I test everything. I like to make sure I have compatibility with the major browsers. It looks fine in Firefox, Chrome, Opera & Safari, but in IE, I'm having problems with the header/content div layers.
Here's a screenshot of what it looks like in IE
http://i.stack.imgur.com/GOaSX.png
The post and sidebar content are overlapping the header when they should be tucked underneath, the way it appears in the other browsers.
This is the css for the positioning:
/* ------ layout ------------------------ */
wrapper {
background:url(img/back2.png) no-repeat center top;
}
contents {
width:959px;
margin:0 auto;
text-align:left;
}
header {
background:url(img/top.png) no-repeat bottom;
height:160px;
}
middle-contents {
background:url(img/side.png) repeat-y;
padding-bottom:50px;
}
left-col {
float:left;
display:inline;
width:584px;
margin:0 0 0 5px;
}
right-col {
float:right;
display:inline;
width:330px;
margin:15px 5px 0 0;
}
footer {
background:url(img/bottom.png) no-repeat top;
height:114px;
margin-bottom:50px;
}
and this is what my header positioning is
/* ------ header ---------------------- */
logo_image {
margin:6px 0 0 4px;
float:left;
display:inline;
}
logo_image h1 {
margin:0;
padding:0;
}
Not sure if the title is exactly right, as I asked a friend who thought that might've been the problem and a google search led me here. I'm not a pro with programming, but I'm hoping someone who is can sort out what might be wrong here. I can provide the full css if necessary. Thank you in advance
You can fix it by removing height:160 from #header, and also remove float:left and display:inline from #logo_image