the page is at
<!-- m --><a class="postlink" href="http://andrei.hotusa.org/travel.html">http://andrei.hotusa.org/travel.html</a><!-- m -->
everything except the header and the main nav is in a div "text". this has 4% left padding.
What IE seems to be doing is take about half of this padding and add it to the padding of every element inside the text div.
Then the strange thing.
I added to the secondary (horizontal) nav this code:
#menu li a:hover
{
background:#99BBFF;
}
On mouseover, IE will, as expected, change the background.
But it will also stop adding the extra padding to HALF the elements inside the "text" div so that the top half of the div will jump left and stay that way.
Removing the DTD - xhtml strict - will solve this problem (but it will make the width of the div too small)
How crazy is this?
(BTW the site is also somehow interfering with the ads the hosting provider is placing on my site, I think that's their problem and I've already contacted them to see what they have to say)The link you posted is dead. Not knowing your code, check out the Creeping Text Bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/creep.html">http://www.positioniseverything.net/explorer/creep.html</a><!-- m -->) in Internet Explorer at PositionIsEverthing.net (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->). Having a left border and bottom padding will trigger this bug.thanks, I've never stumbled upon any bug so I didn't even know such things existed.
The link works fine for me, perhaps the server was down when you tried it. It seems to be a different bug triggered by:
<div width
<div>
a:hover background
element padding
</div>
</div>
if you can understand my code shorthand. i have removed the width and used margin-right to control the width. it is still adding the extra padding (it's about 10px on my resolution, slightly more on higher resolutions), but that doesn't bother me since the jump has vanished.As for the problem with the banner, it seems that defining a generic "img" or "table" (instead of ".divname img") will influence their banner. They said their code is fine as it is. But I think their css should override mine and set the padding, border, whatever, to 0 if they want it 0. Opinions on this anyone?Maybe my IE has gone mad too, because I can't see any problem with the page at all
And I know why the padding doesn't work for the hosting company's tooltips. In the style declaration for .tooltip, the padding is set like this: padding: 5 5 5 5;. It's missing the unit of measure. Internet Explorer running in Quirks Mode (no doctype) will assume pixels is the desired unit of measure. When the doctype is added, however, Internet Explorer (and all other browsers) render the page in Standards Mode - where the unit of measure is required for all non-zero values.
Syntax and Basic Data Types: 4.3.2 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/syndata.html#length-units">http://www.w3.org/TR/CSS21/syndata.html#length-units</a><!-- m -->)
From w3.org
Lengths refer to horizontal or vertical measurements.
The format of a length value ... is a <number> ... immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.
In case your web hosting company wants proof
If that doesn't cure the problem, you're looking at a selector precedence issue, where a combination of CSS selectors in your CSS file takes precendence over the selector(s) in their CSS file. Have them place the "px" after each length for the padding (padding: 5px; would work just fine) then trouble-shoot CSS precendence issues after that.well it was fixed last time you looked at it. unfortunately my 'fix' --removing the width and unsing right margin instead- ruined the positioning in firefox, so now i've restored the original with the bug while i think of something else(other than removing the a:hover background).EDIT: You may want to try floating your tabs left instead of having them be inline display. I thought I figured it out, but then the bug was still there.
Absolute positioning for the left menu, left and right margin for the text div and a few minor adjustments. I was trying not to use absolute positioning because it looks different with and without the ads, but this is the only thing I can find that will fix it without causing other problems.
<!-- m --><a class="postlink" href="http://andrei.hotusa.org/travel.html">http://andrei.hotusa.org/travel.html</a><!-- m -->
everything except the header and the main nav is in a div "text". this has 4% left padding.
What IE seems to be doing is take about half of this padding and add it to the padding of every element inside the text div.
Then the strange thing.
I added to the secondary (horizontal) nav this code:
#menu li a:hover
{
background:#99BBFF;
}
On mouseover, IE will, as expected, change the background.
But it will also stop adding the extra padding to HALF the elements inside the "text" div so that the top half of the div will jump left and stay that way.
Removing the DTD - xhtml strict - will solve this problem (but it will make the width of the div too small)
How crazy is this?
(BTW the site is also somehow interfering with the ads the hosting provider is placing on my site, I think that's their problem and I've already contacted them to see what they have to say)The link you posted is dead. Not knowing your code, check out the Creeping Text Bug (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/creep.html">http://www.positioniseverything.net/explorer/creep.html</a><!-- m -->) in Internet Explorer at PositionIsEverthing.net (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->). Having a left border and bottom padding will trigger this bug.thanks, I've never stumbled upon any bug so I didn't even know such things existed.
The link works fine for me, perhaps the server was down when you tried it. It seems to be a different bug triggered by:
<div width
<div>
a:hover background
element padding
</div>
</div>
if you can understand my code shorthand. i have removed the width and used margin-right to control the width. it is still adding the extra padding (it's about 10px on my resolution, slightly more on higher resolutions), but that doesn't bother me since the jump has vanished.As for the problem with the banner, it seems that defining a generic "img" or "table" (instead of ".divname img") will influence their banner. They said their code is fine as it is. But I think their css should override mine and set the padding, border, whatever, to 0 if they want it 0. Opinions on this anyone?Maybe my IE has gone mad too, because I can't see any problem with the page at all
And I know why the padding doesn't work for the hosting company's tooltips. In the style declaration for .tooltip, the padding is set like this: padding: 5 5 5 5;. It's missing the unit of measure. Internet Explorer running in Quirks Mode (no doctype) will assume pixels is the desired unit of measure. When the doctype is added, however, Internet Explorer (and all other browsers) render the page in Standards Mode - where the unit of measure is required for all non-zero values.
Syntax and Basic Data Types: 4.3.2 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/syndata.html#length-units">http://www.w3.org/TR/CSS21/syndata.html#length-units</a><!-- m -->)
From w3.org
Lengths refer to horizontal or vertical measurements.
The format of a length value ... is a <number> ... immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.
In case your web hosting company wants proof
If that doesn't cure the problem, you're looking at a selector precedence issue, where a combination of CSS selectors in your CSS file takes precendence over the selector(s) in their CSS file. Have them place the "px" after each length for the padding (padding: 5px; would work just fine) then trouble-shoot CSS precendence issues after that.well it was fixed last time you looked at it. unfortunately my 'fix' --removing the width and unsing right margin instead- ruined the positioning in firefox, so now i've restored the original with the bug while i think of something else(other than removing the a:hover background).EDIT: You may want to try floating your tabs left instead of having them be inline display. I thought I figured it out, but then the bug was still there.
Absolute positioning for the left menu, left and right margin for the text div and a few minor adjustments. I was trying not to use absolute positioning because it looks different with and without the ads, but this is the only thing I can find that will fix it without causing other problems.