[SOLVED] Question about css width properties - differences between IE and Firefox Ren [Archive]

View Full Version : [SOLVED] Question about css width properties - differences between IE and Firefox Ren

bolucpap

March 31st, 2008, 01:34 PM

Hi,
Recently, I've been trying to port an application to be available on both IE (which I used when developing the original) and Firefox. My problem is this: The code:

<html>
<head>
<style type="text/css">
body
{

}
.row
{
display:block;
border-top:1px solid #0000FF;
border-bottom:1px solid #0000FF;
border-left:1px solid #0000FF;
border-right:1px solid #0000FF;
width:100%
}
.cell1
{
border-top:1px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
border-right:1px solid #FF00FF;
display:inline;
width: 20%;
top:0px;
height: 36px;
left: 0px;
}
.cell2
{
border-top:1px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
border-right:1px solid #FF00FF;
display:inline;
WIDTH: 20%;
top:0px;
height: 36px;
left: 0px;
}

</style>
</head>
<body>
<div class="row">
<span class="cell1">
Lorem
</span>
<span class="cell2">
ipsum
</span>
</div>
<div class="row">
<span class="cell1">
dolor
</span>
<span class="cell2">
sit amet
</span>
</div>
</body>
</html>

renders as the following on IE6 and Firefox 2 (see attachments). The effect I want to achieve is the one I see in IE, but cannot for the life of me get Firefox to display it. What should I change in the stylesheet/code?

Thanks a lot in advance.

Boluc Papuccuoglu

LaRoza

March 31st, 2008, 01:41 PM

Are you taking the advice to not use tables to an extreme? Tables are for tabular data...

bolucpap

March 31st, 2008, 02:06 PM

Indeed I am trying to avoid using tables, but not just out of zeal, there is some content I want to place in the page that won't look good on tables. Isn't there a way to display this on Firefox without using tables?

ilrudie

March 31st, 2008, 02:41 PM

<div class="row">
<div class="cell1">
<p>Lorem</p>
</div>
<div class="cell2">
<p>ipsum</p>
</div>
</div>
....

Have you tried something like this?

You can also try the w3c html and css validation. (http://validator.w3.org/)
It might catch some nonstandard things that would mess with firefox.

bolucpap

March 31st, 2008, 02:57 PM

Unfortunately, that (placing the text in <p> tags) produces something like the attached picture in firefox. IE shows no difference.

ilrudie

March 31st, 2008, 03:01 PM

Hmmm... Perhaps the <a> tag is the proper one to use then. Also did you change the <span> tags to <div> tags?

bolucpap

March 31st, 2008, 03:12 PM

Unfortunately the <a> tag does not affect things, and changing the spans to divs does not have any effect unless I delete the 'display:inline' parts on the stylesheet. It seems that firefox (and now that I have tested it, Opera) ignores width and height properties for inline elements. Unfortunately, there is nothing in the documentation I've read (and tutorials I've seen in w3schools.com and similar sites) that mentions this. I am sure I am missing something basic, but cannot figure out what.

March 31st, 2008, 03:27 PM

I don't know enough about CSS and W3C specs to be sure that I am interpreting this correctly, but take a look at section 10.2 of this document (http://www.w3.org/TR/CSS21/visudet.html). In particular,

This property specifies the content width of boxes generated by block-level and replaced elements.

This property does not apply to non-replaced inline-level elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).

ilrudie

March 31st, 2008, 03:38 PM

Turns out most browsers do not allow width on inline elements. display:inline-block may work for you. This allows width and height like block but allows it to sit on the same line.

bolucpap

March 31st, 2008, 03:42 PM

Thank you, before reading your reply I had found a post in another forum to similar effect. Sometimes discussing things with people makes you realize what assumptions you are making. I have gone back to the code and made adjustments as follows.

<html>
<head>
<style type="text/css">
body
{

}
.row
{
display:block;
border-top:1px solid #0000FF;
border-bottom:1px solid #0000FF;
border-left:1px solid #0000FF;
border-right:1px solid #0000FF;
width:100%;
height:38px
}
.cell1
{
border-top:1px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
border-right:1px solid #FF00FF;
display:block;
width: 20%;
top:0px;
height: 36px;
left: 0px;
}
.cell2
{
position:relative;
border-top:1px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
border-right:1px solid #FF00FF;
display:block;
WIDTH: 20%;
top:-38px;
height: 36px;
left: 20%;
}

</style>
</head>
<body>
<div class="row">
<span class="cell1">
<a>Lorem</a>
</span>
<span class="cell2">
<a>ipsum</a>
</span>
</div>
<div class="row">
<span class="cell1">
dolor
</span>
<span class="cell2">
sit amet
</span>
</div>
</body>
</html>

To summarize, I declared the purple "cells" as block elements, but specified the top and left properties of the second cells relatively, moving it upwards and to the right. I also had to explicitly state the height of the "row" class. All in all, I achieved the desired effect with three extra lines of style code. This is less than the markup I would have had to use if I used tables, so I will not revert back to using tables. Thanks for the help, everybody.

March 31st, 2008, 03:44 PM

In .cell1 and .cell2, try changing display:inline to

display: -moz-inline-box;
display: inline-block;

I found this here (http://www.rikkertkoppes.com/thoughts/2004/11/14/). (Scroll down to 1. Update 2005-02-06.) I don't know what this will look like in IE.

Welcome to the wild and wacky world of browser inconsistency and incompability.

EDIT: This was written before your last post; the change refers to your original post.

tvrg

March 31st, 2008, 03:45 PM

try adding display:row instead of display:block to your rows and display:table-cell isntead of inline for your cell's

bolucpap

March 31st, 2008, 10:02 PM

Thanks WW. The workaround I posted before broke the IE display, the rows started displaying as two cell heights thick. This is a more robust solution, and I don't have to fiddle with moving the cell blocks up and right. It's unfortunate that not all browsers support inline-block, despite it being in the specification (or isn't it? I have to admit the specification reads like lawyer speak to me, which may be its original intent, being a specification and all).