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>
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;}
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.
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>
I'm trying to make a page with an image meant for being loaded in an iframe. But there is 4px of space at the bottom of the body tag that I can't seem to get rid of. Heres my simplified source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body, a, head, img
{ margin: 0;
padding: 0;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>
You'll notice if you shrink your window within 4 pixels of the bottom of the image, you'll get a scroll bar. Where the crap is that space coming from?
The image is placed on the base line of the text line that it's in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like g and j. With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers.
One solution is to make the image a block element, that way it's not part of a text line, and doesn't have a space below the base line. The anchor tag is an inline element and it can't have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also:
a, img { display: block; }
(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can't contain inline elements directly. Making the anchor tag a block element using style doesn't help, the structure has to be valid also before the style is applied.)
All browsers come with default styles. Although you are resetting your tags for the page, there's no such tag as image in your CSS.
I suggest using a more global reset stylesheet. I like the one from Eric Meyer. Something as simple as this can help level the playing field between browsers.
replace image with img on your style
Put your "a" and "img" tag inside a div like this
<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>
This is a follow-on to hallie's answer, here is a full working example that has been updated in a number of ways to make it actually XHTML 1.0 Transitional compliant as well as not showing the spaces. Make sure NOT to introduce whitespace after the </a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is the title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
body, a, head, img
{
margin: 0px;
padding: 0px;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div>
</body>
</html>
All Internet browsers have a small bit of padding they add to the pages themselves. One surefire way to get rid of it is to simply nuke all margin and padding from every element.
*
{
margin: 0px;
padding: 0px;
}
Of course, this will remove margin and padding form every element on your pages, so use this with caution, overriding this default whenever you need padding and margin (every other selector has a higher priority than this global one, so it's easy to do).
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