boy oh boy, I need some help (please) - CSS

npish · npish

Hello; I'm rather new to CSS-based layouts, and I'm aware that there are
several issues with respect to bugs in IE, etc. (eg. 'box model' bug), and I'm
wondering if what I'm experiencing derives from one of these problems.

I'm attaching the code below that displays the issue; basically, I'm trying to
create several distinct layout boxes with 5 pixel gaps in between (or 5 pixel
padding surrounding each box); I have set up what seems to be an exceedingly
simple layout and all browsers seem to render it as intended except for IE,
which separates--inexplicably-- the "left" and "main" boxes by 8 pixels instead
of 5---I cannot figure out for the life of me where these extra 3 pixels are
coming from. (Also, this problem seems to deepen when borders are added, which
I also want to include);

Any help is GREATLY appreciated. And if anyone happens to have any suggestions
for a totally different approach to achieving the same end, I'm all ears.
Thanks much;

Here's the code:

/ / / / / / / / / / / / / /

<!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>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>

<div id="container">

<div id="banner">banner</div>
<div id="left">left_nav</div>
<div id="left2">left_nav2</div>
<div id="content">main content</div>
<div id="content2">main content 2</div>

</div>

</body>
</html>

Excavatorak · Excavatorak

I've had the same problem with margins and I think it's easier to just use a spacer than putting browser hack in my code. Have a look at [url]http://nopeople.com/npish/[/url] and see what you think.

npish · npish

thanks so much for your help, Excavatorak; since I made that post, I have done
quite a lot of research on the matter, which is actually very well documented,
and falls under the description of--the dreaded--"IE three pixel jog"; if
you're not already aware of this, apparently IE--and only Win IE-- adds three
extra pixels of padding alongside the content adjacent to a float; in my
example, this was causing the text to "indent" three pixels in the "content"
sections;

there are a variety of ways to approach this bug--and I will post links below
to the most helpful pages that I came across--and I ultimately decided to go
with the option whereby BOTH blocks are left floated ("left nav" and "main
content"), thus eradicating the problem altogether (I also tried various hacks
targeted at WinIE, but the aforementioned approach was the most simple);

I thank you for your input, however, as it is always good to be aware of
multiple solutions; also, I have a question for you regarding the edits you
made to the code: what is the purpose exactly of the "clear" class that you
appended to the bottom of the layout?

Thanks again,

_Nick

///////////////// links documenting the "IE Three Pixel Jog" issue, along with
various solutions:

[url]http://positioniseverything.net/explorer/threepxtest.html[/url]

[url]http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15[/url]

Excavatorak · Excavatorak

To make the #container div enclose the floats. See [url]http://www.cs.hmc.edu/~mbrubeck/clear-after/[/url]

Excavatorak · Excavatorak

Check [url]http://nopeople.com/npish/[/url] now. I used your 3px fix and it works.
Have you tried adding content to it yet?

npish · npish

thanks for the link; I have added content using the double-float approach, and
so far, so good; I'll let you know if any issues arise; my only trouble now is
my template updating/creating files very sluggishly in DW 8, but that's another
issue entirely.........

boy oh boy, I need some help (please) - CSS

Thread Tools

Display

boy oh boy, I need some help (please) - RE: CSS

Re: boy oh boy, I need some help (please) - RE: CSSlayout

Re: boy oh boy, I need some help (please) - RE: CSSlayout

Re: boy oh boy, I need some help (please) - RE: CSSlayout

Re: boy oh boy, I need some help (please) - RE: CSSlayout

Re: boy oh boy, I need some help (please) - RE: CSSlayout

Posting Permissions