In IE6 the paragraph following the empty paragraph is displayed with the background color of the empty paragraph, which I'm guessing is wrong! It works correctly in Firefox, but I haven't checked IE7.
Is there a CSS solution to this problem, or do I have to remove the empty element?
(I would rather not have to remove empty elements, as that involves writing code to check whether every element is empty before outputting it)
The behaviour is unchanged using either strict or transitional doctypes (added this comment in response to answers)
Interestingly the effect does not occur with text color, only background color.
<html>
<head>
</head>
<body>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'>Red content</p>
<p>Unstyled background working because previous red element is not empty</p>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'></p>
<p>Unstyled background broken because previous red element is empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'>Red content</p>
<p>Unstyled text color working because previous red element is not empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'></p>
<p>Unstyled text color working even though previous red element is empty</p>
</body>
</html>
An empty paragraph is meaningless - which means you're probably writing the wrong HTML.
Also, your example doesn't have a DOCTYPE - a valid DOCTYPE is essential for getting browsers to correctly interpret your code, without one you'll be stuck in quirks mode.
But anyway, the simplest workaround for this bug is simply set a background for your current unstyled element.
I just tested that in IE7 and can confirm that it happens there too.
It looks like the unstyled paragraph does not actually have a red background, it's just that IE7 is drawing the red box for the empty paragraph and then drawing the following paragraph over the top.
You can see this for yourself by trying this code:
<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>
You should see that the red paragraph is 50px in from the left.
Why it's doing this is anyone's guess. Adding some code to check if the paragraph is going to be empty isn't too hard, plus it removes useless markup from your output and avoids this problem altogether. Give that a go?
Try putting a non-breaking space in your empty paragraphs...
<p style='color:red'>& nbsp;</p>
Except no space after the ampersand...
Add a doctype to the top of your HTML file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
That will force IE6 to switch form quirks to standards mode. This brings a lot of tother advantages, like a correct box model, so you should be doing it anyway.
One strange workaround I found was to add position:relative to the potentially empty paragraphs like this:
<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Related
I have a grid with grid items and I wrapped them in < a > tags so that the entire element leads to the link. I really want valid html.
<!--Grid Item-->
<figure class="grid-item">
<span>
<a href="#">
<img src="images/image.jpg">
<figcaption>
<h1>Title</h1>
<p>Description</p>
</figcaption>
<div class="item-background"></div>
</a>
</span>
</figure>
<!--End Grid Item-->
In certain hover effects the item background and ficaption are over the image with a lot of the image being exposed and left without the link.
I have created a lot of hover effects with this structure. I know this is valid in html5 but I want to come up error free in html4 validator. Plus, I hear it's bad practice. I don't want to add any javascript if possible.
Should I keep it the way I have it now or is there a valid way that doesn't interfere with the design.
I know this is valid in html5
Then you can make it valid by marking your document as HTML 5.
… or you could if that was correct. You also need to move the anchor so it is either entirely within the figcaption or entirely around the figure.
but I want to come up error free in html4 validator.
That won't happen.
HTML 4 does not support block elements in anchors.
HTML 4 does not support figure elements.
HTML 4 does not support figcaption elements.
If you want to use features introduced into HTML this century, then you need to use a specification for HTML that was written this century.
I don't want to add any javascript if possible.
Injecting the content with JavaScript instead of putting it in the HTML would make the HTML valid. But that would be a terrible hack that misses the point of using a validator in the first place.
In W3C Standards Compliant HTML 4.01 and xHTML 1.0, <a> is an inline element.
It cannot include a nested block-level element.
The only way to have this validate as W3C Standards Compliant HTML 4.01 is to include repeated anchors around the image, around the <h1> and the <p>, inside the <div> etc.
Is the following functionality a bug in Chrome, or is it correct behavior that I don't understand?
In Chrome (version 25), if I have a content editable span which has a node added after it through a :after css class, as in this jsfiddle
http://jsfiddle.net/yQBvn/
if I delete all of the content of the span, after I've deleted the last character, Chrome adds a <br> to the content editable span. This doesn't feel right.
I've verified that Chrome does not do this if the :after css content isn't added, and I've verified that Firefox doesn't do this in any case.
Wanna see something CRAZY?!
http://jsfiddle.net/joeframbach/VXMEN/
<body>
<div id="EDIT-AREA">
<span class='CHARACTER-NAME' contenteditable='true'>Bob</span><span> </span>
</div>
</body>
Adding a span with a space after it fixes the problem. Don't ask me why or how.
Firefox also does this using a DIV with contenteditable
Delete ALL content in the content editable and bam br tag.
Start with an empty CE, focus & hit space, bam br
Solution above of using an empty element directly after a div does nothing, with or without a pseudo element like :after.
Span works though?
Chrome untested.
Is p div.myclass a valid CSS selector?
I'd like to select div.myclass but only when it is a descendent of p.
<body>
<div class="myclass">Do not select</div>
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
</div> <!-- added this after question was answered -->
</body>
It's a valid selector, yes; but a div is not a valid child of a p element. So the CSS is valid, but the HTML to which you're applying that selector is invalid.
Incidentally, apart from the nested div within the p, you've also got an unclosed div wrapping the p, which is followed by the </body> tag. So your HTML is doubly-invalid, as tags must be closed in the reverse order in which they're opened.
Addenda, as raised in the comments (I wasn't going to bother adding this originally, instead planning to focus on the syntax of the CSS), the browser (certainly Chromium 24/Ubuntu 12.10) 'rescues' your HTML when it constructs the DOM, so you go from this:
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
To a DOM that looks like this (again, in Chromium 24/Ubuntu 12.10):
<p>
<any>...</any>
</p>
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
<p></p>
JS Fiddle demo.
Therefore if the problem you have, and the reason you're asking the question, is that the CSS isn't selecting/styling an element, the reason is simply because you're using invalid HTML, and the browser's changing your HTML while constructing the (valid) DOM, which means the selector no longer matches what you were originally targeting.
This is why HTML validity rules should be followed, it makes it easier to work with (both today, and in future when you, or someone else has to, revisit).
Oh, and finally, also the & character should not be used in HTML directly, it should be encoded in some way, such as &, because the & character is the first character in HTML character-entity codes. So...you've created triply invalid HTML.
Hi I have a text widget with one line of text "Connect with me on Facebook" that displays at the bottom of this page http://contemporaryinteriordesigns.com.au/. It displays on 1 line for every browser except for IE8.
Does anyone know why IE8 is creating a line break and how I could fix it?
Thanks, Dan
I think IE8 is acting weird because you're styling the text in the div selector. Try wrapping that text into a tag:
<div class="textwidget">
<a><img/></a>
<p>Connect with me on Facebook</p> <!-- Wrap it in a paragraph -->
</div>
The <div> tag defines a division or a section in an HTML document. and The <p> tag defines a paragraph. Wrapping the text in <p> is more semantically correct. Then style the <p> till you get it right. Since I can't edit the code and I'm testing with IETester I can't try it out.
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */