Forum Moderators: not2easy
Is it possible to stop IE from wrapping divs if these do not have a specific width attributed to them and their containers?
It seems like there is no solution for this problem, I have a container which holds a horizontal navigation made with ULs/LIs etc.
There are 3 divs inside each <a> element, all of these are aligned to left.
.sides controls the edges for the navigation which have to change colour when the mouse is over the nav <a> elements (I ommitted the hover state here in this example to simplify things).
.links is for the text content in the <a> tag, this will also change colour once the mouse has moved over it but it's a different colour from the edges.
The only elements which can have fixed widths are the edges and the container. All the rest has to be flexible as I don't know how big the text will be inside each <a>.
Everything works perfectly in FF but IE doesn't like the fact that the divs have no widths so I fixed this problem by applying the
* html ul li a {
width:1%;
}
hack, but this causes another problem as now the a element is trying to be as small as possible causing all the divs to drop under one another.
I have pasted the code of an example so that you can see what is going on.
<!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=iso-8859-1" />
<title>Wrapping Problem</title>
</head>
<style>
body{
background-color:#99CCCC;
margin:30px;
font-family:"Courier New", Courier, monospace;
font-size:small;
color:#333333;}
#container{
width:700px;
background-color:#FF9900;
height:40px;
margin:0;
padding:0;
}
ul{
list-style-type:none;
padding:0;
margin:0;}
li{
float:left;
background-color:#FFCC33;
margin:0;
padding:0;
margin-right:5px;}
li a{
display:block;
}
li a .links{
padding:4px;
margin:4px;
background-color:#66FFCC;
float:left;
}
li a .sides{
width:8px;
height:30px;
background-color:#FF6633;
float:left;}
* html ul li a {
height: 1%;
width:1%;
}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-table;}
/*IE-mac \*/
* HTML .clearfix {height: 1%;}
/* End IE-mac */
/* End clearfix */
</style>
<body>
<div id="container">
<ul>
<li><a href="" class="clearfix"><div class="sides"></div><div class="links">Homepage</div><div class="sides"></div></a></li>
<li><a href="" class="clearfix"><div class="sides"></div><div class="links">About</div><div class="sides"></div></a></li>
<li><a href="" class="clearfix"><div class="sides"></div><div class="links">Articles</div><div class="sides"></div></a></li>
<li><a href="" class="clearfix"><div class="sides"></div><div class="links">Studies</div><div class="sides"></div></a></li>
<li><a href="" class="clearfix"><div class="sides"></div><div class="links">Contacts</div><div class="sides"></div></a></li>
<li><a href="" class="clearfix"><div class="sides"></div><div class="links">Legal</div><div class="sides"></div></a></li>
</ul>
</div>
</body>
</html>
Would anyone know how to solve this problem?
Cheers!
yes it's possible, however you have far too much code there, and nested wrongly at that ;) (<div>'s should not be nested inside <a> elements) Rather than fix it to work with the code you have I have done something similar which might help you get started..
I've used coloured borders for the side bit's although if it's actually images you want in there you would need to nest another div..
HTML:
<div id="container">
<ul>
<li><div class="sides"><a href="#">Homepage</a></div></li>
<li><div class="sides"><a href="#">About</a></div></li>
<li><div class="sides"><a href="#">Articles</a></div></li>
<li><div class="sides"><a href="#">Studies</a></div></li>
<li><div class="sides"><a href="#">Contacts</a></div></li>
<li><div class="sides"><a href="#">Legal</a></div></li>
</ul>
</div>CSS:
body{
background-color:#99CCCC;
margin:30px;
font-family:"Courier New", Courier, monospace;
font-size:small;
color:#333333;
}#container{
width:700px;
background-color:#FF9900;
height:40px;
margin:0 auto; /* to center container */
padding:0;
}ul{
list-style: none;
padding:0;
margin:0;
float: left; /* to contain floated children without the hack */
width: 100%;
}li{
float:left;
background: #fc3;
}div.sides {
float: left;
/* borders create red sides */
border-left: 8px solid #f63;
border-right: 8px solid #f63;
/* padding creates orange gap */
padding-left: 4px;
padding-right: 4px;
margin-right: 5px;
height: 40px; /* IE needs dimension so make it the same as container height */
}div.sides a{
display:block;
margin: 5px 4px;
height: 30px; /* less 10px for top/bottom margin ~ IE requires a dimension */
padding: 0 4px;
line-height: 30px; /* to center text vertically without padding */
background:#66FFCC;
float:left;
display: inline; /* to avoid double-margin bug */
}
Thats just an idea so you see how the nesting might work, it's still not perfect. If you are using background images in those borders (I'm assuming that's why you were trying to uses multiple divs?) the HTML might look like this:
<li><div class="sides"><div><a href="#">Homepage</a></div></div></li>
Then you wouldn't use borders but instead increase the padding to leave a big enough gap for your image put left image as background to
div.sidesdiv.sides divsort of like:
div.sides {
float: left;
padding-left: 12px;
background: #dad url(image.gif) no-repeat top left;
margin-right: 5px;
height: 40px;
}div.sides div {
float: left;
padding-right: 12px;
background: #0f0 url(image.gif) no-repeat top right;
height: 40px;
}
anyway just some ideas for you to play with, hope it helps
Suzy
