Grady Kelly schrieb:
I took a few list navigation systems from Listamatic ... in IE they get all
jacked up. I found that the
reason to be setting the width to 750px. When I took out the width,
(see the commented code), it works fine in both browsers, except for an
extra 10px in width. I have rattled my brain trying to figure out why
it is doing this, so I thought I would get some second opinions. 750px
is where I would like it to be without jacking up ...
Width set to 750px
http://www.intermixcreative.com/tabbednav_750.html
where to begin.
1)
#navlist {... border-width: 1px; ... padding-bottom: 19px; padding-left:
10px; ... }
Subtract the horizontal padding and the border width: 750-10-2 => insert
width:738px; [1]
2)
#navlist ul, #navlist li { margin: 0pt; padding: 0pt; display: inline;
list-style-type: none; }
#navlist a:link, #navlist a:visited { ... float: left; ...}
In browsers following the standards, the floated links are not enclosed
in navlist, they would stick out of this list, but there is that
padding-bottom: 19px; in #navlist. Delete this. They fall out of the
container [2]. But not in IE. Now we have a dimension applied (738px),
so IE lets the #navlist gain "layout". Any layout element [3] will
contain floats automatically, no way to stop IE from this.
But the other browsers do not contain the floats, and you cannot apply
the padding back cause it breaks your design in IE. So we have to
contain the floats in the normal browsers too. I suggest using
float:left in #navlist [2] for simplicity here.
#navlist {... border-width: 1px; ... /*padding-bottom: 19px;*/
padding-left: 10px; ... /*add*/ width:738px; float:left;}
3)
Now the floats are contained, but there is this visual gap from the
borders preventing the tabs look like tabs, we have to pull the floats
down:
/*add*/ #navlist a {position:relative; margin-bottom:-1px;}
4)
Now to the lower nav. It's now hooked from the floating #navlist, so you
have to clear the float. For the same reasons like above, you have to
modify the width and remove the padding-bottom, and add float.
#navlistlower { /*change*/ padding: 0 0 0 10px; ... /*add*/ width:
738px; clear:left; float:left;}
5)
The floating links in the lower nav get a 4px border-bottom and 2px
padding-bottom on :hover. Because they are contained in IE (width,
float) and now in the other browsers too (float), this will expand the
container on hover. Not good. You have to apply padding-bottom and a
white/or bg-colored border for the stateless links too.
/*insert before the other rules */
#navlistlower a {border-bottom: 4px solid white; padding-bottom: 2px;}
6) clear the following element
h1 {clear:left;}
Ingo
[1] http://css-discuss.incutio.com/?page=BoxModel
[2] http://www.complexspiral.com/publications/containing-floats/
[3] position:absolute; float; display: inline-block; width; height;
zoom; writing-mode: tb-rl; <body>, <img>, <input>, <table>, <td>,
control, <iframe>, <marquee>, <hr>.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
