Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1354 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Help: CSS layout appears different on IE than FF

Thread title: Help: CSS layout appears different on IE than FF
Closed Thread    
    Thread tools Search this thread Display Modes  
07-11-2008, 10:45 PM
#1
AidanF is offline AidanF
Status: I'm new around here
Join date: Jan 2007
Location:
Expertise:
Software:
 
Posts: 18
iTrader: 0 / 0%
 

AidanF is on a distinguished road

  Old  Help: CSS layout appears different on IE than FF

Hello i've started coding my layout and ive hit a snag. My problem is that my page looks differnt in IE than in FF and i cant seem to resolve. The two problems i have are. One div is 35px lower than the other so the layout doesnt fit together. The background repeat on content div continues through my footer!
Here is my site:
http://mathrevise.com/Coding

I will post the code aswell.
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MathRevise - Learning maths can bring many rewards further in life! Init bluds</title>
  </head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <body>
    <div id="layout">

    	<div id="header"></div>
    	<div id="content">
        	<div id="navigation"></div>
       		<div id="right-content">
                 Lorem Ipsum here ect..
      	 	</div>

            <div id="left-content">          
            	Div which drops down in IE here          
            </div>
            <div id="footer"></div>
     	</div>
    </div>
  </body>
</html>
CSS:
Code:
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
p {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#layout {
width:1024px;
}
#content {
background:url(images/Main_Grad.gif) repeat-y;
width:1024px;
position: relative;
float:left;
}
#footer {
background:url(images/Footer.gif) no-repeat;
height:15px;
width:1024px;
float:left;
}
#navigation {
background:url(images/Navigation_Back.gif) no-repeat;
border-right:22px;
border-bottom:15px;
height:52px;
float:right;
position:relative;
width:767px;
}
#left-content {
position:relative;
width:249px;
padding-left:24px;
}
#right-content {
padding-right:25px;
position:relative;
float:right;
width:720px;
}
#header {
background-image:url(images/header.gif);
width:1024px;
height:220px;
}
When finsihed coding the site should look like this:
http://www.tehupload.com/images/7463...Untitled-2.png

Thank you in advanced,
Aidan

07-12-2008, 12:16 AM
#2
Ethan.Ellis is offline Ethan.Ellis
Status: I'm new around here
Join date: Jul 2008
Location:
Expertise:
Software:
 
Posts: 2
iTrader: 0 / 0%
 

Ethan.Ellis is on a distinguished road

  Old

Hrmm I don't see to much of a diff between the two but the answer to your problem is to create a new stylesheet just for IE .. well not create a whole new one just fix up the one you have so it works in IE and save it as ie.css or sumthign like that then go to your code

and use this code

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

basically what that does is it tells the code to use ie.css when the user is using IE 6 or lower ... google it and you will find more answers ...

plus a friend of mine said there is a easier way but I don't know it so ya google it

07-12-2008, 03:10 AM
#3
Sahil is offline Sahil
Status: Sin Binner
Join date: Nov 2006
Location: Singapore.
Expertise:
Software:
 
Posts: 1,363
iTrader: 3 / 64%
 

Sahil is an unknown quantity at this point

Send a message via AIM to Sahil Send a message via MSN to Sahil

  Old

NO, that is NOT the answer. The real answer is creating code that works in all browsers, without any hacks.

I don't have a solution for you, but you can download two-column layouts or whatnot off of many reputable CSS sites, and use that as a base for your own code.

07-12-2008, 03:40 AM
#4
Ethan.Ellis is offline Ethan.Ellis
Status: I'm new around here
Join date: Jul 2008
Location:
Expertise:
Software:
 
Posts: 2
iTrader: 0 / 0%
 

Ethan.Ellis is on a distinguished road

  Old

well the hack works fine to therefore you might as well use it...

07-12-2008, 01:30 PM
#5
AidanF is offline AidanF
Status: I'm new around here
Join date: Jan 2007
Location:
Expertise:
Software:
 
Posts: 18
iTrader: 0 / 0%
 

AidanF is on a distinguished road

  Old

I jst gave up and recoded it from scratch and seem to work fine now!
Thanks for all help,
Aidan

Admin can close topic now

07-13-2008, 03:03 AM
#6
shaza4061 is offline shaza4061
Status: I'm new around here
Join date: Jul 2008
Location:
Expertise:
Software:
 
Posts: 11
iTrader: 0 / 0%
 

shaza4061 is on a distinguished road

  Old

In my experience designing css for ie and firefox, microsoft didnt follow the w3c standard for ie, thus the output sometimes different in ie and firefox. What I always do is use other css properties which both are supported and have the same output in ie and firefox. this is to have one css for both ie and firefox, or i use 2 css seperately for ie and firefox. BTW, cool tips from Ethan.Ellis. i never knew i could do that. i usuallly use use javascript to detect ie or firefox browser.

07-15-2008, 04:09 PM
#7
ditch182 is offline ditch182
Status: Junior Member
Join date: Jul 2008
Location: NC
Expertise:
Software:
 
Posts: 70
iTrader: 0 / 0%
 

ditch182 is on a distinguished road

  Old

Historic versions of IE have done a fairly poor job of implementing W3C standards. It's actually fairly difficult to make things look the same in all or even most browsers. One of the biggest problems that IE had in the past is the way they implemented the "box model" meaning that IE calculates margins and padding differently than the W3C spec. So a single block element with margins and padding look different in IE than in Firefox.

07-28-2008, 06:20 PM
#8
Caden is offline Caden
Status: Junior Member
Join date: Jul 2006
Location: Denver, Colorado
Expertise:
Software:
 
Posts: 66
iTrader: 0 / 0%
 

Caden is on a distinguished road

Send a message via AIM to Caden Send a message via MSN to Caden

  Old

Originally Posted by slavingia View Post
NO, that is NOT the answer. The real answer is creating code that works in all browsers, without any hacks.

I don't have a solution for you, but you can download two-column layouts or whatnot off of many reputable CSS sites, and use that as a base for your own code.
Actually, that is how most of the sites fix the errors, it's fine and works so why not?

07-29-2008, 11:49 AM
#9
webunicorn is offline webunicorn
webunicorn's Avatar
Status: I'm new around here
Join date: Jul 2008
Location: Egypt
Expertise:
Software:
 
Posts: 16
iTrader: 0 / 0%
 

webunicorn is on a distinguished road

  Old

IE browser is the designer's enemy
I hope this end with the new IE8

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed