Border problems

T

Thor

I've set the following style:

h6 { font-family: Arial; font-size: 14pt; color: #FFFFFF;
font-weight: bold;
text-align: center; border: 4 outset #FFE4B0; }

note: The background color is navy, hence the white text.

The border is just as expected with IE, but does not exist in Navigator or
Firefox. Do these browsers have a problem with borders, or is there a better
way to write the style?

In Navigator and Firefox, the font takes on the specified size and weight
but it turns into a serif font!
 
R

Ronx

h6 { font-family: Arial, Helvetica, san-serif; font-size: 16px; color:
#FFFFFF;
font-weight: bold; text-align: center; border: 4px outset #FFE4B0; }

Pixels are better for specifying font sizes since all browsers will render
them the same way - using points (1pt=1/72 inch) each browser will
interpret how many pixels are in an inch, and use different values.
The unit of measurement for border size must be specified if a numeric
value is used.
 
T

Thor

Good advice! Changed the border width from 4px to 0.5em. Now, at least, I
have borders in Netscape/Firefox. But I still have centering problems.
Left-margin: 45% centers the element in IE, but pushes it right of center in
Navigator. Truly, it ought to be to the right of center, but these are the
facts.

Any suggestions to center a bordered element in both IE and NS?
 
M

Murray

I would never use em as a metric for borders, since text size
increases/decreases will cause the borders to increase/decrease
proportinately. It would just look too weird.

To center a bordered element, use CSS to assign a width, and give it auto
left and right margins. It will then always be centered within its
container.
 
T

Thor

I tried auto left/right margins. It worked with Netscape and Firefox. In
FP2003 Preview and in
IE, the element was positioned at the left edge of the screen, i.e., the
auto margins didn't work:

<p style= "text-align: center; border: 0.2em red solid; margin-left: auto;
margin-right: auto; width: 4in; font-size: 24pt" >Now is the thyme</p>

I'd appreciate if you'd try that, and let me know how you make out. I also
tried it using a CSS style in the <head> section. Same result, of course.

I feel the border should change with font size. I'd want a heavier border
with a 24-point font than with a 10-point font.

Thanks.
 
M

Murray

width: 4in;

I would never use inches as a metric for the web. After all, people have
different sized monitors, and 4in on a small monitor will affect your layout
in a vastly different way than 4in on a large monitor.

Also,
<p style= "text-align: center; border: 0.2em red solid; margin-left: auto;
margin-right: auto; width: 4in; font-size: 24pt" >Now is the thyme</p>
Click to expand...

you are trying to center an element that should be positioned at the left
margin - that's why it's not working for you. Try this -

<div style= "text-align: center; border: 2px red solid; margin-left: auto;
margin-right: auto; width: 350px; font-size: 2em;" <p >Now is the
thyme</p></div>
 
T

Thor

you are trying to center an element that should be positioned at the left
margin - that's why it's not working for you.

Then why does <p> have an align: center attribute?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

please help me fix my code. it will not work in ie but worksperfectly in firefox 5
Menu in CSS problems 9
Problems using CSS in IE6 1
Hyperlinks NOT underlined in website using CSS 3
Problem seeing some characters when sending email to Outlook client 60
pages don't work in Firefox? 2
CSS Problems 9
Print from Explorer 7. does not work 1

Top