I know this is a common problem but I cannot solve it. In a table cell I have this code:
<a href="#1" class="nolink">
<div class="a1"></div>
<p class="a4">
<span class="big">1.</span>
First thing to do
</p>
</a>
According to the error:
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
I understand the error and I know that I cannot place neither a <div> nor a <p> inside an <a>. I tried to set display:block on the <a> element, but that didn't work. How can I solve this?
Solution: Declare the DOCTYPE as HTML5
<!DOCTYPE html>
A lot of things has been added, changed, tweaked and removed in HTML5 compared to HTML4. You can see a list of differences at w3c. The change you are after is among the changes introduced to the Content-Model.
The a element now has a transparent content model (except it does not allow interactive content descendants), meaning that it has the same content model as its parent. This means that the a element can now contain e.g. div elements, if its parent allows flow content.
What is doing the validation? HTML5 no longer has this restriction, so the solution my be using the HTML5 doctype
<!DOCTYPE html>
"Bloc-level Links" In HTML 5
Are you sure the display:block did not work? Are you trying to achieve something like this jsFiddle? i.e. make the entire table cell clickable?
Here is the CSS:
td { width: 50%; }
.big { font-size: 1.5em; }
.nolink { display: block; background-color: yellow; }
.nolink:hover { background-color: #939393; }
.nolink .icon {
display: inline-block;
width: 21px;
height: 21px;
background-image: url('https://abs.twimg.com/a/1368740917/t1/img/twitter_web_sprite_icons.png');
background-position: 0 -110px;
}
Here is the HTML:
<table border=1 width="100%">
<tr>
<td>column 1 text</td>
<td>
<a href="#1" class="nolink">
<span class="icon"></span>
<span class="big">1.</span>
First thing to do
</a>
</td>
</tr>
</table>
[EDIT] Updated the code to add in a icon/image sprite inside the anchor link:
Working jSFiddle Demo
Related
I am trying to neaten up some admin pages in an MVC 4.0 web project, and I'm running into some issues when applying both a class="" and a style="" to an html element. It seems that the class will override the inline styling.
CSS:
.adminHeader
{
display: block;
background: #3e3e3e;
color: #fff;
}
.adminLabel
{
display: inline;
padding: 5px;
font-size: 1.25em;
font-weight: 600;
}
HTML:
<div style="width: 1000px;">
<div class="adminHeader">
<span style="width: 200px;" class="adminLabel">bleh</span>
<span style="width: 400px;" class="adminLabel">blaaaaaaaaaaah</span>
<span style="width: 150px;" class="adminLabel">blu</span>
<span style="width: 250px;" class="adminLabel">bluhh</span>
</div>
</div>
What's happening is, the style="width:x;" will not be applied unless I remove the class attribute. I know I can use multi-classing, but I don't want to have to create a million different CSS classes like .width150px, .width200px, etc.
What am I missing here?
Thanks in advance!
Alex
Inline elements do not have width. Your CSS specifies that the elements of that class should be inline.
There's a number of other questions covering this already. For example, Setting the width of inline elements.
Set your <span> css to display: block;. Span elements display inline by default.
span {display:block;}
Inline styles will always override stylesheet styles. See here in this example. Also there is an example of using display block.
http://jsfiddle.net/AHg7J/1/
I used to have the following structure to hold a logo with a link inside a div:
<a href="http://mysite.com">
<div class="logo"></div>
</a>
with the following CSS:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
}
Is it wrong or there's any problem with compatibility if I remove the DIV and apply the 'logo' class directly to the A element? Just like this:
No, nothing wrong with it. It's actually better to do it that way, less redundant markup.
Some other things to note:
It's actually not valid for doctype other than HTML5 to put a block element (in this case, the div) inside an <a>
You should put a text inside the <a> for SEO/screen reader purpose and hide the text using text-indent:-999px and overflow:hidden. display:block is unnecessary as float:left implicitly sets it.
There is nothing wrong in doing this. You will need to add display:block for dimensions to apply to a non block level element, but as for how the site is read and crawled, no it will not hurt you.
You can make img a block element using this:
.logo {
float: left;
width: 120px;
height: 24px;
background: url('logo.png') no-repeat;
display:block;
}
And as the others are saying it is safe to use an a-tag with a background but normally i have the logo in a div and an anchor on top. Good luck ; )
It creates a major accessibility problem and is in direct violation of Guideline 1.1 of the modern accessibility guidelines, WCAG 2.0: “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” The content of the a element is empty, and a background image is displayed, when CSS is enabled and image loading is enabled; but there is no text alternative.
And you cannot specify a text alternative for a background image. Use a content image instead:
<img src="logo.png" alt="ACME">
Here “ACME” is to be replaced by a descriptive name or abbreviation for the linked page.
By default, an image that is a link has a colored border, with the same color as link texts. You can remove it by using border="0" in the img tag or a img { border: none } in CSS.
My question is simple: what happens to inline-block elements inside of absolutely positioned elements? I have a little example to illustrate what I mean. It's hard to explain otherwise. The question is why the .icon inside of the .tag is not positioned like the previous .icon (that is, inline and to the right of the text)
The code below can be viewed # http://jsbin.com/itole4/5
<html>
<head>
<style>
.field { position: relative; border: 2px solid black;}
.tag { position: absolute; left: 100%; top: -2px; background: black; color: white;}
.icon { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;}
</style>
</head>
<body>
<a>Some text <span class='icon'>X</span> </a>
<h2>
<span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span>
</h2>
<h2>
<span class='field'>Some Text</span>
</h2>
</body>
</html>
Actually, the icon is acting exactly the same. To test, try setting a's style to
display: inline-block; width: 50px;
When you make a tag position: absolute, it causes the tag to no longer have an automatic width of 100% of its parent, but rather to have the minimal width it can take according to heuristics within the browser (browser-dependent). The inline block acts like "inline", like an image, and is thus wrapped to the next line at the first chance (which is right after the word "tag").
So the short answer is: the icon is acting the same, but the block containing it is not.
In order to force the icon on the same line, as on the first line, you can add white-space: pre;. See: http://jsbin.com/itole4/6 (also see comment below)
because the .field has position relative and if you will add the .icon with style : position:absolute;top:0px; inside of the .field the .icon will be added on '0px' on top of the .field not of body
I can't explain it better in English >.<, i hope you can understand
it's not the positioning - it's the element containing the "icon" class..in one you've got a plain inline a the other a nested setup where the parent is an block level h2 this means your "inline-bock" has different line-heights and vertical alignment
Html Structure
<a>
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Anchor is not clickable only in IE7, I know the issue happens because of hasLayout, if we remove height & width of the span, it will work fine.
But I need to make it work with out removing height & width.
EDIT: You can fiddle with an example here: http://jsfiddle.net/rxcAb
CSS Only Solution
Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the a tag because it is invalid to have a standard block level element (a div) in an inline element (an a tag). Giving the a tag layout (I used inline-block) and then setting a position:relative on that span with a z-index: -1 pushes the span "below" the a tag and makes IE7 recognize the a tag as active again. Below is the modified code used in my fiddle. You might want to set up a more generic class name than my ie7AFix (you probably will also want to just target IE7 for those CSS properties that are necessary for it only). I assume you are varying the width and height by images, and hence why you have those as inline styling.
HTML
<a href="http://www.google.com/" class="ie7AFix">
<span style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</span>
</a>
CSS
a.ie7AFix {
display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}
.ie7AFix span {
border: solid #666 4px;
display: block;
position: relative;
z-index: -1;
line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}
.ie7AFix img { border: 1px solid red; }
Updated Fiddle with line-height added to make "cross browser" if one does not want to target IE7 only. I kept the width and height in the span html above, only because the original question (by both gviswanathan and Tomas) requested it. If you don't need to set the dimensions on the span for some reason, but are simply trying to do a double border on the image, then thirtydot's answer given in the comment's below is much simpler.
With jQuery, the following will force all links to work, and have the 'pointer' cursor:
$(document).ready(function () {
$('a')
.click(function () {
window.location = $(this).attr('href');
})
.hover(function () {
$(this).css('cursor', 'pointer');
});
});
I've tested this simulating IE7 with IE8 in compatibility view mode, but can't guarantee it will for IE7 on its own.
You may want to apply this more selectively -- I suspect that, as is, this might slow down older browser performance -- in which case apply a class (like <a href='myClass'>) to all links that are broken this way, and just change $('a') to $('.myClass')
Have you tried using the HTML5 shim? It helps a lot with issues that are caused by hasLayout.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Just take out the SPAN from the IMG. The IMG element can be styled with a class just like any other element, therefore you don't need a span around it.
give the following CSS rules to the a element:
{
display:block;
overflow:hidden;
}
Ah another hasLayout quirk
it's not possible to achieve in IE7 and still retain the width of the span, if you could show what you're trying to achieve in a JS fiddle perhaps we could help, find a way around it e.g. and this is only a guess, putting the width on the anchor with some padding would help create a completely clickable area and still allow a "caption" span to be restrained if that's what you're after..
Example workaround not a fix
CSS:
a {
display: inline-block;
background: #ff0;
max-width: 50px;
padding: 10px;
text-align: center;
}
img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}
HTML:
<a href="#">
<img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
<span>Some text and even longer</span>
</a>
The above is only a thought, and if it's not what you're after, then please provide a sample jsfiddle.net
May be it's a problem is that because you didn't define href="#" inside your <a> TAG So, put href="#" inside your <a> TAG. Write like this:
<a href="#">
<span> <!-- Span has width & height -->
<img>
</span>
<span> Some text <span>
</a>
Just wrap anchor tag inside Div or Span. Its working in IE7.
This way is wrong..?
From your post I think u wanted a clickable image with span info text !! I hope this will help u ;)
http://jsfiddle.net/ajinkyax/v5KH5/3/
<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>
CSS:
.imgLink {display: block; width: 200px; text-align: center;}
See fiddle for code and demo
Fiddle: http://jsfiddle.net/rxcAb/29/
Demo: http://jsfiddle.net/rxcAb/29/embedded/result/
Perfectly working in IE7, IE8, FF, Chrome, Safari.
No changes in code: See below
<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>
An easy way to do this is:
<p>
<span><img></span>
<span> Some text <span>
<a></a>
<p>
p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`
If you have something like:
<a name="link1" href="somelink.php">
<div class="somediv"><img src="image.jpg" class="somestyle"></div>
</a>
Simply add a style property to the anchor like this:
<a name="link1" href="somelink.php" style="display: block; overflow: hidden;">
This will make the div and everything inside of it clickable in IE7+ and firefox & chrome.
I am creating a form in HTML that will be printed, with fields that need to be written in by the recipient. Basically what I want is a single line that stretches from the end of the field label to the side of the page. Here's how I'm doing it right now:
<table width="100%">
<tr>
<td width="1%">
Label:
</td>
<td style="border-bottom-style:solid; border-bottom-width:1px;">
</td>
</tr>
</table>
This works, but there must be an easier way to do this without needing a whole table element. Any ideas?
Here's my CSS:
span.print_underline
{
display: inline-block;
height: 1em;
border-bottom: 1px solid #000;
}
So your HTML will look like:
<span class="print_underline" style="width: 200px"> </span>
I left the width out, so I could reuse it as much as I want, but you can specify the width.
As a sidenote, I tested the same concept with a div tag instead of span tag, and it did not work in some situations. This is probably because it is semantically incorrect to put a div within a paragraph tag (which is why I used a span), and I generally use paragraph tags instead of using table rows like you've used.
I think your solution is better than the responses thus far. The only thing I'd change about your solution is that I'd use a css class instead of inline.
Your solution will have better alignment than using spans. Your code will look cleaner with table elements than with spans as well.
Also, you might want to consider putting in a textbox in your cell so that your users can input the information directly on the page before printing out.
How about using the span tag?
<span style="border-bottom....">Text</span>
just have a div with appropriate margin to the left. Block-elements by default always expand to the full width.
Meaning:
label {
float: left;
}
div {
margin-left: 10em;
border-bottom: 1px solid black;
height: 1em;
}
<label>label:</label>
<div></div>
it won't stretch the full width between the label and the right side, but you can have the label hide the bottom-border (using background-color or something) and have the div expand all the way to the right aswell (without the margin).
If you want correct semantics, you can even use an input instead of a div, set it's display to "block" and fix the borders and background.