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 <!-- m --><a class="postlink" href="http://www.tenderfoot.com.au/brucedawe/index.htm">http://www.tenderfoot.com.au/brucedawe/index.htm</a><!-- m -->
The index page has a different css:
<!-- m --><a class="postlink" href="http://www.tenderfoot.com.au/brucedawe/css/style_hm.css">http://www.tenderfoot.com.au/brucedawe/css/style_hm.css</a><!-- m -->
The other pages link to
<!-- m --><a class="postlink" href="http://www.tenderfoot.com.au/brucedawe/css/style.css">http://www.tenderfoot.com.au/brucedawe/css/style.css</a><!-- m -->
Thanks,
Flying MonkeyI guess youve tried giving #page and #content a padding: 0;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?Still there on IE PC. I'll have another looksy..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 ???
SorryNo worries, thanks for having a look, anyway.
Anyone else got any ideas?Anyone else got any ideas?
In style_hm.css ...
#content {
display: block;
position: relative;
width: 780px;
margin-bottom: -4px;
/*margin: 0px;*/
padding: 0px;
}
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.Thanks griff777
Do you know of any online tutorials that could help me with this kind of functionality?Thanks griff777
Do you know of any online tutorials that could help me with this kind of functionality?
Put something like this in the header of your html
<script type="text/javascript">
var myCSS = (document.all) ? "mystyleIE.css" : "mystyle.css" ;
document.write('<link rel="STYLESHEET" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"'+myCSS+'">');
</script>
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:
#content {
display: block;
position: relative;
width: 780px;
margin-bottom: -4px;
/*margin: 0px;*/
padding: 0px;
}
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.Thanks again!
I'll try that out.You're welcomeI found a simple solution to filter IE users to a different CSS. Here's the link:
<!-- m --><a class="postlink" href="http://www.thesitewizard.com/css/excludecss.shtml">http://www.thesitewizard.com/css/excludecss.shtml</a><!-- m -->
It works, simple as a comment tag with the test and then the link:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"iespecific.css" />
<![endif]-->I found a simple solution to filter IE users to a different CSS. Here's the link:
<!-- m --><a class="postlink" href="http://www.thesitewizard.com/css/excludecss.shtml">http://www.thesitewizard.com/css/excludecss.shtml</a><!-- m -->
It works, simple as a comment tag with the test and then the link:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"iespecific.css" />
<![endif]-->
Cool...
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 <!-- m --><a class="postlink" href="http://www.tenderfoot.com.au/brucedawe/index.htm">http://www.tenderfoot.com.au/brucedawe/index.htm</a><!-- m -->
The index page has a different css:
<!-- m --><a class="postlink" href="http://www.tenderfoot.com.au/brucedawe/css/style_hm.css">http://www.tenderfoot.com.au/brucedawe/css/style_hm.css</a><!-- m -->
The other pages link to
<!-- m --><a class="postlink" href="http://www.tenderfoot.com.au/brucedawe/css/style.css">http://www.tenderfoot.com.au/brucedawe/css/style.css</a><!-- m -->
Thanks,
Flying MonkeyI guess youve tried giving #page and #content a padding: 0;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?Still there on IE PC. I'll have another looksy..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 ???
SorryNo worries, thanks for having a look, anyway.
Anyone else got any ideas?Anyone else got any ideas?In style_hm.css ...
#content {
display: block;
position: relative;
width: 780px;
margin-bottom: -4px;
/*margin: 0px;*/
padding: 0px;
}
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.Thanks griff777
Do you know of any online tutorials that could help me with this kind of functionality?Thanks griff777
Do you know of any online tutorials that could help me with this kind of functionality?
Put something like this in the header of your html
<script type="text/javascript">
var myCSS = (document.all) ? "mystyleIE.css" : "mystyle.css" ;
document.write('<link rel="STYLESHEET" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"'+myCSS+'">');
</script>
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:
#content {
display: block;
position: relative;
width: 780px;
margin-bottom: -4px;
/*margin: 0px;*/
padding: 0px;
}
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.Thanks again!
I'll try that out.You're welcomeI found a simple solution to filter IE users to a different CSS. Here's the link:
<!-- m --><a class="postlink" href="http://www.thesitewizard.com/css/excludecss.shtml">http://www.thesitewizard.com/css/excludecss.shtml</a><!-- m -->
It works, simple as a comment tag with the test and then the link:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"iespecific.css" />
<![endif]-->I found a simple solution to filter IE users to a different CSS. Here's the link:
<!-- m --><a class="postlink" href="http://www.thesitewizard.com/css/excludecss.shtml">http://www.thesitewizard.com/css/excludecss.shtml</a><!-- m -->
It works, simple as a comment tag with the test and then the link:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"iespecific.css" />
<![endif]-->
Cool...