If you're worried about

decibel.places — Mon, 06 Apr 2009 03:17:06 +0000

If you're worried about creating scrollbars for the div with overflow: auto then try using overflow: hidden

overflow: auto does seem to

greg — Sun, 05 Apr 2009 19:46:00 +0000

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.

@webwiz - adding overflow:

decibel.places — Sun, 05 Apr 2009 02:58:00 +0000

@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

greg wrote:

a huge right scroll bar

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.

Ok. I've ripped out all the

greg — Sat, 04 Apr 2009 18:31:00 +0000

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_right DIV 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>

Not really, its a client

greg — Fri, 03 Apr 2009 21:22:37 +0000

Not really, its a client site passworded atm.

I can recreate it on a testing site .. hang on...

Greg describes a known bug

webwiz — Fri, 03 Apr 2009 19:00:24 +0000

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?

I tried your code and I do

decibel.places — Fri, 03 Apr 2009 16:05:49 +0000

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

Try adding overflow: auto;

webwiz — Fri, 03 Apr 2009 00:05:28 +0000

Try adding overflow: auto; to the container.

The DIV has NO width. It's

greg — Thu, 02 Apr 2009 22:45:14 +0000

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>

In presence of italic text in a shrink-wrapping container, sometimes IE7 displays an unnecessary horizontal scrollbar. The same problem occurs with:

* text-align:right
* italics in a right widthless float
* italics in a widthless absolutely positioned box with right:0

I would personally say its

mayo23 — Thu, 02 Apr 2009 21:30:15 +0000

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?