I am building new site FF and IE compliant...what is best way to have sentences wrap to fill container in firefox?
This works in IE without any problem.
Currently I am using the following doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
thanks
Tried a test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.articleContent { width:200px;
}
</style>
</head>
<body>
<table><tr><td> <div class="articleContent" > this is a sentence that goes on and on. this is a sentence that goes on and on. this is a sentence that goes on and on. this is a sentence that goes on and on. this is a sentence that goes on and on. </div> </td></tr></table>
</body>
</html>
Renders fine in FF/konq. Sounds like your CSS is getting overridden somewhere.
Try adding the following to your CSS
#container {overflow: auto;}
Or
#container {overflow: hidden;}
You may mean something along the lines
div.mydiv {
width: 400px;
height: auto;
text-align: justify;
overflow: hidden;
}
I don't think there is anything controlling breaks between words: they always occur as necessary.
Related
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>
Here is two spans(in real life a lot of spans) situated at the web page. I would like to set the distance betwwen them. I want to use margin-bottom attribute for this, but I can't see any affect of using it. The spans are still on the previous position. That is wrong.
Here is my code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
.position, .name{
overflow: hidden;
}
.position{
margin-bottom: 40px;
}
</style>
</head>
<body>
<span class="position">Designer</span><br/>
<span class="name">John Smith</span>
</body>
</html>
span is an inline element, not a block element, and they don't respect (vertical) margin. You can use padding or make the span display:inline-block; and then use margins. The latter is now supported in most somewhat newer browsers.
I would say line-height is what you are looking 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
Html=>
<!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>
</head>
<body>
<div style='border: 1px solid red; width: 100px;'>
foo
bar
</div>
something
</body>
</html>
I got problems with IE7 (IE6 support is not needed)
On IE7 rendered html looks like this=>
I need it to look like this (works on chrome/ie8 at the moment)=>
What should i change? :)
You need to float both elements and clear it.
<!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>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
bar
foo
<div style="clear:both;"></div>
</div>
something
</body>
</html>
Or simply put the floating element in front of the normal element like this:
<!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>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
bar
foo
</div>
something
</body>
</html>
Brief Explanation:
Pardon my english and drawing, but here's briefly how float and clearing works in cross browser:
An element can be floated left or right. When you have element floating, the element doesn't push "normal" content downwards. See why -
Float and clear:
Legend: Orange/Float Right, Blue/Float Left, Gray Lines/Clear divider, Red Rect/bounds
In this case, you have 2 elements of one line text - one float left, and the other float right. When floating, it will not push the contents downwards aka taking space. Thus if you do not use clear:both at the gray lines, the contents below will stack upwards between the 2 floating elements and thus may not be what you want.
When you use clear:both below the floats, the content below the floats will be pushed as far as whichever float element is of highest height. This is shown in the diagram's 2nd and 3rd section.
Float only:
Legend: Orange/Float Right, Blue/Normal content, Gray Lines/the line that is divded with the next, Red Rect/bounds
The blue normal content is already by default text-align: left;. Thus it is left oriented. You need the float to be in front of the normal content because you're telling the browser to float from this line.
You should experiment different conditions to see its effect: putting float in front, behind, float left right, clear both, clear right and left.
Always helpfull for all IE-Float-Combos: Give every float-element a display: inline;
Try the clear after fix:
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
In every browser I've used, except ie8, an absolutely positioned element can be positioned according to the closest parent with relative positioning.
The below code shows two divs inside a table. The top div has position: relative, however, the nested, absolutely positioned element does not respect its boundaries (in ie8, it gets positioned at the bottom of the page instead of the bottom of the parent div).
Does anybody know a fix for this?
<style>
#top {
position: relative;
background-color: #ccc;
}
#position_me {
background-color: green;
position: absolute;
bottom: 0;
}
#bottom {
background-color: blue;
height: 100px;
}
</style>
<table>
<tr>
<td><div id="top"> Div with id="top"
<div id="position_me"> Div with id="position me" </div>
</div>
<div id="bottom"> Div with id="bottom"
<p>Lorem ipsum dolor sit amet.</p>
</div></td>
</tr>
</table>
Declare a doctype. I'd encourage you to use the HTML5 doctype:
<!DOCTYPE html>
Add this:
#top {
//height: 100%;
}
#position_me {
//left: 0;
}
It forces IE8 to compute position correctly in quirks mode.
There are many ways to get it:
//zoom: 1;
//writing-mode: tb-rl;
See http://haslayout.net/haslayout
That's becuase you're not using the document type. And IE working in the "quircks" mode.
Try this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
i´d always use the HTML5 doctype, but in my case the only problem was that the parent element needed "position:relative;" specifically set. after that, it worked perfectly fine.
You can also use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This fixed my problem!
Microsoft Says :
In most cases, we recommend that websites use the HTML5 document type
to support the widest variety of established and emerging standards,
as well as the broadest range of web browsers. This example shows how
to specify the HTML5 document type.
For more Info