The following html(5) produces a black line at the bottom of the div. This is caused, because the div get's heigher than the contained image. But I wonder why this happens?
<!DOCTYPE html>
<html>
<body>
<div style="position:absolute; background:#000;">
<img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="height:50px;">
</div>
</body>
</html>
I dont think it's a browser bug, because the result is the same in Firefox, Chrome and Opera. It renders fine when a XHTML doctype is used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
BTW: It does work in html5 too, but only when I set display:block for image. Is this really needed?
It's not the XHTML doctype as such that changes it, it's more like strict vs transitional.
Using a XHTML 1.0 transitional doctype puts the browser into limited-quirks mode, whereas the HTML5 style doctype selects standards mode. The vertical-align of images is different between the two modes.
You can see the same black line if you use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">which also puts the browser into standards mode.
There are a number of ways to remove the black line. One is to set the img to display:block.
Another is to set the img to vertical-align:bottom.
The black bar is your background color showing. If you don't want to see the black, one option is to remove the background:#000 from your div's style attribute.
Also, why are you using height: 50px in your style attribute? If you're trying to resize the image itself, use the height attribute instead.
OPTION 2:
This code seems to also remove the black background form showing:
<!DOCTYPE html>
<html>
<body>
<div style="background:#000;">
<img src="http://images.google.com/intl/de_ALL/images/logos/images_logo_lg.gif" style="position:absolute; height: 50px;">
</div>
</body>
</html>
Related
I'm currently trying to make a div that is 100% as wide as the whole screen. And I did it by writing the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>100% width</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html,body {
padding:0px;
margin:0px;
width:100%;
}
</style>
</head>
<body>
<div style="background-color:yellow;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
It works fine in normal zoom settings but when I do max zoom in (FireFox 6.0.2) the letters inside the div outgrows the yellow box. Is there a way for the yellow box to extend to the end of the window as well?
Thanks.
You can force the really long word to wrap with:
word-wrap: break-word;
in your div style.
Does it really matter what happens at maximum zoom though?
Option 1
If you want to keep the text within the yellow box try adding this CSS styling.
div {word-wrap: break-word;}
It will cause the text to go to the next line rather than continue.
Option 2
OR you could try hiding the content that goes past the div border using CSS styling
div {overflow:hidden;}
On a anchor-tag with a url to a external site we have a little icon that indicates that this is a link to a external site. Now this Icon is included via a additional span-element around the link-text and displayed via CSS background-image with position 100% 50% to always be at the end of the text and a padding-right for the text-gap between link and the following text
now this works fine in every browser — as long as the link-text is not longer than 1 line … if it is on multiple lines, the whole thing works still fine everywhere, except IE7 (IE6 is not supported by the project)… IE7 displays the Icon at the end of the first line and a few pixels to the bottom, instead of at the end of the link-/span-text on the second or third line…
Sometimes a picture says more than 1000 words: http://img859.imageshack.us/i/spdexternalerror.jpg/
HTML-Code: <span class="external">Link-Text to multiple lines</span>
CSS to the span-element: {background: url(/#/icon-new-window.png) no-repeat center right; padding-right: 14px;}
adding zoom:1 CSS property resolves this problem at most situations
Multi-line background is a problem for IE7. The correct way to do what you want, without adding extra markup, is to use CSS :after however :after is not supported natively in IE6 or 7 (support was added in IE8). If you don't mind using JavaScript to add :after support to IE7 then you could use the ie7-js library (also see this question :after and :before css pseudo elements hack for IE 7)
Using that library, the following is working for me in IE7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
p {
width:100px;
border:1px dashed blue;
}
a.external:after {
content:url(http://www.knowledgewand.com/images/icon_new_window.gif);
}
</style>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<p>
Link-Text to multiple lines
</p>
</body>
</html>
When I use overflow:hidden for div which is positioned absolute (for menu), other div overlaps. Here is the code. It works fine in FF3. Any help appreciated. Please note that html should be as it is. Also if you can provide solution, just by changing styles of menu div (the div which contains menu text) it is more helpful for me. Thanks in advance
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="position:relative">
<div>
<div style="height:20px;overflow:hidden">
<div style="position:absolute;width:200px;height:100px;top:0px;background-color:black;z-index:1">menu</div>
</div>
</div>
<div style="position:relative;height:200px;background-color:gray;"></div>
</div>
</body>
</html>
Apparently, FF2 has some known issues with overflow and z-index. (See this google search)
There's probably a workaround, but we'll have to know what you're trying to accomplish with overflow: hidden. It's hard to tell from your code because it isn't really having an effect—removing overflow:hidden entirely gets the result you're going for.
Can we give width and border to <body> and use in place of Container div? see this example
see source code of this file and code of file is also perfectly W3C valid. and looking same in IE 7 and firefox 3.5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<title> Width in body</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html { background-color: #00f; }
body{background: #cd5c5c;width:800px;height:400px;border:1px solid;color: #fff;margin:0 auto;}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Your example answers your question! Body is a block element like any other. It has width, height, padding, margin and border properties.
Note that it is essential that the page is rendered in strict, rather than quirks, mode to be able to treat the body element as a block-level element; otherwise it is treated as the documentElement and all bets are off. – NickFitz
Then can we use body in place of #container div? – Jitendra
Nice theory. Shame about Microsoft. – David Dorward
#Jitendra: you can, but be thorough with your cross-browser testing, particularly when it comes to scrolling :-) – NickFitz
What is the difference between viewport and body? – Jitendra
the viewport is the visible area of the browser window which displays the document. The body is an element in the document. In quirks mode, the body will also be treated as the documentElement: that is, the root node of the document, which will fill the window, and if necessary will be able to be scrolled. In strict mode, the html element will be treated as the documentElement, and the body will be a child of that. As an experiment, change your test page by adding the style rule html { background-color: #00f; } - you will see that the html element contains the `body' – NickFitz
Let's say I have the following minimalistic HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body style="background-color:silver; padding:0px; margin:0px;">
<div style="background-color:Lime;">
<h1>Title</h1>
</div>
</body>
</html>
There's a gap at the top of the page, it seems as if only the H1's background is colored in lime, or as if the H1 is pushing down the parent div tag. However, if I add "border:solid 1px red;" to the div's style the entire div's background is in lime, not just H1's. I tested it with IE8, FF3.5, and Chrome. They all have the same behavior. If I remove the XHTML strict DocType it works as "expected." What am I missing? Thanks.
What I was "missing" was the concept of collapsing margins. By specifying a border for the div I effectively un-collapse the margins which gives me the expected result. The other method to un-collapse would be to give the div at least a padding of 1px. Unfortunately neither of these is acceptable in my situation, i.e. I don't want a border or padding on the div, so I will have to find a different solution, but at least it explains the behavior.