4 replies [Last post]
bridgewerk
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2007-10-10
Posts: 2
Points: 0

My new site looks great in Safari on a Mac and IE 7 on the PC. But Firefox on both the Mac and PC are displaying the page strangely. The design is supposed to go to the top of the browser like in IE - a top margin of 0. But in Firefox, the whole thing is moved down by about 10 pixels. I tried adding a top border of 1px which displays the border at 0 but the rest of the information is still pushed down by about 10px. Any clue why this is happening? I've tried everything I can think of. I've validated the page and everything seems to be ok.

http://www.rle.mit.edu/nmeg/newsite/

http://www.rle.mit.edu/nmeg/newsite/nano_style.css

HTML CODE

RLE :: Nanomaterials and Electronics Group

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

<empty> home news research

people
publications
courses
contact
<empty>



The RLE Nano-materials and Electronics Group pursues investigations of carbon nanotubes, including studies of chemical vapor deposition methods, electron transport in single-walled carbon nanotubes, nanotube synthesis, and tunable Raman systems for characterizing the chirality of nanotube materials. A major objective of the group is to develop synthesis and control techniques to create electronic devices based on carbon nanotubes.




News



03.14.2007

Seven
research teams win Deshpande grants


07.01.2004

Quantum
change for nanotubes












Home / News / Research / People / Publications / Courses / Contact

© 2007 Massachusetts Institute of Technology


Research Laboratory of Electronics at MIT
MIT


CSS Code

div#siteheader {
background-image: url(images/siteheader.png);
background-repeat: no-repeat;
text-indent: -9999px;
height: 114px;
width: 400px;
background-position: 51px;
margin: 0px;
padding: 0px;
}
div#mainarea {
margin: 51px 10px 51px 51px;
height: auto;
width: 680px;
}
div#textinfo {
float: left;
height: auto;
width: 422px;
}
div#photoboxes {
float: right;
height: auto;
width: 230px;
}
div#fullpage {
height: auto;
width: 760px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
text-align: left;
margin-right: auto;
margin-left: auto;
border-top: 0px none;
border-right: 1px solid #C72E0A;
border-bottom: 1px solid #C72E0A;
border-left: 1px solid #C72E0A;
}
div#topnavbar {
background-image: url(images/topnav_09.png);
background-repeat: repeat-x;
height: 35px;
width: 100%;
}
div#bottomnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
height: 90px;
width: auto;
padding: 15px 0px 10px 35px;
clear: both;
margin: 0px;
}
.bodytextblack {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a:link {
color: #FF0000;
text-decoration: underline;
}
a:visited {
color: #CCCCCC;
text-decoration: underline;
}

sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 8 years 47 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

Add to your styles *

Add to your styles
* {
margin:0;
padding:0;
}

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, Try adding this to your

Hi,

Try adding this to your stylesheet...

div#fullpage{
float:left;
margin-top:0px;
}

You might might need to add another container div, that you can giv the rest of styling to... i.e. center aligning it and all..

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

bridgewerk
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2007-10-10
Posts: 2
Points: 0

Sweet! That Worked! Thanks!

I added that small line:

* { margin:0; padding:0; }

and it worked perfectly. I knew it was something small I was overlooking. Thanks again!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

bridgewerk wrote:I added

bridgewerk wrote:
I added that small line:

* { margin:0; padding:0; }

and it worked perfectly. I knew it was something small I was overlooking. Thanks again!
Nanomaterials and Electronics Group
You used a maul to drive a tack. The issue is margin collapse (Google is your friend). Firefox is acting correctly, collapsing the h1 margin through its ancestors to body or html. IE (and Safari?) over-collapse, IE collapsing through body and html, which is wrong.

I am not a fan of removing all margins willy-nilly, preferring to apply rules to the element in question rather than carpet bombing. h1 {margin-top: 0;} would have done the job.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.