[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Firefox Div width not working

Posted on 2006-10-30
12
Medium Priority
?
4,564 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

649 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