IE7 - italics in a float right widthless div
When I have a DIV of undefined width, floated right and containing italic text, IE7 shows a huge right scroll bar.
If I remove the italic, define a width or lose the float it resolves it. But I cannot don't want to change any of that.
Anyone know of a way around this?
mayo23 posted this at 21:30 — 2nd April 2009.
They have: 5 posts
Joined: Mar 2009
I would personally say its the width that's the issue.
Can you post the code and its surrounding code so we can take a closer look?
greg posted this at 22:45 — 2nd April 2009.
He has: 1,581 posts
Joined: Nov 2005
The DIV has NO width. It's an issue with IE, I just wondered if anyone has a solution to it as I don't want to add a width to the div, or remove the italic or remove the float.
So I basically have:
#div_a{
margin: 10px 0px 0px 0px;
background-color: #333;
border-top: 1px solid #666;
}
#div_b{
float: right;
color: #999;
font-size: 12px;
font-style: italic;
margin: 10px 30px 0px 0px;
}
<div id="div_a">
<div id="div_b">rhubarb</div>
</div>
webwiz posted this at 00:05 — 3rd April 2009.
He has: 629 posts
Joined: May 2007
Try adding overflow: auto; to the container.
decibel.places posted this at 16:05 — 3rd April 2009.
He has: 1,494 posts
Joined: Jun 2008
I tried your code and I do not see a scrollbar so maybe it is some other element/container involved. I suspect that is the case, as italicized text can be slightly larger than normal...
I would try overflow:hidden if there is no overflow but you are getting a scrollbar
webwiz posted this at 19:00 — 3rd April 2009.
He has: 629 posts
Joined: May 2007
Greg describes a known bug in IE 7. It only materializes under certain circumstances though. My suggestion worked for me when I came across it. YMMV.
Greg - can you give us a link to the problem page?
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
greg posted this at 21:22 — 3rd April 2009.
He has: 1,581 posts
Joined: Nov 2005
Not really, its a client site passworded atm.
I can recreate it on a testing site .. hang on...
greg posted this at 18:31 — 4th April 2009.
He has: 1,581 posts
Joined: Nov 2005
Ok.
I've ripped out all the code where the issue is. Made a complete test page of it as below, so you can make file called whatever.html, copy paste and see the issue.
I tested the code below in Firefox and IE7 and the problem is still there in IE.
IE gives a horizontal scroll bar for quite a distance but there is nothing there.
Remove the italic from the
footer_rightDIV and it will be fixed!<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/CSS">
body {
margin: 0px;
}
a:link, a:visited{
color: #b70f0e;
text-decoration: none;
font-weight: bold;
}
a:hover{
text-decoration: underline;
}
#footer{
margin: 40px 0px 0px 0px;
padding: 0px 0px 20px 0px;
background-color: #333;
border-top: 1px solid #666;
}
#footer_content{
margin: 40px auto 0px auto;
width: 980px;
}
#footer_left{
margin: 0px 0px 0px 35px;
color: #999;
font-size: 12px;
font-style: italic;
}
#footer_right{
float: right;
color: #999;
font-size: 12px;
font-style: italic;
margin: 10px 30px 0px 0px;
}
</style>
</head>
<body>
<div id="footer">
<div id="footer_content">
<div id="footer_left">
Website Design by <a href="#">Rhubarb</a>
</div>
</div>
<div id="footer_right">
Some text that is the same length as the text that breaks the issue
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
decibel.places posted this at 02:58 — 5th April 2009.
He has: 1,494 posts
Joined: Jun 2008
@webwiz - adding overflow: auto OR overflow: hidden to div#footer_right fixes it...
another possible workaround is to remove the italics style from div#footer_right and place the text in a span container with the italics style
see attached
I misunderstood initially, interpreting your description as a vertical scrollbar on the right side (as in scrollable div or frame)
I am accustomed to hearing the bottom scrollbar named "horizontal scroll bar" since it scrolls horizontally right AND left.
greg posted this at 19:46 — 5th April 2009.
He has: 1,581 posts
Joined: Nov 2005
overflow: auto does seem to resolve the issue.
I tried to avoid using that as I have had issues with it before in DIV's, where it would create additional horizontal and vertical scroll bars.
Thanks for the tips. I have a few workarounds now at least.
It's quite a weird issue.
decibel.places posted this at 03:17 — 6th April 2009.
He has: 1,494 posts
Joined: Jun 2008
If you're worried about creating scrollbars for the div with overflow: auto then try using overflow: hidden
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.