Solved

Firefox Div width not working

Posted on 2006-10-30
12
4,556 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

776 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