www.webdeveloper.com
Results 1 to 6 of 6

Thread: Layout Inconsistencies (IE vs Firefox)

  1. #1
    Join Date
    Jun 2007
    Posts
    6

    Layout Inconsistencies (IE vs Firefox)

    Hi there,

    I've made a rough layout for my site, but it is appearing differently in IE and Firefox, it shows how I want it to look in IE, but Firefox moves down the heading and the content text below it.

    IE - http://img260.imageshack.us/img260/4733/egie1ew0.jpg

    Firefox - http://img260.imageshack.us/img260/8352/egie2uw7.jpg

    I have padding above the heading text, then a few breaks between the heading text and the content text. I've played about with these but to no avail. I want it to look in Firefox how it already does in IE, so how do I fix it?

    Thanks,

    GT

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<link rel="stylesheet" href="css/main.css" />
    		<title>Site Title</title>
    	</head>
    
    	<body>
    		<div id="container">
    			<div id="logonav">
    				<br />
    				<br />
    				<br />
    				<br />
    				<a class="home" href="index.htm">HOME</a><br/>
    				<a class="breakfast" href="breakfast.htm">BREAKFAST</a><br/>
    				<a class="lunch" href="lunch.htm">LUNCH</a><br/>
    				<a class="dinner" href="dinner.htm">DINNER</a><br/>
    				<a class="desserts" href="desserts.htm">DESSERTS</a><br/>
    			</div>
    			<div id="content">
    				<h2>Site Title</h2>
    				<br />
    				<br />
    				<br />
    				<p>
    					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    					eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    					voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    					clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
    					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
    					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    					sed diam voluptua. 
    				</p>
    				<p>
    					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    					eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    					voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    					clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
    					amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam 
    					nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    					sed diam voluptua. 
    				</p>
    				
    			</div>
    		</div>
    	</body>
    </html>
    Code:
    body 
    	{
    		background-color: #110000;
    		text-align: center;
    	}
    a  
    	{
    		text-decoration: none;
    		font-family: arial, verdana;
    		font-size: 11pt;
    		font-weight: bold;
    	}
    a:link
    	{	
    		color: #C5D28D;
    	}
    a:visited
    	{
    		color: #C5D28D;
    	}
    a:hover
    	{
    		color: black;
    	}
    a.home:hover
    	{
    		color: #F7E410;
    	}
    a.breakfast:hover
    	{
    		color: #F48A10;
    	}
    a.lunch:hover
    	{
    		color: #F87210;
    	}
    a.dinner:hover
    	{
    		color: #F64610;
    	}
    a.desserts:hover
    	{
    		color: #FA1010;
    	}
    a:active
    	{
    		
    	}
    #container 
    	{
    		width: 750px;
    		margin: 0 auto;
    		text-align: left;
    	}
    #logonav
    	{
    		background-image: url('../images/logo1.jpg');
    		background-repeat: no-repeat;
    		float: left;
    		left: 0px;
    		top: 0px;
    		width: 170px;
    		padding: 100px 0px 0px 25px;
    	}
    #content
    	{
    		top: 0px;
    		width: 500px;
    		height: 500px;
    		border: solid #C9DDA9;
    		border-width: 0px 1px 0px 1px;
    		float: right;
    		padding: 45px 25px 0px 25px;
    	}
    p	
    	{
    		font-family: arial, verdana;
    		font-size: 11pt;
    		color: #C5D28D;
    	}
    h2
    	{
    		color: #C9DDA9;
    		text-align: left;
    		font-family: arial, verdana;
    		font-size: 32pt;
    	}

  2. #2
    Join Date
    Oct 2006
    Location
    Cardiff, Wales, UK
    Posts
    48
    Different browsers use differing default margins & padding for elements such as a H2. As you haven't specified any, that is why the gaps differ. I would remove all the <br />s and add margin & padding values to all the elements you are having issues with.

    Also, any reason you used H2 instead of H1 - They need to be semantic (ie. in correct order) for the page to validate, if i remember rightly.

  3. #3
    Join Date
    May 2005
    Posts
    2,040
    They need to be semantic (ie. in correct order) for the page to validate, if i remember rightly.
    Nope.

  4. #4
    Join Date
    Oct 2006
    Location
    Cardiff, Wales, UK
    Posts
    48
    Fair enough - still bad practice though...

    "in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3)" - http://www.w3.org/TR/WCAG10-HTML-TEC...cument-headers

  5. #5
    Join Date
    Jun 2007
    Posts
    6
    Sorted that problem out now, but I was wondering..

    I have my main content div with a left and right border, that runs from the top of the div down to where the text finishes. How do I make it so that the div (and therefore the borders) always extend to the bottom of the browser window?

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles