Text element slightly off-center within it's element box in Firefox

[L.Adlon]

Hi. I'm revamping my site, trying to make it as clean and 'pure CSS' as possible. When I had built it years ago, I was trying to do the same, but was very frustrated by the seeming incompatibilities, quirks, and sometimes complete non-functioning of the CSS at the time.

 

I'm having more luck now, with my knowledge a bit stronger, and support a bit better amongst the browsers, but I'm still often frustrated with the quirks I'm running into at almost every step.

 

So, I'm hoping I will be able to get some feedback and answers/solutions here.

 

 

I'm using HTML_Kit to hand code the sites.

 

Okay, so one of the current problems I'm facing is that I have a horizontal row of HTML text nav buttons (complete with visible border box, letter spacing, etc defined via a style sheet. In the editor, it looks fine, but in Firefox, I'm noticing that the text and the box are not properly aligned... There's more space on the right side (between the end of the text and the right border/box edge). I had defined the margin, alignment and padding in the class definition, and it IS centered in the editor (which seems to replicate closest to Internet Explorer's output), but in Firefox, it's misaligned.

 

Not really sure what I can do, or why it's doing that.

 

 

 

Here's the class definition (I've separated each definition for ease of reading):

 

.navbutton{

text-align:center;

vertical-align:middle;

padding-left:10px;

padding-right:10px;

padding-top:0px;

padding-bottom:0px;

margin-left:15px;

margin-right:15px;

margin-top:0px;

margin-bottom:0px;

height:16px;

border-style:solid;

border-width:1px;

border-color:grey;

background-color:black;

font-size:8pt;

font-weight:bold;

letter-spacing:8px;

color:e1e1e1;

font-style:normal;

text-decoration:none;

cursor:pointer;}

 

And here's some of the HTML of the nav buttons (they are all within a <td> of a table):

 

<a href="info.html" class="navbutton">ABOUT</a>

<a href="anim.html" class="navbutton">ANIMATION</a>

<a href="fx.html" class="navbutton">VFX</a>

 

 

 

So, a few questions:

 

1) Are shorthand forms of style definitions now fully supported in all browsers these days? (ex. border:2px solid blue;) I kept them full format in case they weren't.

 

2) When I code the <a> nav buttons with a caridge return betwen each (as in my above sample), there is a thin area between each 'button' (text element) that is editable, and causes the mouse pointer to turn into a text editor pointer when it passes over it. I solved it by having all the <a> codes on a single line (no white space or caridge return between them), but I'm wondering if there's a better way to fix that. Some attribute I can set?

 

3) Originally, I also had a width definition for the nav buttons (defined within the style sheet definition), yet that didn't seem to work in some browsers. I found articles pointing out that it is a known issue (either saying that Firefox ignored width attributes, or that width can only be set for block elements). However, setting the buttons as block elements doesn't work, since that then causes each to be stacked on top of each other (vertically)... unless there is some other way to code it that I'm not aware of. Any suggestions how to allow specific width defining of each button in my above sample?

 

4) As mentioned, I'm also finding that, despite everything seemingly being set properly in the nav button style definition (unless someone points out an error!), the text and element box (border) are not properly aligned to each other.... with there being a bit more space to the right of the text. Any idea what might be causing that? Other browsers show it fine, but Firefox shows the misalignment on all instances of it.

 

5) I seem to also be getting different results as far as the vertical positioning (alignment) of the group of nav buttons. Ideally, I want them vertically centered within the containing <td> cell (and it IS in some browsers), but others have it seemingly lower than center. I have 'middle vertical alignment' defined in both the <td> and the nav button style. Any suggestions with that?

 

Hope you guys can help! (Please explain things clearly, as I'm obviously not a pro coder)

[dsonesuk]

I suggest you move away from using tables and use unordered list instead, google 'suckerfish', 'son of suckerfish' to see examples, then if you require submenus , its easier to add.

 

Wait i think i'm drunk, i'm seeing double, wait... no double post.

Edited May 24, 2014 by dsonesuk

[L.Adlon]

Hi, dsonesuk... Oh, I've been trying to abandon tables in favor of CSS for years now... but tables are so comfy.... and, at least as far as my HTML/CSS skillset is concerned, the only way I can get thing to work, unfortunately!

 

The structure of this particular site is:

 

Top 'Frame' Beam

Left Beam / Header /Right Beam

Left Beam / Nav buttons (series of <a>'s) / Right Beam

Bottom Beam

Left Beam / Site Content / Right Beam

Bottom Beam (Footer)

 

Done with a table. I know it can be done purely CSS... but all previous attempts resulted in random weirdness, and I just got fed up and fell back to tables.

 

The tables seem to be working solid.... I'm just not sure what the deal is with the actual text elements of the nav buttons. They are not graphics... just individual text elements, with a visible back colour and border, with margins/padding defined. All that is working great, but the width defining isn't working (since it's not a block element, and (seemingly) can't be), and the text is not quite aligned within its own element box, for some unknown reason, in Firefox.

 

I checked out suckerfish. Looks like that's for pulldown menus, which I don't want. These are horizontal nav button type things.

 

 

Anyone else able to answer some of the questions (listed in first post)?

Edited May 24, 2014 by L.Adlon

[dsonesuk]

Hmmmm what would do if you if you were given a navigation menu which included ability to use submenu and the submenus which you don't want?

 

please, please sir

 

yes Jenkins

 

I'd remove them sir, no submenus, no problem, you just have parent menu to work with.

 

excellent Jenkins, damn obvious isn't.

[Ingolme]

A small analysis of your situation:

 

HTML editor previews can't be trusted, you must always test your pages in real browsers.

 

Be sure that all all your HTML documents have a <!DOCTYPE> tag that is among the list shown here: http://www.w3schools.com/tags/tag_doctype.asp. It's preferrable to use the HTML 5 one. Not using a DOCTYPE will make different browsers render the same things much more differently from each other.

 

I spot a mistake in your CSS code: color:e1e1e1; The color code should always be preceded by a # in order to work. Perhaps some browsers running in the old rendering mode do work without the # but a majority of browsers will not.

 

It might seem difficult at first, but it is important to move away from table layouts. If we just keep fixing up your table layout with CSS you'll never really be able to transition to more modern layout methods that work a lot better. I haven't checked it in depth but this website may help you begin with full CSS-based layouts: http://learnlayout.com/

 

To answer your questions:

1. Shorthand CSS rules are completely supported by even the oldest browsers in use today.
2. I'm not sure what you refer to as "editable". I guess you mean that the cursor shows a text selection symbol. If you want to avoid that you either have to put all the <a> elements in a row in your source code or turn them into block elements using the CSS display property. Once they're blocks, in order to make them stay next to each other you have to use the CSS float property.
3. Width normally does only apply to block elements. Normally block elements stack vertically, but as I just mentioned, the float property is used to keep them next to each other.
4. It's difficult to pinpoint the exact reason this is happening without being able to see your page.
5. Vertical alignment can be a little tricky and how it's done depends on the situation. Normally, setting an element's line-height to be equal to its height will vertically align everything in it.

[L.Adlon]

Hi, Ingolme. Thanks so much for that complete response! Very much appreciated. That helps a lot.

 

Ya, the colour thing was just a typo when I made the post. I do put a # in there normally! Oops.

 

I only really have Firefox and Explorer to test things on, although I now have a friend on a Mac with Safari and some other browser to test things on as well. I'm just a hobbyist, really, so I don't have the full, proper setup, unfortunately.

 

I had tried doing the site without tables, but found weird quirks (...in most cases, probably the fault of my coding or understanding of things), and so I was forced to fall back on tables. I keep looking into it,though... and have certainly reduced the amount of tables and other 'old school' methods I use so far, as I can.

 

A lot of times, I keep with old school methods (rather than embracing proper CSS methods) simply out of a fear that browser support is not (currently) fully realized.... as was the case in shorthands, for example. That's why I ask. Now that I know, I'll be using shorthands! (Whoo-hoo!)

 

Re question 2... What I was finding is that if I did standard <a> tags, but had a carriage return after each (in the html code... solely to make it visually cleanear in the coding, not the actual page display), I would get a small area between the resulting text hyperlinks that would trigger the 'I-bar' text editor mouse pointer. By simply removing the carriage returns after each hyperlink (and have them all as one string in the code), that disappeared. So, it's some sort of 'editable' space character that is introduced between the hyperlinks (in the actual webpage display) when you have carriage returns in the code between each hyperlink.

 

I'll try out the float property and see if that will allow me to use block element hyperlinks (which will in turn allow me to use width!). I've tried Float in previous sites/tests, and got odd results... but, again, that was most likely me not fully understanding things, or other elements interfering. I'll give it another go, thanks!

 

Re question 4... ya, it seems weird to me, too! As far as the coding is concerned, it SHOULD be centered... even by default. It is centered in non-Firefox browsers, as far as I can see. Maybe some other element/aspect is affecting it, but I can't see anything obvious. I'll play around wtih the same kind of thing, outside of that actual page, just to see. If I end up finding out what was causing it, I'll be sure to post the findings here.

 

Re question 5... Yep, could be a number of factors. I seem to have at least reduced the variation. It's totaly useable now. Maybe a 1 pixel discrepency between browsers. I haven't tried the line height, though. I'll give that a shot. That actually was the solution to another issue I was battling, where there was a gap between my embedded Flash movie and an image graphic that were supposed to be right up against each other...and seemingly should have, based on the code. The line height attribute was part of the solution to that.

 

Excellent. That was really helpful! Thanks. If my tests reveal anything of use, I'll post them here, just in case others are wondering about any of this.

[dsonesuk]

In FF View->Page style->No style and see difference.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            .mytable {padding:0; border-spacing:0; border-collapse: collapse; border:1px solid #333; width: 50%;}            .mytable td {border:1px solid #333; }            td.nav{text-align:center;/* centre menu*/}            #nav ul, #nav li {list-style-type: none; margin:0; padding:0; text-indent: 0;height:16px; }            #nav li {float: left;}            /* centre floated nav */            #nav {position:relative; left:50%; float:left;}            #nav ul {position:relative; left:-50%; }            /* /centre floated nav */            #nav a {display:block; float: left; margin: 0 15px; padding: 0 10px; height:16px; line-height:16px; border:1px solid grey;                    background-color:black;font-size:8pt; font-weight:bold; letter-spacing:8px;color:#e1e1e1; font-style:normal;text-decoration:none;}            .navbutton{                text-align:center; /* wont work unless inline anchor changed to block element and given width wider than current content*/                vertical-align:middle;                padding-left:10px;                padding-right:10px;                padding-top:0px;                padding-bottom:0px;                margin-left:15px;                margin-right:15px;                margin-top:0px;                margin-bottom:0px;                height:16px;                border-style:solid;                border-width:1px;                border-color:grey;                background-color:black;                font-size:8pt;                font-weight:bold;                letter-spacing:8px;                color:#e1e1e1;                font-style:normal;                text-decoration:none;                cursor:pointer;/* pointer by default*/            }        </style>    </head>    <body>        <table class="mytable">            <thead>                <tr>                    <th></th>                    <th></th>                    <th></th>                </tr>            </thead>            <tbody>                <tr>                    <td></td>                    <td><div id="nav"><ul>                                <li><a href="info.html">ABOUT</a></li>                                <li><a href="anim.html">ANIMATION</a></li>                                <li><a href="fx.html">VFX</a></li>                            </ul>                        </div>                    </td>                    <td></td>                </tr>                <tr>                    <td></td>                    <td class="nav"><a href="info.html" class="navbutton">ABOUT</a><a href="anim.html" class="navbutton">ANIMATION</a><a href="fx.html" class="navbutton">VFX</a></td>                    <td></td>                </tr>                <tr>                    <td></td>                    <td></td>                    <td></td>                </tr>            </tbody>        </table>    </body></html>