Topic: IE6 and multi divs in a row Pages that link to <a href="https://ozoneasylum.com/backlink?for=28802" title="Pages that link to Topic: IE6 and multi divs in a row" rel="nofollow" >Topic: IE6 and multi divs in a row\

 
Author Thread
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-08-2007 19:09 Edit Quote

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:\

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 01-08-2007 19:31 Edit Quote

which page ?

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-08-2007 22:15 Edit Quote

haha. That would help wouldn't it

http://systelprinting.com/newsite/

Later,

C:\

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

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 01-09-2007 05:23 Edit Quote

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

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-09-2007 14:46 Edit Quote

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:\

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-09-2007 19:24 Edit Quote
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:

code:
.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:

code:
.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:

code:
.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?

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-09-2007 20:04 Edit Quote

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:\

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-09-2007 21:09 Edit Quote

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)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 01-09-2007 23:25 Edit Quote
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" .

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-09-2007 23:42 Edit Quote

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 )

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-09-2007 23:51 Edit Quote

=) 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:\



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu