The below is a much simplified version of the real HTML:
<html>
<head>
<style type="text/css">
h3 { background: blue; }
p {background:grey; }
</style>
</head>
<body>
<h3>The paragraph below will style correctly.</h3>
<p>
As you can see, I am stylish.</p>
<p>
<h3>But this paragraph goes wrong.</h3>
I am sad. I have no style.
</p>
</body>
</html>
Slap that in a browser (have tried Firefox 12 and IE9) and whilst the first paragraph gets a grey background, the second one has none. Note, it doesn't even have a blue background, the styling has been lost. It is my understanding that the background of the h3 should only affect the h3, not travel upward into the parent and affect that.
Have I missed something? Note the above is simplified. I want headers in my paragraphs, but this seems to be impossible without style errors. Is there a mistake in the above? Thanks.
It is not valid markup to have headers within a paragraph which is why the styling is getting screwed up.
You can validate your markup here: http://validator.w3.org/
Related
I've a single line of text written with Myriad Pro vertically centered to parent. In most browsers it renders fine, however in IE9&10 the text is not exactly centered, it shifted up by about 3 pixels from its correct position.
I've found out that the problem is caused by the font, the same case is rendered correctly with Arial. On the following image you can see the problem. Part of the text is selected and
it seems that the text is sticked to the top of the selection for some weird reason and the selection is vertically centered correctly.
Source:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
vertical-align:middle;
height:40px;
line-height:40px;
background-color:red;
font-family:"Myriad pro",arial;
}
</style>
</head>
<body>
<div>LOREM IPSUM</div>
</body>
</html>
Can you please explain me why this happens and how to fix it?
Thanks a lot.
I finally solved the problem using Adobe Typekit. Myriad Pro written with Typekit is correctly vertically centered.
But I still wonder why this happens.
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
I'm learning css and trying to change background-color of all html except one div tag using :not element.
When i put like body:not(.one) it is changing background-color of whole html but not excluding the div mentioned in :not condition. Same problem if i use *:not(.one) Am i doing correct?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body:not(.one)
{
background-color:blue;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="one">
this is first div
</div>
<div >
this is second div
</div>
<p>
this is a paragraph
</p>
</body>
</html>
The background color of your div is transparent. It looks to me like you're setting the body color and then expecting the div to be white or such like.
Given the CSS rule you're using, it's only styling the body tag anyway. You don't need to tell it not to style the div because it wasn't going to anyway.
The not() selector comes in handy when you want to style all divs for example, except ones that have a given class, such as:
div:not(.items){ /* some styles */}
This makes sens because there may be many div that we want to style, except div with the class items.
Your example in the question doesn't make so much sense because you're styling the body of which there's only one.
Your statement actually says:
Style all body tags except any body tag that has the class name one.
The :not selector is a CCS3 feature which not many browser support. Which browser are you testing in?
If all browsers are to be supported you should probably look into a javascript/jquery solution.
This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:
<html doctype etc etc>
<head>
<title and meta tags>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <div> contained an <h1> element with her website's title, but then this element would have to be hidden so that human users only see the background image.
Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?
Have you tried to apply the hide on the H1 itself?
<div id="header">
<h1>Company title</h1>
</div>
Your style would be: #header h1{display:none;visibility:hidden;}
UPDATE
Apparently, we're both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:
#header h1{
width:XXXpx;
hight:XXXpx;
background:url('image/location.png');
text-indent:-9999px;
overflow:hidden;
}
This way your text is actually there on the page and rendered, it's just kind of off screen.
You could replace #header div with h1 if you want this tag, set background image on said h1 and even put some text in it (company name) and use text-indent to hide it.
Plus, in your quest to minimize number of elements you can use body as a wrapper, and if you need full page background just set in on html element.
Set display: none on the H1 tag rather than the div, and use the background image on the div.
The following code demonstrates the issue I'm encountering:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
p
{
background-color:#FFF;
}
</style>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
<p><em>This is an italic sentence.</em></p>
<p><strong>This is a bold sentence.</strong></p>
<p>This is a normal sentence.</p>
</body>
</html>
When this code is viewed in IE7, the Google logo will be displayed to the left with 'white horizontal bars' running through it lined up with each paragraph, displayed on the right.
Removing the first line with the <em> tags causes the lines to disappear. Try it yourself. Remove each of the three lines and see how the bug changes.
What in the world is going on with this?
--
Resolution: hasLayout issue. Adding zoom: 1 attribute to em corrects the issue.
This is happening because of the floated image.
When an image is floated it technically does not have any layout of its own. The white bars are the <p> tags, since in CSS you gave them a background of #FFF.
For IE7 is thinks the <p> tags are actually starting at the start of the page on the far left, so it starts them there, but simply bumps the content past the floated image, leaving funny white bars overtop of the floated image.
I would try getting around it by giving your <p> tags left margin. If you make enough left margin to get past the image you shouldn't get those bars anymore.
So try something like...
p{ background-color: #fff; margin-left: 300px; }
You can adjust the left margin but something along those lines should get rid of the white bars for you.
Not sure why it's happening, but there are many ways of making sure it doesn't, including adding display: inline-block to the em.