<div> Troubles (FF vs. IE) - HTML Forums

Juparis · 11-07-2004, 04:04 PM

I'm having two basic problems with divs. I know I could easily complete each task with tables, but I know divs are valid, so that's the path I've chosen.

First problem would seem simple, but I can't find the answer. How can you center a <div> without centering the content inside of it, and keeping it as an inline element?
I'm looking for any CSS attribute that can let me do this instead of having to have a div inside another div, or a span inside a div (both of which only work in Firefox) since there would be many of these divs on a page.

Second problem is keeping some "bars" filled to their assigned width. I prefer to use divs for this task, so please don't try and suggest images instead.
There are 3 divs (to begin with, at least) with a set background color, height, and width. Everything looks fine in IE, but the divs remain at their minimum in Firefox.
Anyway to keep this from happening (without using images--including spacer GIFs)?

Code:

.bar{height:15px;display:inline;font-size:12px;}
------------
<br><div class="bar" style="background-color:red;width:42px;">&nbsp;</div>
<br><div class="bar" style="background-color:blue;width:58px;">&nbsp;</div>
<br><div class="bar" style="background-color:silver;width:99px;">&nbsp;</div>

coothead · 11-07-2004, 04:57 PM

Hi there juparis,

I have to admit that I found your post rather puzzling

So I will post my reply in code and let you tell me where I have misread your questions

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div problems</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
<!--
.bar{
     height:15px;
     float:left;
     font-size:12px;
 }
#red {
     background-color:red;
     width:42px;
 }
#blue {
     background-color:blue;
     width:58px;
 }
#silver {
     background-color:silver;
     width:99px;
 }
#center {
     clear:both;
     width:100px;
     height:20px;
     border:solid 1px #000;
     margin:auto;
  }
</style>

</head>
<body>


<div class="bar" id="red"></div>
<div class="bar" id="blue"></div>
<div class="bar" id="silver"></div>

<div id="center">centered div</div>

</body>
</html>

scoutt · 11-08-2004, 09:05 AM

to center a div you have to use margins, specificly the left and right

magin-left: auto
margin-right:auto

but why would you make it inline and then want to center it? if it is inline just add text-align:center. it shouldn't make the the text inside it center as you took away the block part of it.

if that is what you meant.

to do the minimun you have to use min-height or set the height to 100%. IE will not do the min-height so you have to hack it. if you know it will never go any bigger or any smaller you have a static height.

Juparis · 11-11-2004, 04:42 PM

Thanks for the replies! I would have replied earlier myself, but I had no access to the file for a few days... Got it back, though, and so far coot's code seems to work (for the most part).

Ok, the reason I wanted an inline, centered div (w/o centered content) was mostly for the border properties, and keeping it tight with my table. If I make it an table cell, part of the JavaScript function (another praise to coot) will not work--I don't know why but I thought this might be easier to figure out. The function toggles the visibility of the div, which didn't work with table cells in FF.
Anyway, the only problem here is that 1) The div isn't centered, and 2)display:none; seems to have no effect on it (for the toggling). The function works after you check and uncheck the checkbox. I'd like to keep it hidden at first.

The bar coding works perfectly, thanks coot! I noticed you used an XHTML doctype. I've never used that, but was wondering; do the CSS properties need to be formatted the way you showed? Or could it be left as I normally type:
#div{blah:none;border:red;something:else;}

Ok, so there's my problem, and here's the page. As an added bonus (I don't want to make you guys work too hard since this is still free), how can you change the space a <br> provides between objects? There must be a CSS attribute, but I haven't been able to find it yet. Thanks for your help so far!

bendman · 11-11-2004, 04:47 PM

br is just a return so you should be able to change the font size where the br is, and the br will change size

Juparis · 11-11-2004, 05:04 PM

It seems like a good suggestion, but I would be using a ton of these BRs, and setting a font size after each one (just to change it a few lines down again) doesn't seem too appetizing. I tried using CSS to set a font-size already, but that has no affect.

bendman · 11-11-2004, 05:07 PM

you could always put whatever's below it in a div or span and move it down relatively

coothead · 11-11-2004, 06:38 PM

Hi there juparis,

I have just read your post

and haven't had time to fully digest it

as I'm just off to get some zzzzz

but I can get your div centered for you before I depart

I see that you have named the div...div1

....but you have forgotten to change the csss rule to reflect this action

you still have it as... #center

coothead · 11-11-2004, 06:44 PM

....p.s.

you do NOT use <br> to space objects

you use margin

Check it out here

scoutt · 11-11-2004, 07:15 PM

Quote:

Originally posted by juparis
It seems like a good suggestion, but I would be using a ton of these BRs, and setting a font size after each one (just to change it a few lines down again) doesn't seem too appetizing. I tried using CSS to set a font-size already, but that has no affect.

go with what coot said.

also I believe a line-break uses line-height instead.

Juparis · 11-11-2004, 09:35 PM

Thanks coot--it seems my mistakes are ever-flowing.. I will start using margins as you said, don't worry.

Thanks scoutt for the line-height idea. I know you told me that for another tag once, but it seems my memory hasn't been it's best with school going on, hehe.

To anyone, I'm still curious about how people type up the CSS styles (hope I'm wording this right). I realize coot's way seems more organized, but takes up a lot of space while I like to keep things nice and tight (even though it really makes no difference; just a personal habit). Does it matter either way? Is one method suggested over another?

scoutt · 11-11-2004, 10:24 PM

it doesn't matter. for your readability mostly

bendman · 11-11-2004, 10:52 PM

I'd suggest an external stylesheet with lot's of white space

then you have all your style things in one spot and you can find them easy.

Juparis · 11-11-2004, 10:54 PM

I don't think it matters too much. I'm only using these styles for one page. Either I open up the page to edit the content and styles at the same time, or open the content, and open the styles seperately.

It all adds up to the same amount of space in the end... Had I been using this for 2+ pages, I probably would.

Juparis · 11-12-2004, 04:59 PM

Alas, my good fortune could not last forever; a new problem has arisen..

When viewed in different resolutions, the blue bar seems pushed off to the right (beside the red bar; similar to a table cell error), and the heights of the <td> varies. Does anyone know how to solve this? I figure the margin causes the blue bar to go whack, but I only used the margins because of the <td> that would compress itself... I was viewing a different computer when I noticed the change, otherwise I would have brought this up earlier...