...

View Full Version : Why my h1, h2, h3 are in wrong placement?



kb1
09-24-2007, 05:16 PM
Hello

Tried to change all my custom-named css classes for my headings into the proper h1, h2, h3 respectively...but when I did, these headings are all placed down lower then they should be - look at the text Company at the top of the left menu bar - the text should be exactly in the center of the sky blue rectangle box (not at the bottom of it as is now) and the thin white line should be exactly at the bottom of the blue rectangle, not some distance away as is now ..have a look at

http://www.iwics.com/Company/siteMap.shtml

I think the same issue for heading 1 as well...see how the h1 seems placed way down lower from the blue bar on top - too much white space on top of the h1 before the text starts

http://www.iwics.com/Company/team_europe.shtml

Here are the headings css - is there a problem?

h1 { color: #0a4c89; font-size: 24px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; line-height: 28px; text-decoration: none }
h2 { color: #003366; font-size: 17px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none }
h3 { color: #0a4c89; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none }

Thanks for any help

KB

effpeetee
09-24-2007, 05:26 PM
This is a screen shot from my PC - IE7, latest version.

Can't quite see what you mean.:confused:

Frank

EDIT: I can see what you mean looking at the other url.

Your html is all about tables which are not considered the proper way to position anything other than tabular data.
Postiioning is done with CSS.

Perhaps these sites can help you.

http://www.positioniseverything.net/
http://www.brainjar.com/css/positioning/

Frank

kb1
09-24-2007, 05:38 PM
Thanks for reply - interesting...your screen shot shows the text "COMPANY" (upper left light blue rectangle over the left menu bar) as correctly placed, but still the white line under that blue rectangle is supposed to be exactly under the rectangle, not some distance away as is now...also your screen shot shows the text "IWICS site map" as being even further down away from the blue bar above it than is supposed to be...

On my Safari, FireFox, Opera browsers (latest mac), the text COMPANY always appears at the bottom of the blue rectangle, not centered as it should be, and the white line is always too far away from the blue rectangle as well...the h1 text is too far also from the blue bar above it.

I know there are usually cross browser issues with css but actually when I had what are now my h1, h2, h3 headings named as .subhead, .heading and .sectionHead everything worked perfectly...But I thought I needed to make them all h1, h2, h3 for proper css...and now I get these issues. Thoughts?

KB

VIPStephan
09-24-2007, 05:46 PM
Headlines as well as lists, forms, paragraphs and a few other elements have a default margin which you explicitly need to remove (with CSS) if necessary.

kb1
09-24-2007, 05:49 PM
Thank you both for the very helpful links and default margin business...that's what I thought re: the margins - so being still not an expert coder, my question is: Do I simply declare something like "margin: .5 em" or 0px, ect?

VIPStephan
09-24-2007, 05:53 PM
h1 {margin: [whatever you like];} Pixels, ems, percent, centimeters, inches… everything’s allowed.

I’d suggest, however, to be a little more specific with your selector as the one above will count for all h1s and you might wanna keep the default in some cases.

effpeetee
09-24-2007, 06:44 PM
Changing the padding to zero, appears to be in the right direction, at least on my PC

Frank


<td class="LTNavBarBG">

<table width="100%" cellspacing="0" cellpadding="0">

<tbody>
<tr>
<td>
<h2>Company</h2>
</td>
</tr>
</tbody>
</table>
</td>

kb1
09-24-2007, 11:04 PM
Thanks for all the replies...with both of your help, I think I've finally corrected the headings - see any page

www.iwics.com

I've not yet tested any of this on PC, only mac browsers, but it works on mac.

Here's the code that seems to work:

h1 {
color: #0a4c89;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
line-height: 28px;
text-decoration: none;
margin-top: auto;
margin-bottom: 20px;
}
h2 {
color: #003366;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
text-decoration: none;
margin: auto;
}
h3 {
color: #0a4c89;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
margin: auto;
}
==============

BTW, how do I add code properly to these forum posts?

KB

VIPStephan
09-24-2007, 11:20 PM
(or by clicking the '#' button in the reply window)

kb1
09-24-2007, 11:37 PM
Great - thank you

kb

kb1
09-25-2007, 06:35 PM
Well - having just checked the work on PC browsers, only IE 6/7 still doesn't display the h1, h2, h3 correctly - all other browsers PC/MAC work...any thoughts on a fix for IE?

www.iwics.com

KB

effpeetee
09-25-2007, 07:25 PM
These are screen shots from my PC for your interest.
No1 left-IE7
No2 right - Firefox2

Frank

kb1
09-25-2007, 08:03 PM
Thanks again for the screen shots - yes that's exactly what I'm talking about...FF looks great, IE 7 (and 6) no good...the h1 title on the index page - "ODMA™ - Revolutionary, etc" - is too low on IE but more importantly, on all other pages, the white line is still "pushed down" as is the h2 title "Company" or News or Technology" whatever, in the blue rectangle box on top the left nav menu bar. And only IE pushes down all h1 titles on all pages as well.

Must be IE doesn't respond to my margin declarations but what to do? All other browsers work great, PC/MAC.

KB

vtjustinb
09-25-2007, 10:06 PM
I think the original reply had it right--the difference you're seeing might have something to do with the default margins and padding applied in various browsers.

I almost always include a resetting stylesheet (like the popular YUI reset.css) or simply add a * { margin: 0; padding: 0; } declaration to the top of my stylesheet. This overheads a little bit more work having to manually specify padding on things like <ul>s and <p>s, but it definitely affords you the most cross-browser control with markup rendering.

kb1
09-25-2007, 10:20 PM
Thanks for thoughts - is there a way I can add some IE only declaration to my CSS so I won't have to manually specify padding on something else? If so, what is the code?

Thanks
KB

vtjustinb
09-25-2007, 10:32 PM
There are lots of ways to target CSS rules for specific browsers (commonly they're referred to as filters).

You can find a list of common filters here:

http://centricle.com/ref/css/filters/

One word of warning though, most of these filters typically invalidate your code--so more often than not it's best to keep them contained in their own stylesheet, and then include them with a conditional comment like this:


ie6.css:
/* IE6 Only Code */
* html #something { padding-top: 0; }



html file:
<link href="base.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->


This keeps you from having your main css file from not validating.

In my opinion though, it's best to avoid browser-specific filters whenever possible. They're all technically bugs and usually involve more code and maintenance than they're worth.

kb1
09-25-2007, 11:04 PM
Thanks for the help - Yeah, looks pretty ugly adding all that code...wish there was a simple css fix to IE which didn't affect the other things like ul's, p's etc.

KB

garydarling
09-26-2007, 12:48 AM
You should validate your page before you spend much more time on IE specific fixes; you appear to have some unclosed tags that could very well be causing the blips.

Gary



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum