Safari, Firefox and margin/padding handling

codesetter · Joined: 13 Mar 2008 Posts: 4

First post here after discovering this site...looks like an oasis for HTML/CSS questions!

I am trying to boost my CSS skills, and am using Safari and Firefox to view my pages.

Things are going very well, yet I notice that Firefox and Safari handle either margins, or padding, or both, differently from each other.

The thing I'm trying to understand now is: why something lines up perfectly in Firefox, but not in Safari. I've narrowed it down to margins/padding, or the position:absolute value I'm using..

It's my understanding that both browsers are respected for near-100% code compliance. Nobody and nothing is perfect, but I'm still stuck with having things good in one browser and out of line in the other.

And it's more the relationships I'm concerned with..sometimes text appears larger in one browser compared to the other, and that doesn't bug me so much as having things not lined up properly bcs it looks sloppy and makes it look like I don't know what I'm doing!

Which, I guess, I don't, else I wouldn't be posting! Embarassed

Any clues about this would be apprecaiated!

Thanks,

setter

Corey Bryant · Posted: Fri Mar 14, 2008 8:45 am

Source code would help us to help you out.

_________________
Corey
Residential Office Solutions | Mile High Merchant Accounts | Expression Web Blog

codesetter · Joined: 13 Mar 2008 Posts: 4

codesetter · Joined: 13 Mar 2008 Posts: 4

OK...I got things to be consistent between the 2 browsers, Safari and Firefox...except for one thing: the Position absolute of the story head and body is much lower in Safari than in Firefox...

As far as how I got the other things consistent is concerned, I stripped away the border-left declarations and got the page down to just text, and examined the CSS for inconsistencies, which I rectified, then added back the border elements. So, that part I'd chalk up to hastiness/inexperience. I tend to miss those little fatal omissions or additions that can make a page look pretty scary. I guess I need to scan my code more carefully.

I'll paste the page code first, followed by the CSS, separated by a line of +++++

thanks!

setter
____________________

<html>
<head>
<title>text file experiment</title>

<link rel="stylesheet" type="text/css" href="problemA.css"/>

</head>
<body>

<div id="container">

<div id="topBar">page title</div>

<div id="tag">eugait lum ver suscipit acin</div>

</div>

<div id="body">

<div id="storyhead">Lorem Ipsum sit amet Dolor</div>

<p>
Equam zzriustis niam, volortie dolorpe rcidunt wis augait ver aut laore magnim delenit irillut niatie doloreet la aliquam consed tinim quis ad magnisit amet, quam zzrilit nis ex er iriusci eugait lum ver suscipit acin exeriliquisi exeriustrud te minci esectem dolore tat lan henibh el et adipit ipit ip ex etum essis aut alit amcon hent prat.
</p>

<p>
Equam zzriustis niam, volortie dolorpe rcidunt wis augait ver aut laore magnim delenit irillut niatie doloreet la aliquam consed tinim quis ad magnisit amet, quam zzrilit nis ex er iriusci eugait lum ver suscipit acin exeriliquisi exeriustrud te minci esectem dolore tat lan henibh el et adipit ipit ip ex etum essis aut alit amcon hent prat.
</p>

</div>

</body>
</html>

++++++++++++++++++++++++++++++++

html {margin:0;padding:0
}

body {background:rgb(170,180,170);margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;
}

#container

{ position:absolute;

left:0em;

margin-left:0px;
overflow:hidden;
}

#topBar
{ margin-top:0;margin-left:0px; padding:0 0 0 0;
height:83px;width:5000px; color:rgb(30,30,30); font:40px Andale Mono, Verdana, sans-serif; line-height:120px; border-left:30px solid black;
}

#tag
{margin-top:0em;margin-left:0em;font:12px helvetica, verdana, sans-serif;color:silver;line-height:24px;border-bottom:1px solid black;padding:0 0px 0 4px;border-left:30px solid black;background:black;
}

#storyhead
{ font:30px helvetica, verdana;font-weight:bold;letter-spacing:1px;padding:0 0 0 0; margin:0px 0px 0px 0px;
}

p
{font:10px andale mono,verdana;line-height:18px;color:rgb(40,40,40);padding:0px 10px 10px 0px; margin:0 0 0 0;;
}

#body
{ position:absolute; top:10em;
margin-top:0em; padding:0 0px 0px 32px;
width:500px;

}

sticks464 · Joined: 31 Dec 2006 Posts: 1172

Play around with this for awhile

codesetter · Joined: 13 Mar 2008 Posts: 4