Page 1 of 1
Inline ignored by Firefox
Posted: Wed Jun 21, 2006 5:55 pm
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;
}
Posted: Wed Jun 21, 2006 5:58 pm
by Benjamin
I'm not sure you can set the height and width on inline elements. You might want to use float instead.
Posted: Thu Jun 22, 2006 2:29 am
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.
Posted: Thu Jun 22, 2006 1:16 pm
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

Posted: Thu Jun 22, 2006 1:27 pm
by Benjamin
LMAO That was the funniest post I have read in a long time.
Posted: Thu Jun 22, 2006 3:10 pm
by Oren
phppage wrote:You know your doing something wrong if it works in IE and not FF

Yep, you got it

Posted: Sat Jun 24, 2006 2:47 pm
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.
Posted: Sun Jun 25, 2006 2:44 am
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.
Posted: Thu Jun 29, 2006 12:54 pm
by phppage
Sorted, many thanks