Solved

Firefox Div width not working

Posted on 2006-10-30
12
4,553 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
Comment Utility
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
Comment Utility
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
Comment Utility
That shouldn't make a difference, or can you explain why it should make a difference?
0
 
LVL 7

Expert Comment

by:Animasu
Comment Utility
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
Comment Utility
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
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 2

Author Comment

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

Accepted Solution

by:
Roonaan earned 50 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I see. I think I'll do it that way from now on.
Thanks.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

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…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

762 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now