2 replies [Last post]
socaprice
socaprice's picture
Offline
newbie
Last seen: 12 years 6 weeks ago
Timezone: GMT-4
Joined: 2010-08-20
Posts: 2
Points: 3

Hi all,

I am using Dreamweaver 8 and for some reason when I add the bold tag or any kind of formatting tag or even a hyperlink it looks good in the dreamweaver but when I look at it on the site, it drops the word tagged slightly below the baseline of the text. For example the line below should read as you see it:

"Here are some of the prizes you can win in Raffle 1 (September 11, 2010 draw)."

However it is reading like this:
"Here are some of the <sub>prizes</sub> you can win in <sub><strong>Raffle 1</strong></sub> (September 11, 2010 draw)."

Yet I added no tags. (They are only added here to show you the effect.) The website where this is displayed is http://www.ttew.org/fundraising.html and click on the "Limited time fundraising (Display)" if anyone wants to see the effect live.

Someone in another forum mentioned, "Your alignment issues are the result of conflicting margin and padding rules, which you use to align things and compensate for your lack of proper hierarchy." However, I cannot see what he is talking about.

If any one can tell me what is going on and how to fix, it would be appreciated. I am new to CSS and used a combination of CSS and the Dreamweaver templates to make all the pages similar.

Thanks,
socaprice

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 49 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Oooh-Ow-Ug!

The code gives me the shivers! I know you're new to CSS, but what's really going to give you trouble as you continue building sites is how Dreamweaver suggests horrible, inaccessible code!

But, to your problem:
I can't comment on what the other forum-person meant, because right now your example has just one strong element. Strong is an inline element, and what I'm seeing is a CSS reset (those have their place but especially for newbies, they can cause more problems than solve) and your reset is applying "vertical-align: middle" to everything.

* {
  margin: 0; /*this one's not so bad*/
  padding: 0; /*this one can make forms less accessible!*/
  vertical-align: middle; /*you don't want this here*/
}

Your "p" text isn't going to listen to that vertical-align, because p's are blocks and blocks don't listen to vertical align. I'm thinking that it's just hitting the (inline) strong element (and the other inlines: spans, b's, i's, em's, anchors) and in some browsers making it align... differently.
You'll see a difference between IE and FF and other browsers when using vertical-align. The only place I regularly use that one is for removing the little gap that sometimes appears under images:

img {
  border: 0; /*browsers add borders by default, but 99% of the time I don't want any*/
  vertical-align: bottom;
}

and sometimes for form inputs.

I'll point out a couple of things I see in your code for you to watch out for in the future:

  • In general, don't set heights on things. This really limits the actual height of something (and you may not always see that, because content inside by default can spill out... but you'll see it any time you use background colours, background images, or borders). Almost everything on a page you'll want the height to be "auto" (which is the default, meaning you don't have to mention height in the first place). If there are some boxes you want to be higher/taller than the content, use min-height (so that if MORE height is necessary, the box can grow). This means IE6 needs to get pure "height" because it's so old it doesn't even know what min-height is... but it does (incorrectly) treat "height" like "min-height" so it's win-win.
    #someBox {
      min-height: 400px;
    }
    * html #someBox {height: 400px;}

    The Tan Hack used there (the * html #elementname {}) is considered safe to use: no other browser will react to that ever in the future. It's too famous : )
  • Avoid using positioning, or at least avoid it until you know how it works. I see various elements randomly set to position: something here and there. Most of the time, you don't need it and if it's position: absolute, you often don't want it (the rules for a box completely change when you use absolute positioning... read up on it in the sticky thread here at CSSCreator... it's called something like, "The Perils of Absolute Positioning"). Most of the time you can place things where you want using margins and floating. Of course, floating also has its whole other set of rules and browser bugs, but in my opinion it's a more useful (and more-used) tool than positioning. Read about Float bugs and enclosing floats and clearing floats in IE.
  • Learn about margin collapse. You are using margins on things, and that's fine, but you might be seeing margins doing things that don't seem to make sense. Likely that's margin-collapse, so it's good to know what it is and what it does. You don't really have 30px-worth of margin between your p elements.
  • Don't hide text with Javascript, or create text with Javascript. It's ok to use Javascript to manipulate content that's already on the page by default, but with any web sites geared to *everyone* it's good practice to make sure your site actually works without Javascript (exceptions to this might be web applications, but those are different from web sites). It doesn't have to be as pretty or as fancy or as nice without it, but it should work.

So I think for your immediate problem, removing the vertical-align from your "everything" selector may fix the alignment problems of inlines in your text. For the rest, that'll take time.

I'm no expert, but I fake one on teh Internets

socaprice
socaprice's picture
Offline
newbie
Last seen: 12 years 6 weeks ago
Timezone: GMT-4
Joined: 2010-08-20
Posts: 2
Points: 3

This is wonderful!

Thank You, Thank You, Thank You!!!

I know this mis-mash of Dreamweaver and CSS is a little ugly but it will get prettier as I learn more CSS and use the Dreamweaver shortcuts less. Smile

This was extremely helpful by removing the vertical-align from my css stylesheet everything aligned properly and there were no noticeable differences to other aspects of the site.

I am EXTREMELY glad I joined this site! I realize I am very new to CSS and I guess using Dreamweaver seemed to be easier to use on the start, but as you pointed out maybe it can be considered too helpful Smile. I will have more questions as I move along in my web building life, however I will learn.

I understand that Javascript is not accepted in all browsers or some companies block it by nature so I don't much like using it either. However, I don't know it that well and a co-worker just showed me that trick to hide rows so visitors to the site won't have to scroll down a long page searching for what they really need. When I learn if css can do something like that or it can be done using html or some other code that is accepted by all browsers I will change. But for now I am stuck. Sad

But Thanks AGAIN for the help and I will take your advice and do the reading as I get more into it. May not be able to rebuild this ttew.org site at this time, but as I build new ones will incorporate what I will be picking up along the way, especially from this csscreator site.

Thanks,
socaprice