Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

display:inline in Firefox

Status
Not open for further replies.

kconmle

Programmer
Oct 20, 2009
18
US
Is there some reason using display:inline in FF would make the browser ignore the rest of the CSS (i.e. width, ...)
 
Is there some reason using display:inline in FF would make the browser ignore the rest of the CSS (i.e. width, ...)

Yes - because any width specified on an inline element should be ignored, so Fx is doing the right thing.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
So there is no way to have an inline element with a width?? That does not make sense....

the code is just:

#content {
display:inline;
width: 300px;
.....
}
 
Here is my issue - image a table with 2 rows - the first one is colspan = 2, the second one is two cells... now the table is centered in the browser: width 95%, height 95%...

I want to do this with divs and it needs to show well in IE and FF... any guidance? I can get it to show fine in one - but not the other, then I add padding to the 2nd row divs and it throws the width and height off....
 
Do you have a complete and valid DOCTYPE? Do both your HTML and CSS validate?

If the answer to any of those is 'no', then fix the problems and if you still can't get it, post a URL to the page, or the code itself.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Try this:
CSS:
*{
margin:0px;
padding:0px;
}

html,body{
width:100%;
height:100%;
}

#container{
width:95%;
height:95%;
background-color:#DDDDDD;
border:1px solid #888888;
margin-left:auto;
margin-right:auto;
}

#colspan2{
width:100%;
background-color:#994400;
height:50%;

}

.acell{
width:50%;
height:50%;
float:left;
}

#cell1{
background-color:#AAAAFF;
}

#cell2{
background-color:#AAFFAA;
}

HTML:
<div id="container">
  <div id="colspan2">Colspan 2</div>
  <div id="cell1" class="acell">Cell One</div> <div id="cell2" class="acell">Cell Two</div>
</div>



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
works great! not centered in IE - but looks great!
 
so - text-align:center takes care of IE...

now this is where I hate CSS - I throw in a border and it throws everything off!!!
 
It was perfectly centered in IE for me. What doctype do you have in your page?

As for the borders, since they add to the boxes dimensions, they no longer fit in the alloted space. That is, their width is now 50% of the parent container, plus the width of the border. So the second cell drops under the first one.

You can reduce the width for the 2 bottom cells to compensate.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top