Inline ignored by Firefox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Inline ignored by Firefox

Post by phppage »

I am trying to set up two lines of text side by side to each other so one list of data on one side of the page and a line of data on the other. The way the pages is layed is outermain nests the innermain which nests the two divs left and right. Left and right are both set to display inline which works fine in IE but are just displayed one on top of the other in Firefox. The text-align is also ignored and just centered instead of aligned left and right as dictated in the CSS.

Code: Select all

body {
	text-align: center;
	min-width: 700px;
	border: 0;
	margin: 0 0;
	font-variant: small-caps;
}

#outermain {
	position: relative;
	top: 0;
	z-index: 1;
	visibility: visible;
	width: 700px;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	border: 0;
}

#innermain{
	position: relative;
	top: 30px;
	left: 0;
	z-index: 2;
	visibility: visible;
	width: 700px;
	height: auto;
}
#left {
	position: relative;
	right: 0;
	z-index: 2;
	visibility: visible;
	width: 343px;
	height: auto;
	text-align: right;
	display: inline;
	padding-left: 3px;
	padding-right: 3px;
	overflow: hidden;
}
#right {
	position: relative;
	left: 0;
	z-index: 2;
	visibility: visible;
	width: 343px;
	height: auto;
	text-align: left;
	display: inline;
	padding-left: 3px;
	padding-right: 3px;
	overflow: hidden;
}
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

I'm not sure you can set the height and width on inline elements. You might want to use float instead.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

astions wrote:I'm not sure you can set the height and width on inline elements. You might want to use float instead.
Totally true, you can't set the width nor the height of an inline element.

P.S I know that sometimes it works... but it shouldn't.
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post by phppage »

astions wrote:I'm not sure you can set the height and width on inline elements. You might want to use float instead.
Cheers folks. Did it by floating left and right instead as suggested. You know your doing something wrong if it works in IE and not FF :lol:
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

LMAO That was the funniest post I have read in a long time.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

phppage wrote:You know your doing something wrong if it works in IE and not FF :lol:
Yep, you got it 8)
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post by phppage »

Having now two div full of contents the text and contents are a bit tight to each other and the opsite sides. Once again I can get this to work in one browser and not the other. The CSS below works in FF as I have used margin to padd out on either side and decrease the overall size of the nested divs. However in IE it pushs both to the right and one on top of the other.

Code: Select all

#outer {
	position: relative;
	top: 30px;
	left: 0;
	z-index: 2;
	visibility: visible;
	width: 700px;
	height: auto;
	margin-left: 0;
	margin-right: 0;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	border: 0 none;
}
#insideleft {
	position: relative;
	left: 0;
	z-index: 2;
	visibility: visible;
	width: 343px;
	height: auto;
	text-align: justify;
	float: right;
	overflow: hidden;
	padding: 0 0 0 0;
	margin: 0 3px 0 3px;
	border: 0 none;
}
#insideright {
	position: relative;
	right: 0;
	z-index: 2;
	visibility: visible;
	width: 343px;
	height: auto;
	float: right;
	overflow: hidden;
	padding: 0 0 0 0;
	margin: 0 3px 0 3px;
	border: 0 none;
}
If I take of the margin and add padding instead the reverse happens, in IE it displays fine but FF one on top the other.

Have read of hacks that can be performed to get IE to go for certain rules and FF for others as in this link http://www.sitepoint.com/article/browse ... -css-hacks but not too sure if I like the idea of that. MS might decide to support child selector in later versions of IE and so would put everything to pot.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I would use conditional comments to feed IE it's own sheet. Its the most reliable and futureproof way I think.

Often you won't need the hacks for margin/padding issues if you make sure you don't apply them at the same time to an element. Just use the child elements for the padding/margin.

Also, I think there are some mistakes in your css. You float the #insideleft to the right?


Whenever you float an element to the left (or right) and give it a margin-left (or margin-right, resp.), give the element a display:inline rule. Otherwise, IE will double the margin (see here. So your rules should be:

Code: Select all

#insideright {
  float:right;
  width:343px;
  margin: 0 3px 0 0; // if you float the other to the left you don't need the margin-left to create the gutter
  display:inline; // no double margin bug in IE
  padding:0;
}
And I think your css can get some cleaning up as there are some redundant rules in them.

Hope this helps a bit.
User avatar
phppage
Forum Contributor
Posts: 126
Joined: Mon Apr 24, 2006 1:47 pm
Location: West Yorkshire, UK

Post by phppage »

Sorted, many thanks
Post Reply