HTMl/CSS help:Project looks different in IE to Firefox

Fol20 · 17-03-2009 9:52pm #1

My site looks different in both of these browsers.Can anyone please help.In IE everything is align on the left for some reason.
QUESTION 1
Firefox:

IE:

QUESTION 2
Secondly i was wondering can someone tell me how to align my header with the rest of my files.

My CSS code:

BODY
{	
	color: White;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-image:url('Mainbackround.jpg');
}




#HEADER
{
	width:800px;
	margin-left:auto;
	margin-right:auto;
}



#HEADER ul
{	
	margin: 0;
	padding-left: 0;
	height: 45px;
	display: block;
}


#HEADER li
{	
	display: inline;
	background-color: #222222;
	float: left;
}



#HEADER li a
{
	height: 45px;
	line-height: 45px;
	display: block;
	padding-left: 30px;
	padding-right: 30px; 
	border-left: 1px solid Black;
	float: left;
	color: #33CCFF;
	text-decoration: none;
}



#HEADER li a:hover
{
	background-color: #444444;
	color: White;
}




#HeaderImg
{	
	Width: 800px;
	height:100px;
	margin-left:auto; 
	margin-right:auto;
	background-image: url(headimg.jpg);
	background-repeat: no-repeat;
	font-family:sans-serif;
}







#TEXT
{	
	Width:740px;
	margin-left:auto; 
	margin-right:auto;
	padding: 30px 30px 30px 30px;
	Margin-top: 5px;
	border-bottom: 1px solid #484848;
	border-top: 1px solid #484848; 
	background-color: #222222;
}



#FOOTER
{	
	width:800px; 
	margin-top:5px; 
	margin-left:auto; 
	margin-right:auto;  
	border-top: 5px solid #363636;  
	padding-top: 5px;
	word-spacing:40px;
}

Gordon · 17-03-2009 9:59pm

A quick memory recall tells me to put margin: 0 auto in the top level of the div you want in the centre. Oops, sorry you're not centering everything huh?

Fol20 · 17-03-2009 10:16pm

Could you tell me which question your refering to 1,2 or 3.In question 3 id like to align the code to the right but the problem is that if i put it anywhere on the page it still stays on the top

Gordon · 17-03-2009 10:34pm

Sorry, just speed reading today!

1) put
margin: 0 auto;
into the header and any div you need centered, that usually does the trick for me afair.

2) What is wrong here, the width of the sum of the buttons or the width of the div area beneath? It looks like an increase in the body (text div?) width, so this could be a padding issue. I can't remember off the top of my head but I recall IE and FF having different understanding of width vs padding. One includes the padding and one adds the padding.

3) float: right; that should make it right aligned.

Fol20 · 18-03-2009 7:01pm

margin: 0 auto; doesnt work..the main thing i want to fix is the transition between IE and Firefox so could you have a second loook at the code by any chance.

Question 3 removed,float right worked, thanks..

Gordon · 18-03-2009 7:09pm

Can you post up the html code?

Master-Geek · 18-03-2009 7:11pm

you should try and designate your elements with float parameters.

such as
float: left;
or
float: right;

this will rule out any cross browser in-compatibilities.

Try and posting your HTML/XHTML code as well, it would help to see where you are position the said elements.

Fol20 · 18-03-2009 7:59pm

<html>
<!--The welcome page-->

<head>
		<title>lllllllllllllll</title>
		<link href="stylesheet.css" rel="stylesheet" type="text/css" />
		

</head>

<body>

	<div id="HEADER">
	<h1>llllll</h1>
		<!--Links to the other pages-->
		<ul>
			<li><a href="index.html">Homepage</a></li>
			<li><a href="MyBlog.html">My Blog</a></li>
			<li><a href="Interests.html">Interests</a></li>
			<li><a href="CV.html">C.V</a></li>
			<li><a href="EmergingTechnologies.html">Emerging Technologies</a></li>
			<li><a href="Ebusiness.html">Ebusiness</a></li>
		</ul>
	</div>
		
	
	<div id="HeaderImg"> </div>
		

	<div id="TEXT">


<body >

<div id="text">

 
		
	
		<h1>llllllll</h1>

		
		
		<p>
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
		</p>

	</div>



	<div id="FOOTER">
	<center>
		<a href="UsefulLinks.html"><font color="#FFFF00">Useful.Links</font></a>
	</center>
	</div>


</body>
</html>

Master-Geek · 18-03-2009 8:11pm

"<body >" that is a second body tag, and it should not be there.

remove the <centre> tag and use the CSS to control this.

<div id="TEXT"> <has no closing tag,?????>

<body > <should not be here, as you already have an opened <body> tag

<div id="text">

<h1>llllllll
</h1>
<p>
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
</p>

</div>

<div id="FOOTER">
<center>
<a href="UsefulLinks.html"><font color="#FFFF00">Useful.Links</font></a>
</center>
</div>

<html>
<!--The welcome page-->

<head>
        <title>lllllllllllllll</title>
        <link href="stylesheet.css" rel="stylesheet" type="text/css" />
        

</head>

<body>

    <div id="HEADER"><!-- begin header -->
    <h1>llllll</h1>
        <!--Links to the other pages-->
        <ul>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="MyBlog.html">My Blog</a></li>
            <li><a href="Interests.html">Interests</a></li>
            <li><a href="CV.html">C.V</a></li>
            <li><a href="EmergingTechnologies.html">Emerging Technologies</a></li>
            <li><a href="Ebusiness.html">Ebusiness</a></li>
        </ul>
    </div><!-- end header -->
        
    <!-- begin headerimage -->
    <div id="HeaderImg"> </div><!-- end headerimage -->
        

    <div id="TEXT"> <!-- there is no closing tag for this -->


<body ><!--???? what is this here for? -->

<div id="text"> <!-- begin text-->

 
        
    
        <h1>llllllll</h1>

        
        
        <p>
llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
        </p>

    </div> <!-- text end -->



    <div id="FOOTER"> <!-- footer -->
    <center>
        <a href="UsefulLinks.html"><font color="#FFFF00">Useful.Links</font></a>
    </center>
    </div> <!-- footer end -->


</body>
</html>

look through teh comments on the source code. clean it up a bit. what is the absolute URL to where the website is been created? this way i can re-do it on my side. and post the source code to you.

Fol20 · 18-03-2009 8:34pm

Its not up on any website yet.Im new to html so frogive me for my messyness.
i thought the comments were not forced so i just put them in where i needed them..I didnt know you had to put them everywhere.Text id does have a closing tag on my site.I just through that togethor and left that out by accident.All im asking sure is why the website is aligned left on internet explorer.the margin auto doesnt seem to work.Another thing is that in firefox i have to make #text width 740px so it will align with the rest of the content.Do you know why?

Master-Geek · 18-03-2009 8:48pm

comments are not needed for the website to function. they are just there for ease of reference.

Margin auto does not work because, there is no margin there to be auto aligned. if that auto alignment was within another div element then it would. You have to be very specific when it comes to IE, firefox has a very good ability to sense these obstacles and in turn, predict.

The text width issue in firefox could be due to a padding issue. as you had given no width for the actual element. and because it is a DIV, it has no parent dependancies.

It would be great if you could zip up all of the images along with the source code, that way a "more hands on approach" can be achieved. And you may also learn something new by examining the re-done code.

Fol20 · 18-03-2009 8:51pm

I was wondering would you be able to go skype,msn or vent?

You can never be too careful

Master-Geek · 18-03-2009 8:57pm

Fol20 wrote: »

I was wondering would you be able to go skype,msn or vent?

You can never be too careful

I just sent you a PM with details.

HTMl/CSS help:Project looks different in IE to Firefox

Comments