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;
}
Related
When I create say a div container with a say 100px width and place 2 div elements one floating to the left and the other to the right with a border of 2px and a width of 46px each they should be drawn on the same line side by side covering the whole width of the parent container. This happens in Firefox and Chrome but IE9 draws them on separate lines and in order to have the same effect as in the other browsers I need to specify a width of 102px in the parent element.
Why is that?
Here's the code:
<html>
<head>
<style>
div {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="border: 5px solid;width:100px;height:100px">
<div style='border:2px solid green;width:46px;height:46px;float:left'></div>
<div style='border:2px solid
green;width:46px;height:46px;float:right'></div>
<div>
</body>
</html>
Personally, I'd much rather use display: inline-block than much around with floats.
Anyway, the most likely cause of the problem is the empty whitespace between the two <div> elements. It could be shifting the second one down. Try removing it (ie. <div...>...</div><div...>...</div>)
OK I found a solution to the problem.
What you have to do is you have to add the Doctype declaration e.g.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It doesn't seem to be because of the ie box model bug http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
As this behaviour would result in smaller elements...
I'm really confused...
So I have this Div that has a roll over effect on it where it changes the border color on roll over, in order to make this div a link I've put a link into the DIV and given it a Display: Block property so it fills the div.
What I'm having an incredibly hard time doing is getting the text to align to the bottom left corner of this div while keeping the blocking so the whole roll over area stays a link.
ANY solutions to this problem I'd greatly appreciate, thanks for your help in advance I've been battling this for a while.
http://www.klossal.com/media/index_test.html
this is the test page and this is the 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>
<title>MEDIA</title>
</head>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.borderLeft="10px solid black";
}
function mouseout()
{
document.getElementById("thediv").style.borderLeft="10px solid #898787";
}
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<link rel="shortcut icon" href="\favicon.ico">
<body>
<DIV style="width:200px;height:200px;border-left:10px solid #898787" id=thediv
onmouseover="mouseover()" onmouseout="mouseout()">
<a style="padding-top:1cmpx;" href="www.klossal.com">LINK IT BABY</a>
<DIV>
</body>
</html>
</body>
To align something to the bottom, one can set the position to absolute and bottom to 0px. This will align it to bottom of the first parent that is positioned either absolute or relative.
In your case, set the position of the DIV to relative, the position of the link to absolute and the bottom of the link to 0px:
http://jsfiddle.net/rodin/jxyZz/
And by the way, you can achieve the rollover effect with pure CSS, see the fiddle. If you want to make the entire box a link, the box should be an A and the text a DIV (you did it the other way around).
You could add an additional span element that will positioned a the bottom of the link. Note you could create the hover effect in css as well: http://jsfiddle.net/Te23c/
Html
text
a{
width: 200px;
height: 200px;
display: block;
position: relative
}
CSS
a:hover{
background: lime
}
span{
position:absolute;
bottom:0;
}
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;}
Safari 4 seems to be ignoring element margins unless I add a border.
The following example renders left and right margins but no top or bottom.
Upon adding a border, it renders as expected. Am I doing something wrong or am I going to have to add borders (albeit transparent ones) to every element with margins just for Safari?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style>
body {background-color:#666;}
div {display:block; position:relative; margin:0; padding:0;}
.background {background-color:#990000;}
.foreground {background-color:#fff; margin:10px; padding:10px;}
</style>
</head>
<body>
<div class='background'>
<div class='foreground'>
foreground
</div>
</div>
</body>
</html>
It's a normal weird behaviour calling margin (edited, sorry i'm french) collapse.
To simply avoid it add overflow:auto; on the container.
.background {background-color:#990000; overflow:auto;}
It is called margin collapse. When a top and bottom margin are touching each other, the margins will combine into the greater of the two.
The reason it works "correctly" when you add the border is because you created a 1px separator for the margins so they no longer collapse. Interestingly, if you instead added a empty div with no height/borders, the margins would still collapse because the div takes up 0px space.
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.