/    Sign up×
Community /Pin to ProfileBookmark

bottom margin/padding in IE and NN in Windows

Copy linkTweet thisAlerts:
Jul 25.2005

Hi.

I’ve got a (pretty simple) CSS layout that works properly in NN, Opera, IE, Firefox, and Safari in a Mac environment and Firefox in a PC environment.

In NN and IE on a Windows system, there is a bottom margin (or padding) of about 4-5 pixels between the content Divs and the container Divs that shouldn’t be there. I’ve tried adjusting the bottom-margin values, but, alas, to no avail. Any ideas anyone?

The URL is [url]http://www.tenderfoot.com.au/brucedawe/index.htm[/url]

The index page has a different css:
[url]http://www.tenderfoot.com.au/brucedawe/css/style_hm.css[/url]

The other pages link to
[url]http://www.tenderfoot.com.au/brucedawe/css/style.css[/url]

Thanks,
Flying Monkey

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@bathurst_guyJul 25.2005 — I guess youve tried giving #page and #content a padding: 0;
Copy linkTweet thisAlerts:
@Flying_MonkeyauthorJul 25.2005 — Yeah I did. Good point though. I've just changed them again, but I'm at home and I've only got Mac here so I can't tell any difference. If you're still around, would you mind checking?
Copy linkTweet thisAlerts:
@bathurst_guyJul 25.2005 — Still there on IE PC. I'll have another looksy..
Copy linkTweet thisAlerts:
@bathurst_guyJul 25.2005 — Hmm not sure sorry. All I can really think now is that there may be a space but you would think that that would show up in all browsers anyway.

I might have to leave it for someone else who knows a bit more about IE hacks ???

Sorry
Copy linkTweet thisAlerts:
@Flying_MonkeyauthorJul 25.2005 — No worries, thanks for having a look, anyway. ?
Copy linkTweet thisAlerts:
@Flying_MonkeyauthorJul 25.2005 — Anyone else got any ideas?
Copy linkTweet thisAlerts:
@griff777Jul 25.2005 — Anyone else got any ideas?[/QUOTE]


In style_hm.css ...

[code=php]#content {
display: block;
position: relative;
width: 780px;
margin-bottom: -4px;
/*margin: 0px;*/
padding: 0px;
}[/code]

You will need a .css file for ALL other browsers, and one for IE, and a nav check routine to make sure the correct one is loaded by the client user.

Hope that helps.
Copy linkTweet thisAlerts:
@Flying_MonkeyauthorJul 25.2005 — Thanks griff777

Do you know of any online tutorials that could help me with this kind of functionality?
Copy linkTweet thisAlerts:
@griff777Jul 26.2005 — Thanks griff777

Do you know of any online tutorials that could help me with this kind of functionality?[/QUOTE]


Put something like this in the header of your html

[code=php]<script type="text/javascript">
var myCSS = (document.all) ? "mystyleIE.css" : "mystyle.css" ;
document.write('<link rel="STYLESHEET" type="text/css" href="'+myCSS+'">');
</script>[/code]

The part you'll change is the "mystyleIE.css" and "mystyle.css" to whatever names you need for either IE or the other browsers.

The CSS file for IE would of course include the modified variation of the aforemention change... IE:

[code=php]#content {
display: block;
position: relative;
width: 780px;
margin-bottom: -4px;
/*margin: 0px;*/
padding: 0px;
}[/code]

where the second CSS file would not require the negative margin.

The small snafu is that javascript must be enabled for this to work. I see you have other javascript in your html, so I assume this is not a problem.

Hope this helps you.
Copy linkTweet thisAlerts:
@Flying_MonkeyauthorJul 26.2005 — Thanks again!

I'll try that out.
Copy linkTweet thisAlerts:
@griff777Jul 26.2005 — You're welcome
Copy linkTweet thisAlerts:
@Flying_MonkeyauthorJul 27.2005 — I found a simple solution to filter IE users to a different CSS. Here's the link:

http://www.thesitewizard.com/css/excludecss.shtml

It works, simple as a comment tag with the test and then the link:

<!--[if IE 6]>

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

<![endif]-->
Copy linkTweet thisAlerts:
@griff777Jul 27.2005 — I found a simple solution to filter IE users to a different CSS. Here's the link:

http://www.thesitewizard.com/css/excludecss.shtml

It works, simple as a comment tag with the test and then the link:

<!--[if IE 6]>

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

<![endif]-->[/QUOTE]

Cool...
×

Success!

Help @Flying_Monkey spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...