18 replies [Last post]
reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

Hi there,

I'm building a site with tab navigation. The code of the site can be found at this url. The code is working fine but ie6 is doing strange things as you can see here

The problem is I don't use fixed width because the navigation is generated dynamical.

Can someone help me with this?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You've got some strange

You've got some strange things going on.

Container is 900px wide.

Header is child of container and also 900px wide but then with float?? and then with left margin of 100px?? neither of which make much sense, and navigation does the same.

IE6 could be
-seeing that 900px plus 100px = 1000px and expanding the container to that width, throwing the rest of the page off
-it could also be doubling that margin to 200px due to double margin float bug
-it could be seeing that almost everything on the page is floated and just generally freaking out. I don't see anything clearing anything other than parents being floats themselves... IE6 and 7 wraps floats if the container has layout whereas all other browsers don't so, wondering (since I can't look myself) how the page seems in IE7?

In any case, you sure have a lot of floats. If you're using floating parents to contain children, there are easier ways of doing that.

No, you shouldn't have to set a width on the li's. You can float them and say width: auto and then do what you want with the a's, or you can set the li's to display: inline and then float the a's if you want-- either should work. So no, the lack of a width on any individual menu item shouldn't be an issue (well, with Opera it sometimes can be). Width of the whole menu itself doesn't have to be stated-- boxes will fill their containers unless told otherwise, and you shouldn't be able to make a menu wider than container. Well, they would, if there weren't all floated. Floats shrinkwrap.

In your IE6 screenshot it looks like actual tab images are generated. In FF2 on Ubutnu (not my normal testing machine) I just get the square with the pointer on hovered items and the one with the label.

Label is a strange choice, as it's a form control. It's a valid child, but still a strange choice.

You can also just keep the normal li and add a class dynamically instead of adding the label dynamically to show current place.

Anyway, with the menu, you probably shouldn't set a width NOR float the header (or, I missed your reason for doing so), and for the menu itself (which, btw, doesn't have to be wrapped in a div-- if you want to go leaner, you can move that class to the ul itself and style that instead) I'd just have the margin-left on it, no float or width (default will then be 100% of its parent, which all blocks do, and then you can add whatever margin you want cause you aren't explicitly stating the width, so everything still fits) and go from there.

If there's some reason you must float it, you can check for the double margin float bug by adding display: inline on the floated box. All modern browsers will ignore it because they know a float is a block, but IE6 magically loses the double-margin and acts more normally. So, it's perfectly safe to add and no need for hacks. If you see no difference, though, don't leave it in cause it's otherwise just bloat.

I'm no expert, but I fake one on teh Internets

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

Hello Stomme poes (ik spreek

Hello Stomme poes (ik spreek nederlands btw:p)

I'm making a complete new page with a new css.
It can be found at This url

I'll keep you posted

A little update:

So as you can see, the floats are gone, but the menu is still giving some problems.
The problems I'm getting is caused by the display:block command. How can I fix this?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If you're going to make the

If you're going to make the anchors display: block, you'll need to float them left too.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Or, just float them as then

Or, just float them as then they're already blocks.

There's also the option of display: inline-block.

I'm no expert, but I fake one on teh Internets

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

I'd like to thank you

I'd like to thank you already for all the help.
But we are almost there

This is the html
This is the css file

There is still 1 little problem with the last 2 elements, when you hover them, they start blinking.
How can I avoid this?
Is my html and css code good now?

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The float needs to go on

The float needs to go on .navigation a, not .navigation a:hover and you can't use in the context you have - it's to be used in form elements only.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

Ok I'll adapt that, are

Ok I'll adapt that, are there other tags I can you beside label? (to adres an active item).

Is a span item valid to adress active items?

Edit: 1 more question, I'm trying to put 2 divs next to each other contentContainer and subcontentContainer.
In some browsers, they are next to each other. But it isn't working in IE.

Am I doing something wrong?

PS. the blinking hasn't been solved:s, could you look at that?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Well, technically label is a

Well, technically label is a valid child of li (li's can have a lot of stuff in them, but I think label is allowed in case you want a form in a list), but span is a much better idea, and is completely legal.

However you don't even need a span-- if you are just setting the :hover properties on a list element to show people where they are, you can use a class, which is generally the better idea.

ul a:focus, ul a:hover, ul li.current {
hover styles;
}

You could also put the class on the anchor too if you wanted.

Not looking at the site, if you are floating two boxes in order to make them sit side-by-side and it doesn't work in some browsers, you make have to make one of them a hair smaller (not so wide). The container has a fixed width. For two floats to fit inside, their total widths (includes padding and margins now) must NOT exceed that container width, and prolly should not equal it either due to browsers sometimes rounding pixels.

IE7 usually is okay with floats, but IE6 has a couple of bugs that can come along.

If you have a float pressing up against one side of its parent container, and it has side margins, IE6 can double3 them sometimes (which means there's now not enough room for two boxes anymore). Setting display: inline on the float declaration magically fixes this, and doesn't affect other browsers because they just know better.

Another bug can happen when you have a floated thingie next to a not-floated thingie. Sometimes there's always this little tiny gap between them (which you can see if you add ugly background colours to those boxes and something else to the parent container). This is 3-pixel-jog and usually the solution is to set Haslayout on the non-floaty box and a negative -3px margin on the floated thing, and you do this hidden from other browsers:

container has set width
thing1 is floated left, width: 200px;
thing 2 is a non-floated sibling, no set width

in most browsers this is ok but IE wants haslayout so since your container has a set width you can calculate a good width for thing2. Setting a width on things is one way to give an element "Layout" for an IE machine.

Then
* html thing1 {
margin-right: -3px;
}

hidden behind the * html hack because here you don't want other browsers reducing that margin.

Your shaking and grooving is what Tyssen already said. I just checked and you're still changing display states on :hover. Usually not a good thing.

You are also still doing the original problem of making your children too big.
container is 950px wide

.navigation{
	margin-top:50px;
	margin-left:100px;
}
.navigation {
	list-style-type: none;
	width: 950px;
}

First, this could be in a single declaration. Sometimes there's a reason to set things in two separate declarations but this isn't one of them : )

Second, look at your math.
.navigation is 950px wide (so, 100% width of .container) but then you've further widened the width with a left margin. As far as a box is concerned, if you add padding OR margin to a child box, then the child box got bigger and in this case it's bigger than the container.

CSS doesn't let you build a Tardis : ) (the inside was bigger than the outside).

You have to get this thing about margins and padding straight. It's very important.

If you need 100px of some sort of space on the left side of the menu, do it like this:

container is 950px wide and has no padding.

.navigation {
list-style: none;
margin-top: 50px;
margin-left: 100px;
width: 850px; (950-100=850)
}

Now, there's a 100px worth of space on the left of the menu, but the menu otherwise fills the rest of the available space.

I'm no expert, but I fake one on teh Internets

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

Hello stomme poes, Thanks

Hello stomme poes,

Thanks for the tips, I'm going to start with the nav.
I did now moved the float property from the hover to the a state.
If you look at the site now, the navigation isn't that good:s. Am I forgetting something?

The duplicated declaration of .navigation was an error of me, fixed it now.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Now it looks more like IE6

Now it looks more like IE6 did back when I first looked.

It'd be a lot easier to steer you in the right direction if I knew what the thing was supposed to look like and do.

Can you make images of what the page should look normally, and on :hover??

I'm no expert, but I fake one on teh Internets

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

As you requested, a

As you requested, a screenshot of the site.
Home is active and hover.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Okay, you're getting

Okay, you're getting there.

.navigation a{
	float: left;
}
.navigation li a{
	line-height: 32px;
	text-decoration: none;
	margin-left: 21px;
	padding-left:15px;
	padding-right:11px;
	width: auto;
	color:black;
}
.navigation li a:hover, .navigation span{
	background-image:url(images/site/nav.gif);
	background-position: center bottom;
	height: 41px;
	float: left;
	display: block;
	width: auto;
	padding-left:13px;
	padding-right:14px;
	margin-left: 20px;
	line-height: 32px;
	text-decoration: none;
	color: white;
}

The goal of a coder is to write as little code as possible.
.navigation a{
}
.navigation li a{
}

These are the same element. So merge them.

.navigation a {
float: left;
width: auto;
text-decoration: none;
padding: 0 11px 0 15px;
margin-left: 21px;<-- when I do my menus, I set equal side-padding and use text-align: center, but that's me
line-height: 32px;
color:black;
}

Now that code will hold for ALL anchors inside .navigation, even the :hovers and :visiteds etc. So now, for hover and for your span, you ONLY need to mention what you want to happen that's DIFFERENT.

.navigation a:focus, .navigation a:hover, navigation a span {
	background: url(images/site/nav.gif) center bottom;
	height: 41px;<--this one you need to be careful with, you have NO height listed on normal links
	padding: 0 14px 0 13px;
	margin-left: 20px;<--not sure why you are changing paddings and heights and margins... ideally they would be exactly the same
	color: white;
}

In any case, you never ever have to say display: block on something you've floated. Floats are blocks by their very nature.

But it seems to work the same in Opera, FF, Safari/Google, and IE7 and 6. So it's what you want?

I'm no expert, but I fake one on teh Internets

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

We are almost there, I did

We are almost there, I did adapt my code but there are still some problems:s

You can find it at this url

The problem I'm having are:

- The active state isn't heigh enough
- the active item isn't side-by-side with the other items.

Normaly I adapted the code (and I created an new css file). Or did I forgot something?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You have the span but no "a"

You have the span but no "a" in it! So while all the a's are getting floated, the span is not.

Now the code I had posted above earlier was still your code, except written leaner and with :focus added. So it still had all your original problems (not that they were too bad).

However I just built it and I removed the span because it was really, really bugging me. Classes are cleaner.

http://stommepoes.nl/temphtml.html

It's always little things that get you, but this was kindof a big one.

I'm no expert, but I fake one on teh Internets

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

Dear stomme poes, It's

Dear stomme poes,

It's almost fine, really, just 1 little remark. When I look at it in IE 6 and 7 there is a little problem

Is this a margin problem?

PS : in school I learned that I had to write the tags like margin-left (long hand property).
They told me that if you use the short hand property, that some browsers don't accept it, is this true?

Thanks for the help!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

reyntjensw wrote:

reyntjensw wrote:

PS : in school I learned that I had to write the tags like margin-left (long hand property).
They told me that if you use the short hand property, that some browsers don't accept it, is this true?

Thanks for the help!

Shorthand declarations are generally safer to use , and should be used unless there is a specific reason to need to target a specific property aspect; however they might well have been referring to the fact that ages ago certain browers didn't work with margins unless they were stated in longhand, but this isn't really an issue as those or that browser (IE5 or was it MacIE?) is no longer worth worrying about.

Re the layout clearly someone didn't check in IE browsers Wink generally I think most of would float the li parent rather than the child anchor simply making that display:block as Tyssen originally suggested, one way or the other some widths will need describing if one wants ultimate happy behaviour.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Heh, I didn't check in ANY

Heh, I didn't check in ANY browsers except the one I built in : ) (I think Opera)

It's called the IE7 "staircase effect" and usually I don't get it when I have the a's floated instead of the li's. Actually, that's why I DON'T float the li's is to get around that.

So, I'd have to look again at what I did and see what I missed. I use width: auto quite regularly simply because lots of menus look like total cwap when the text wraps-- I like having multi-width menu items.

I did recently run into I think a bug with margins and FF2-- I had a page with two tables, one centered with auto-margins (margin: 0 auto) and another table right after who was floated right. In FF2 (and only FF2) the second table centered itself and let the margins inherit from the first table and override the float. FF3 doesn't do this. Weird. But that was a special situation.

*EDIT oh yeah, I forgot something. It's called "say some BS to make IE7 happy" and it goes like this:

between the .navigation declaration and the .navigation li a declaration, add this:

.navigation li {
display: inline;/*almost doesn't matter what you say here but you gotta say something innocuous*/
}

It makes IE7 happy because it often needs to be reassured about things other browsers just know.

I'm no expert, but I fake one on teh Internets

reyntjensw
Offline
newbie
Last seen: 12 years 5 days ago
Timezone: GMT+2
Joined: 2008-09-14
Posts: 9
Points: 0

Thanks all for your help,

Thanks all for your help, certainly stomme poes for the solution to the last problem.