Solved

Firefox Div width not working

Posted on 2006-10-30
12
4,559 Views
Last Modified: 2012-05-05
Hello!
I need to make a div 200px wide.
This class works fine in IE, but in firefox they all but up together, as if the width was set to "auto".
I would normally use a table for this, should I go back to tables?

  .OptText
  {
  font-weight: bold;
  font-size: 12px;
  width:200px;
  color:#696969;
  border-bottom:1px dotted #9C9C9C;
  }
0
Comment
Question by:gjok
  • 4
  • 4
  • 2
  • +2
12 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 17834532
There is nothing in this css that should indicate that the div should not be 200px wide. Are you using an actual <div>, and are you sure there is no display:inline; somewhere that affects your div?

-r-
0
 
LVL 3

Expert Comment

by:www-i-p-mu
ID: 17834594
hi gjok,

try to use this code

.OptText
  {
  font-weight: bold;
  font-size: 10pt;
  width:200px;
  color:#696969;
  border-bottom:dotted;
  border-bottom-color:#9C9C9C;
  border-bottom-width:2px;
  }
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 17834652
That shouldn't make a difference, or can you explain why it should make a difference?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Animasu
ID: 17834704
Roonaan is right, there is nothing in the CSS, could you post more of the code for us to look at?

-Animasu
0
 
LVL 2

Author Comment

by:gjok
ID: 17834820
Heres the entire code - (just a test page currently)
I want it to  display 3 rows of 3 columns, with each col 200px wide.
Also in FF it just gives me 9 rows in 1 column.

I've also tried using <span> to no avail.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

<style type="text/css">

  .OptText
  {
  display:inline;
  font-weight: bold;
  font-size: 10pt;
  width:200px;
  color:#696969;
  border-bottom:1px dotted #9C9C9C;
  }

</style>

</head>
<body>

<div class=OptText>Row 1</div><div class=OptText>1111</div><div class=OptText>aaa</div><BR>
<div class=OptText>Row 2</div><div class=OptText>2222</div><div class=OptText>bbb</div><BR>
<div class=OptText>Row 3</div><div class=OptText>3333</div><div class=OptText>ccc</div>

</body>
</html>
0
 
LVL 7

Expert Comment

by:Animasu
ID: 17834886
In firefox you need to change the <BR> to <BR /> it only works with closed off statements! this might be why your getting 1 line of 9 items!
0
 
LVL 2

Author Comment

by:gjok
ID: 17834969
I changed it to <BR /> but still the same - 9 lines.
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 50 total points
ID: 17835711
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

<style type="text/css">

  .OptText
  {
  display:block;float:left;
  font-weight: bold;
  font-size: 10pt;
  width:200px;
  color:#696969;
  border-bottom:1px dotted #9C9C9C;
  }
  .clear {clear:both;}

</style>

</head>
<body>

<div class="OptText clear">Row 1</div><div class=OptText>1111</div><div class=OptText>aaa</div>
<div class="OptText clear">Row 2</div><div class=OptText>2222</div><div class=OptText>bbb</div>
<div class="OptText clear">Row 3</div><div class=OptText>3333</div><div class=OptText>ccc</div>

</body>
</html>
0
 
LVL 2

Expert Comment

by:SabreCEO
ID: 17835897
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

<style type="text/css">

  .OptText {
    display:block;
    float:left;
    font-weight: bold;
    font-size: 10pt;
    width:200px;
    color:#696969;
    border-bottom:1px dotted #9C9C9C;
  }

  .clear {clear:both;}

</style>

</head>
<body>

<div class="OptText">Row 1</div><div class="OptText">1111</div><div class="OptText clear">aaa</div>
<div class="OptText">Row 2</div><div class="OptText">2222</div><div class="OptText clear">bbb</div>
<div class="OptText">Row 3</div><div class="OptText">3333</div><div class="OptText clear">ccc</div>

</body>
</html>
0
 
LVL 2

Author Comment

by:gjok
ID: 17836549
Thanks Roonaan, that seems to work.
Is this the usual way to do "table-less" tables in css?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 17836764
Yes and no. This is a typical tableless setup. Note however that when you are displaying actual tabular data you can just use a table.
The table-less layout mainly issues against tables used for layouting. For quite some times there would be this sites which huge amounts of html including multiple levels of nested tables. The divs are a good replacement for that kind of sites.
0
 
LVL 2

Author Comment

by:gjok
ID: 17840457
I see. I think I'll do it that way from now on.
Thanks.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question