Hello
I am trying to use block level linking in a html5 specified document. But when I have an img inside a div and the div has a width, the img is not clickable in ie7.
Any solution to this?
I get an error when I try to post the html but I hope you get the idea.
HTML
a --> div --> img
css
div {width:140px;height:70px;}
Do you need the div element for any special reason?
You can turn a into a block-level element using the display: block property and assign it the dimensions that you want.
Probably what is happening is that the div is terminating the a prematurely since in pre-HTML5, you were not allowed to nest a block-element with an a.
Remember, IE7 is not HTML5 compliant, so it behaves like HTML4.1 with any IE7 behavior/quirks/bugs.
Related
On this site the document has a large width. When I'm inspecting it on Chrome, I don't see which element is causing this issue.
There are no elements that have this width.
This is caused by mistakes in the <footer> section.
You have container which forces width inside bootstrap column. You need to remove this class. See the attachment below.
The another problem is direct child inside <section id="footer-bottom">. It is element with class row which has negative horizontal margin. It also causes unwanted stretching of the entire website.
use overflow:hidden for this .an.ccm-page
add this style in your main.css
.an.ccm-page{
overflow:hidden
}
It's due to the <section id="footer-top">. In the <div class="col-sm-3"> you have another Bootstrap .container. If you're nesting Bootstrap grids do not use the .container class again and nest like e.g. .row > .col-sm-3 > .row > .col-sm-12.
In general if you want to know why your page is too wide: Open e.g. Chrome's DevTools, scroll to the right and start removing elements from the page. At the moment the page scrolls to the left again you know which element is too wide.
Its actually because you have too many html tags mismatching in your markup, means opening tags without corresponging closing tags.
Refer: http://validator.w3.org/check?uri=http%3A%2F%2Fanitya.myconcretelab.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
I have HTML like below and all is displaying grand, the problem is that due to a problem with Sharepoint 2013's editor your unable to edit the link text but as soon as I remove display: block I can edit the link text, the same happens using float.
My question is there a way to emulate the affect of display: block where it will span the whole width that is available to it without using display or float?
<div class="button">
Link Text
</div>
There is one option to make an inline element to be like a block by using position:absolute without using display or float.
But I hope absolute positioning doesn't fit your want. Thus, the final conclusion is that you must use display or float property to render it correctly.
If you even use absolute then don't forget to keep position:relative to your parent element from which you want to be the element as absolute.
You could try display: inline-block; width: 100%;. You might need to alter the width to take into account any padding or border you've set.
(In the past I've used an edit mode panel and other tricks, so these hacky styles only apply when the page is being edited.)
SharePoint 2013's editor is so utterly awesome isn't it? :-(
I've seen this quite a few times now. When people want to assign a CSS property to the whole window/document, they sometimes do
html, body {
myCSSProperty: someValue;
}
For example, see the answer I accepted here, or see this article.
I am wondering if assigning CSS properties to both html and body is to overcome browser bugs, required for all browsers, a purely psychological thing, a common misconception or misunderstanding of the tags html and body, or something else.
I would be glad if someone could demystify the situation for me, separating the cases where CSS properties need to be assigned to html or body, or both, with specific examples and explanations.
This article has great information about the <html> and <body> tags in terms of CSS. The short of it is this (taken from the top of the article):
The html and body elements are distinct block-level entities, in a parent/child relationship.
The html element's height and width are controlled by the browser window.
It is the html element which has (by default) overflow:auto, causing scrollbars to appear when needed.
The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system.
In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the html element.
I've set up a test case, where a CSS pseudo-element (::after) is displayed on mouse-hover on the given (parent-) element. Everything works fine so far, but the negative top-margin for the pseudo-element affects the parent instead of the generated element. (While the negative left-margin works as expected.)
Can anyone explain this behavior and/or know a workaround?
The first thing to be aware of is that when you use ::after, the DOM looks like this:
<div class="land" lang="de">[content of element]<after></after></div>
So, this behaves in exactly* the same way: (use Chrome or Firefox)
http://jsfiddle.net/MLThM/7/
And with some extraneous properties removed:
http://jsfiddle.net/MLThM/8/
The reason that the parent element moves is collapsing margins.
One way to "fix" that is to add overflow: hidden to .land:
http://jsfiddle.net/MLThM/9/
And the fix applied to your original demo:
http://jsfiddle.net/MLThM/10/
* = let's forget about possible bugs in ::after and ::before for the moment, they aren't relevant to the current question.
You could always set your container div to position:relative and then the new content to absolute. This way you won't affect any of the margins on the containing div.
Example : http://jsfiddle.net/MLThM/6/
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?