Tutorial :CSS working in IE but not FF/Chrome


I feel like this is a very basic CSS question:

There seems to be a hidden "margin-top" in my CSS, which shows up in FF and Chrome, but not IE. This is the page: adambailin.com/projects

I want the project title to line up with the image. Each project is in a #project div (thin white border-top). The css for the image is

  #project_image  {     float: left;   width: 150px;   height: auto;   padding: 2px;   border: solid 1px #7E8AA2;  }  

And the css for the description part is

  #project_desc  {   float: right;   width:425px;  }

Any ideas are greatly appreciated!


You're using an H4 tag which has it's own margin.

#project_desc h4 { margin-top:0 }  


You are right. All browsers add a margin to everything by default. IE default is 0. FF and others are in the 5 - 10 range. Zero the margin in your content divs and pretty much everything that you want it to be zero like p and h1. That will avoid this kind of thing every time.

Add margin:0px to both your id's here and it should work out.

Soapbox: People are always saying FF is always right; it's IE that's doing it wrong. Oh yeah, defaulting margins to something other then zero is doing it right? I think not. Frankly, both browsers have faults and both have merits.


just use this in css

h4 {margin-top:0;}  


#project_desc h4  {  margin-top:0;  }  

might help, try installing firebug in firefox, its a web-devs best friend.


Best plan... use a css reset stylesheet to solve this problem... every browser starts with different base styles.

See this link

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »