How?

I have two small questions regarding DIVs

I have a link (download brochure) in a small div on my page. However i am not sure how to align this div to the left properely. It automatically aligns to the left in FF but it is centered in IE... does anyone know the correct way to align this div to the left


here is my css:

.brochure
{
margin:0px 0px 0px 25px;
padding:7px 10px 7px 10px;
text-align:center;
font-size: 11px;
border: solid #FFFFFF;
border-width:1;
background-color:#222222;
width:150;
}


I set the width of the div to 150px, however is there a way that i can just create this div so that the border is 5px around the text so that i do not need to set a width (the width will be the length of the text followed by a 5px padding around it)

thanks in advance

 

For your second part:

For HTML add:

<div class="border_div">
Div Content
</div>

Code (markup):

And in your CSS

.border_div
{
padding:5px;
}

Code (markup):

Can't help you with your first problem without seeing the code.

 

No, that doesn't seem to work

 

It should work... though in addition to the 5px padding (which keeps a certain amoung of spacing between the letters and the border) you'd also have to remove the width of course. When no width is set, the default is auto, which means it's whatever the text sets.

You have numbers everywhere but often there are no units. 150 is 150 what? Hopefully px but the browser must guess. Same for the border-width. I don't think that's what the IE problem is, but I'm baffled at that. If it were IE5, it'd be the text-align:center but IE6 isn't fooled by that.

Try adding units to everything that needs them (the only thing that doesn't need units is 0 (cause zero is zero everything) and z-index.

Next thing to try is validating both the html and css just to see if there are some funky or unclosed tag or something.

*Edit nevermind I just checked for you and while you do have a bunch of errors, they're nothing that should goof with IE. Basically, in your head you have a link with an XHTML ending ( />) instead of the HTML4 ending ( >). You also have this in that Flash code. You have no alt text for your images (required) and the Flash code spits out a bunch of errors because <embed> is technically not valid (but it works fine). Also some inline css in the table screws with the validator too. Nothing important to IE6.

Try adding the units in and see if anything changes. Remove the width: 150 in .brochure and add the padding like BP said and it should look the same, except if you type in a different word with a different length... the box should grow or shrink to accomodate.

 

Thanks for your help, i managed to align it left

I had the contatiner which held all of the divs text-align:center, which obviously aligned everything to the center (if so, how come FF aligned the div to the left... strange)

I still can't manage the padding thing, if i take the width off, it stretches the whole div the width of the container div that it is in


Thanks for all your help anyway, i really appreciate it, thanks

 

Oops yah I forgot... divs are blocks and blocks default to 100% width... You'd have to put the text in something inline by default and then set it as display: block.

The thing I do this in is lists-- the anchors <a> are normally inline. I either float them left or display: block so I can set heights... and if I leave the widths auto, they match the text. However, they're still sitting in something that's a block, the ul.

Also, the text-align center does not center divs... in IE5.5 it did (incorrectly) so that's why FF didn't but IE6 also should not have.

 

Ok cool,thanks, i think i will just set a width as my code may not be 100% perfect yet. The align problem has been fixed once i aligned the container div to the left (and i am trying it out in IE6) thanks for you great feedback and help