• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

H1 element not sitting correctly in IE

i cant get my page title to sitr correctly in IE.  please see examples:  

http://www.seandelaney.co.uk/ee/screenshot-2.png //  Firefox browser using error.css
http://www.seandelaney.co.uk/ee/screenshot-1.png // IE browser using error.css & ie-hacks.css

i have been playing about with different hacks but i cant get it to sit the way i want it to sit - like it does in Firefox...

Please advise
error.css
--------------------
 
div#error
{
	margin-top:0px;
	border-left:1px solid #C8C8C8;
	border-right:1px solid #C8C8C8;	
	clear:both;
	background:#FFFFFF;
	color:#202020;
}
 
div#error h1,
div#error h2
{
	background:#FFFFFF;
	margin-top:10px;
	margin-bottom:10px;
	font-family:"Trebuchet MS";
	font-size:1.2em;
	padding-left:10px;
	float:left;
	width:98%;
}
 
div#error p
{
	margin:0px;
	line-height:150%;
	padding-left:10px;
	padding-top:0px;
	padding-bottom:15px;
	padding-right:10px;
}
 
 
ie-hacks.css
------------------------
div#header h1
{
	width:98%;
}
 
div#error h1
{
	position:relative;
	margin:0px;
	padding-top:10px;
	padding-bottom:10px;
}
 
div#error h1,
div#error h2
{
	width:97%;
}
 
a
{
	cursor:hand; 
}
 
 
HTML code
---------------------------
 
<div id="error">
	<h1>404 Not Found</h1>
	<h2>Cause</h2>
	<p>The 404 Not Found error is an <acronym title="Hypertext Transfer Protocol">HTTP</acronym> status code that means that the page you were trying to reach could not be found on the web site&#39;s server.</p>
	<h2>Resolution</h2>
	<p>Retry the web page by clicking the refresh/reload button or trying the <acronym title="Uniform Resource Locator">URL</acronym> from the address bar again.</p>
</div>

Open in new window

0
ellandrd
Asked:
ellandrd
  • 2
1 Solution
 
rucky544Commented:
I'm not sure why you need hacks to get a Heading to display correctly.

Just set all margins and padding, set a font size and set positioning to relative.

You should remove the float left, i can't really see what that is supposed to be doing and it won't be helping!
0
 
ellandrdAuthor Commented:
well as you can see it firefox it sits correctly - the exact same code wont in IE... i cant figure out why its does this....
0
 
rucky544Commented:
try doing what i suggested...

"Just set all margins and padding, set a font size and set positioning to relative.

You should remove the float left, i can't really see what that is supposed to be doing and it won't be helping!"

You really souldn't need a hack for a simple page like that.

I'm sure it must be the floating left part!
0
 
Eternal_StudentCommented:
I agree, it is almost certainly the float:left part not getting cleared that is causing this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now