Positioning problem

[Violet_82]

Hi there,
I have a problem with how the text, especially headings are positioned on my site http://www.antobbo.webspace.virginmedia.com/webediting/testing/our_web_standards.htm. When I look at the website from my dell laptop (resolution 800x600) everything seems fine in all the browsers except chrome where the headings are at the same level as the top navigation. When I do that from my netbook samsung nc10 (resolution 1024x600) then in all the browsers except IE7 the heagings are at the same level as the top navigation, screenshot attached.
In the CSS the relevant bits are:

/* Horizontal line */
 
#horizontal_line

{
clear:both;
color:#81a594;
background-color:#81a594;
height:0.35em;
width:100%;
float:left;
margin-top:0.35em;
margin-bottom:1em;
border-style:none; /*Firefox seems to have a little border, so I removed it altogether */
}

#text_navigation //which represents the text from the heading to the end

{
margin-right:15px;
margin-left:15px;
/*background-color:yellow;*/ 
margin-top:10px;
}

#homepage_text_navigation//same as above but just for the home page
{
	margin-right:175px;
	margin-left:10px;
	margin-top:38px; /* The minimum margin-top so that the heading is displayed ok in chrome */
}

in #homepage_text_navigation if I keep the top margin to 38px then everything is fine, the headings displays ok. But as you can see from the above code in #text_navigation the top margin has 10px and as said it seems to be causeing problems to the heaings in certain browsers. Setting the margin to 38px partly solves the problems: the headings are displayed ok but if I then go back to my dell laptop and look at the site in IE there is a big gap between the horizontal line and the heading.
I wonder if there is a CSS rule so that I can make sure that the heading will always be displayed below the horizontal line all the time, no matter the browser/resolution
thanks

[Arkinder]

Hi Violet_82,

Giving an element the float property will remove it from the normal flow of the page. In Chrome the text is being moved up because you have two floating elements - the top navigation and the horizontal rule. Remove the float property from your horizontal rule selector. Changing the margin-top from 0.35 to 2.65 should replicate the margin you had while floating the element.

Regards
Arkinder

[Violet_82]

Arkinder,
thanks that worked a treat. I thought that floating the line left would have been beneficial, but clearly it created only problems. what's odd to me though is the fact that it was only Chrome misbehaving, when usually - at least in my short coding experience - if something happens in chrome, firefox follows suit
thanks again