Topic: IE6 and multi divs in a row

Can't figure out why, but the 4 boxes on the bottom of this page (Services, Markets, Contact Us, About Us) will not line up as well as the menu at the top. This is only an IE6 issue as FF, Opera, Safari and IE7 have no problems.

Can someone take a look at it and see if they spot what it is that makes the last item move to the next line in IE6?

Thanks in advance!!!

Later,

C:\

which page ?

haha. That would help wouldn't it

http://systelprinting.com/newsite/

Later,

C:\

(Edited by CPrompt on 01-08-2007 22:15)

Sure it's not just some stray/default margin or padding issues?

* { margin: 0 !important; padding: 0 !important; } seems to keep them all on the same line; obviously this isn't necessarily the direct problem, but it may be

thanks for the input. Not sure if it was the exact problem but I did fix it.

I changed the display of the boxes on the bottom to display:inline; instead of display:block; and it lined up fine.

The menu on the other hand was playing around with the width's and setting them. I don't really care for the way it looks but it works for now.

On another note, is there a better way to style the boxes on the bottom? They are all the same except for the background color.

Thanks again!

Later,

C:\

quote:

---

CPrompt said:

On another note, is there a better way to style the boxes on the bottom? They are all the same except for the background color.

---

Yes! =)

You've got all this repeated info:

.bsText{
	display:inline;
	float:left;
	margin:0px 22px 0px 22px;
	width:150px;
	height:250px;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	background-color:#999933;
}

.bmText{
	display:inline;
	float:left;
	margin:0px 22px 0px 22px;
	width:150px;
	height:250px;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	background-color:#4263aa;
}

.bcText{
	display:inline;
	float:left;
	margin:0px 22px 0px 22px;
	width:150px;
	height:250px;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	background-color:#e38336;
}

.baText{
	display:inline;
	float:left;
	margin:0px 22px 0px 22px;
	width:150px;
	height:250px;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	background-color:#663300;
}

Instead, make one class with the main info:

.bText{
	display:inline;
	float:left;
	margin:0px 22px;
	width:150px;
	height:250px;
	border:1px solid #fff;
	border-top:none;
}

Then you will still need to soecify the background colors for each individual class:

.bsText{
	background-color:#993;
}

.bmText{
	background-color:#4263aa;
}

.bcText{
	background-color:#e38336;
}

.baText{
	background-color:#630;
}

In your html you simply define both classes - <div class="bxText bsText">

Save a lot of aggravation changing the same piece of code 4 times each time you need to tweak it


I would also suggest a couple of things:

1) make the image in those divs a background image.

2) make that <div class="bHeader"> and header - you are telling it style as a header, so why not just code it as a header?

Also, it has been a little while since I've done any of this, so my memory is faulty, but doesn't setting float on an element force it to display:block, negating the display:inline specified?

thanks DL. I just uploaded a new version of it that fixed the menu part a bit better.

I was going to ask if it is cool to just have one div with an id and a class. Pretty much what you have up there.

On your suggestions, the images will be in the background. Just easier to layout having them in there.
On the second suggestion...good point That would get rid of the extra div in there.

Not sure about the float thing. When I had it specified as "display:block" it was throwing everything off, but when I changed it to "display:inline" everything lined up nicely. So I don't know.

Later,

C:\

Kind of strange, for a few reasons.

First, a <div> is by default set to display:block, so specifying it in the CSS is both uneccessary and (should be) ineffectual.
Second, for an item to float, it must display as a block. Therefore your specification of float:left in your code is either a) doing nothing or b) negating your display:inline.

Either way, it's odd that it should effect anything

I would try removing the display declaration altogether and see if it still works right in all browsers. Either the display of the float is useless in this case, and should be removed.

(Edited by DL-44 on 01-09-2007 21:09)

quote:

---

CPrompt said:

I changed the display of the boxes on the bottom to display:inline; instead of display:block; and it lined up fine.

---

Sounds like "the IE double-margin float bug" .

Ugh. Unfuckingbeleivable. Forgot all about that particular annoyance.

from: http://www.positioniseverything.net/explorer/doubled-margin.html

quote:

---

Dig this. Simply placing {display: inline;} on the float is all that is needed! Yup. Sounds too easy, don't it? Nevertheless it's true that a mere display declaration of "inline" is enough to do the job.

Those who are familiar with the specs on floats are aware that floats automatically become "block" elements, no matter what they were before becoming floats

---

So yeah, don't take that display:inline out of there
(even though it shouldn't be there )

=) I was just getting ready to post an example of it with display:inline and then without it so we could see the difference. I'll bookmark that page for future reference. I actually found it out be trial and error.

Later,

C:\