?
Solved

Firefox Div width not working

Posted on 2006-10-30
12
Medium Priority
?
4,563 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 200 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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month8 days, 2 hours left to enroll

765 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