0

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

Attachments samsung_nc10.jpg 54.56 KB
2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by Violet_82
0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.