Jump to content

L.Adlon

Members
  • Posts

    154
  • Joined

  • Last visited

Everything posted by L.Adlon

  1. 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)?
  2. Hi. I know there's a lot of variation in the displays between different browsers or platforms, but I'm curious about something I'm currently seeing here. I am looking at the same html page on two PCs, using the same browser (Firefox)... yet the one is completely ignoring P:first-letter formatting (while still properly displaying other CSS formatting). The only difference, that I know of, is that one machine is running Win7, while the other is WinXP....if that makes a difference. I'm wondering what might be causing the discrepency... Why the Win7 machine is ignoring some CSS styling on the same page in the same browser as the XP one. Anything I can do to remedy that, as far as coding?
  3. 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)
×
×
  • Create New...