onedee
March 19, 2012, 5:45pm
1
I have this ul li I’m trying to add to the content of a site. Everything looks ok except when I view the page on IE. The title and description are both pulled to the bottom. How can I stop IE from pulling the title and description to the bottom?
<ul class="contentBoxes">
<a href="http://www.mysite.com" target=
"_blank" rel="nofollow"><li><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
<a href="http://www.mysite.com" target=
"_blank" rel="nofollow"><li><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
<a href="http://www.mysite.com" target=
"_blank" rel="nofollow"><li class="nomar"><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
</ul><!--end of boxes-->
ul.contentBoxes {
background-color: #FFFFFF;
float: left;
margin: 10px 0 3px;
width: 960px;
border-color: #D3D3D3;
border-style: solid;
border-width: 1px;
margin-bottom: 3px;
padding: 8px 0;
height:98px;
margin-bottom: 8px;
}
ul.contentBoxes li {
display: block;
float: left;
height: 101px;
margin-right: px;
margin-left: 7px;
width: 310px;
}
ul.contentBoxes li.nomar {
margin: 0;
margin-right: 0px;
margin-left: 7px;
}
ul.contentBoxes li div {
display: block;
float: left;
margin: 15px 0 0 13px;
width: 175px;
}
ul.contentBoxes li img {
float: right;
margin: 10px 30px 0 0;
}
ul.contentBoxes li h4 {
color:#3B6B82 !important;
font-size: 16px;
font-weight: bold;
padding-bottom: 6px;
}
ul.contentBoxes li p {
color: #727272;
float: left;
font-size: 12px;
width: 180px;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 12px;
overflow: hidden;
padding: 0px;
}
p.images {
display: block;
float: left;
margin: 10px 0;
padding: 0;
text-align: center;
width: 100%;
}
can you attach the html and the css file?
There simply isn’t enough width to have the text on the same line
<!doctype html>
<html>
<head>
<title>asdf</title>
<style type="text/css">
*{margin:0;}
ul.contentBoxes {
background-color: #FFFFFF;
float: left;
margin: 10px 0 3px;
width: 960px;
border-color: #D3D3D3;
border-style: solid;
border-width: 1px;
margin-bottom: 3px;
padding: 8px 0;
height:98px;
margin-bottom: 8px;
}
ul.contentBoxes li {
display: block;
float: left;
height: 101px;
margin-right: px;
margin-left: 7px;
width: 310px;
}
ul.contentBoxes li.nomar {
margin: 0;
margin-right: 0px;
margin-left: 7px;
}
ul.contentBoxes li div {
display: block;
float: left;
margin: 15px 0 0 13px;
width: 175px;
}
ul.contentBoxes li img {
float: right;
margin: 10px 0px 0 0;
}
ul.contentBoxes li h4 {
color:#3B6B82 !important;
font-size: 16px;
font-weight: bold;
padding-bottom: 6px;
}
ul.contentBoxes li p {
color: #727272;
float: left;
font-size: 12px;
width: 180px;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 12px;
overflow: hidden;
padding: 0px;
}
p.images {
display: block;
float: left;
margin: 10px 0;
padding: 0;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<ul class="contentBoxes">
<li><a href="http://www.mysite.com" target=
"_blank" rel="nofollow"><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
<li><a href="http://www.mysite.com" target=
"_blank" rel="nofollow"><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
<li class="nomar"><a href="http://www.mysite.com" target=
"_blank" rel="nofollow"><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
</ul><!--end of boxes-->
</body>
</html>
I switched up the HTML too, you had <a>'s as the direct children of <ul> which isn’t allowed. So I put it inside the <li>. Though still invalid because you have it wrapping around a <div> and <p> which are block elements. If you wanted it to encompass the entire box, you could have it sitting empty as the first child of <li> and then give it position:absolute; and give it width/height to overlay the entire box. Of course, the <li> will need position:relative to work :). In the below code, I added CSS for the anchors, along with setting position:relative on the <li>.
<!doctype html>
<html>
<head>
<title>asdf</title>
<style type="text/css">
*{margin:0;}
ul.contentBoxes {
background-color: #FFFFFF;
float: left;
margin: 10px 0 3px;
width: 960px;
border-color: #D3D3D3;
border-style: solid;
border-width: 1px;
margin-bottom: 3px;
padding: 8px 0;
height:98px;
margin-bottom: 8px;
}
ul.contentBoxes li {
display: block;
float: left;
height: 101px;
position:relative;
margin-right: px;
margin-left: 7px;
width: 310px;
}
ul.contentBoxes li.nomar {
margin: 0;
margin-right: 0px;
margin-left: 7px;
}
ul.contentBoxes li div {
display: block;
float: left;
margin: 15px 0 0 13px;
width: 175px;
}
ul.contentBoxes li img {
float: right;
margin: 10px 0px 0 0;
}
ul.contentBoxes li h4 {
color:#3B6B82 !important;
font-size: 16px;
font-weight: bold;
padding-bottom: 6px;
}
ul.contentBoxes li p {
color: #727272;
float: left;
font-size: 12px;
width: 180px;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 12px;
overflow: hidden;
padding: 0px;
}
ul.contentBoxes li a
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
p.images {
display: block;
float: left;
margin: 10px 0;
padding: 0;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<ul class="contentBoxes">
<li><a href="http://www.mysite.com" target=
"_blank" rel="nofollow"></a><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
<li><a href="http://www.mysite.com" target=
"_blank" rel="nofollow"></a><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
<li class="nomar"><a href="http://www.mysite.com" target=
"_blank" rel="nofollow"></a><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
</ul><!--end of boxes-->
</body>
</html>
Hope this helps :).
onedee
March 19, 2012, 7:46pm
4
Awesome, that took care of it, I really appreciate the help.
Glad I was able to help :). You’re welcome.