Is there any way I can specify certain lines within one CSS file are meant to be interpreted ONLY by IE?
Thanx.This should work:
body p{
color:#f00; /* IE styles */
}
html>body p{
color:#00f;
}Okay.
What if I need to specify a height for a DIV ONLY for IE and then a min-height for everyone else.
I know I can just put min-height in there, but if I add the height, all the other browsers interpret it as well.
Thanx.How about this then:
body p{
height:100px; /* IE styles */
}
html>body p{
height:auto;
min-height:100px;
}Worked perfectly!
Thanx!!!
Happy to help. 
Okay, here's another problem...
The following code works to separate IE and Opera, but Netscape and Mozilla aren't picking up the styles:
body div#nav ul li#l13,
body div#nav ul li#l14,
body div#nav ul li#l15
{
width: 6.9em; /* IE style */
}
html>body div#nav ul li#l13,
html>body div#nav ul li#l14,
html>body div#nav ul li#l15
{
width: 7em; /* Opera style */
}
Is there any browser-specific code to accomplish the above for Netscape and Mozilla?
Thanx.if all that needs to be different is the width, why not just use the handy !important like so:
#nav ul li#l13,#nav ul li#l14,#nav ul li#l15{
width:7em !important;
width:6.9em;
}Okay, but how do I get Netscape and Mozilla to take the width properly?
Thanx.they do in the above exampleMust be something else in my code somewhere as it is still only working in IE and Opera.
Thanx.Hmm...
I moved my site from my hard drive to a server to see if the problem was "local" and now I have other problems.
Yes, I know GeoCities is truly evil incarnate, but it's free.
Can someone take a peek and tell me why the background images on the bottom three links aren't visible? And why the widths between the left and right margins of the links column vary between browsers?
Thanx.
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/Look">http://www.geocities.com/stmasi/Look</a><!-- m --> at this monster of a selector:
body#index #container #nav li#l01 a,
body#about #container #nav li#l02 a,
body#missi #container #nav li#103 a,
body#servi #container #nav li#l04 a,
body#resou #container #nav li#l05 a,
body#physi #container #nav li#l06 a,
body#homeh #container #nav li#l07 a,
body#emplo #container #nav li#l08 a,
body#progr #container #nav li#l09 a,
body#found #container #nav li#l10 a,
body#infor #container #nav li#l11 a,
body#conta #container #nav li#l12 a
{
Totally unneccesary, replace it with this and over-rule it for the last three links later:
#nav a{
The reason that your background images are not being applied to the last three list items is because the images simply do not exist at the URL's you specified, take the first one for instance. Click on this link (<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/gfx/bar-1-dark.jpg">http://www.geocities.com/stmasi/gfx/bar-1-dark.jpg</a><!-- m -->) and see where you go.
Now onto the varying margins, I believe that these are the relevant that apply to your nav section:
div#nav
{
background-color: transparent;
clear: none;
float: right;
margin: 0;
padding: 0 0.5em 0 0;
text-align: center;
width: 7em !important;
width: 6.9em;
}
div#nav ul
{
background-color: transparent;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
div#nav ul li
{
background-color: #777;
border: 1px solid #000;
color: #000;
display: block;
margin: 0 0 0.25em 0;
padding: 0;
width: 100%;
}
Change them to this and see if it makes a difference (untested):
div#nav
{
background-color: transparent;
clear: none;
float: right;
margin: 0;
padding: 0 0.5em;
text-align: center;
width: 7em;
}
div#nav ul
{
background-color: transparent;
list-style-type: none;
margin: 0 0.5em;
padding: 0;
}
div#nav ul li
{
background-color: #777;
border: 1px solid #000;
color: #000;
margin: 0 0 0.25em 0;
padding: 0;
}
Thanx.This should work:
body p{
color:#f00; /* IE styles */
}
html>body p{
color:#00f;
}Okay.
What if I need to specify a height for a DIV ONLY for IE and then a min-height for everyone else.
I know I can just put min-height in there, but if I add the height, all the other browsers interpret it as well.
Thanx.How about this then:
body p{
height:100px; /* IE styles */
}
html>body p{
height:auto;
min-height:100px;
}Worked perfectly!
Thanx!!!
Happy to help. Okay, here's another problem...The following code works to separate IE and Opera, but Netscape and Mozilla aren't picking up the styles:
body div#nav ul li#l13,
body div#nav ul li#l14,
body div#nav ul li#l15
{
width: 6.9em; /* IE style */
}
html>body div#nav ul li#l13,
html>body div#nav ul li#l14,
html>body div#nav ul li#l15
{
width: 7em; /* Opera style */
}
Is there any browser-specific code to accomplish the above for Netscape and Mozilla?
Thanx.if all that needs to be different is the width, why not just use the handy !important like so:
#nav ul li#l13,#nav ul li#l14,#nav ul li#l15{
width:7em !important;
width:6.9em;
}Okay, but how do I get Netscape and Mozilla to take the width properly?
Thanx.they do in the above exampleMust be something else in my code somewhere as it is still only working in IE and Opera.
Thanx.Hmm...
I moved my site from my hard drive to a server to see if the problem was "local" and now I have other problems.
Yes, I know GeoCities is truly evil incarnate, but it's free.
Can someone take a peek and tell me why the background images on the bottom three links aren't visible? And why the widths between the left and right margins of the links column vary between browsers?
Thanx.
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/Look">http://www.geocities.com/stmasi/Look</a><!-- m --> at this monster of a selector:
body#index #container #nav li#l01 a,
body#about #container #nav li#l02 a,
body#missi #container #nav li#103 a,
body#servi #container #nav li#l04 a,
body#resou #container #nav li#l05 a,
body#physi #container #nav li#l06 a,
body#homeh #container #nav li#l07 a,
body#emplo #container #nav li#l08 a,
body#progr #container #nav li#l09 a,
body#found #container #nav li#l10 a,
body#infor #container #nav li#l11 a,
body#conta #container #nav li#l12 a
{
Totally unneccesary, replace it with this and over-rule it for the last three links later:
#nav a{
The reason that your background images are not being applied to the last three list items is because the images simply do not exist at the URL's you specified, take the first one for instance. Click on this link (<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/gfx/bar-1-dark.jpg">http://www.geocities.com/stmasi/gfx/bar-1-dark.jpg</a><!-- m -->) and see where you go.
Now onto the varying margins, I believe that these are the relevant that apply to your nav section:
div#nav
{
background-color: transparent;
clear: none;
float: right;
margin: 0;
padding: 0 0.5em 0 0;
text-align: center;
width: 7em !important;
width: 6.9em;
}
div#nav ul
{
background-color: transparent;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
div#nav ul li
{
background-color: #777;
border: 1px solid #000;
color: #000;
display: block;
margin: 0 0 0.25em 0;
padding: 0;
width: 100%;
}
Change them to this and see if it makes a difference (untested):
div#nav
{
background-color: transparent;
clear: none;
float: right;
margin: 0;
padding: 0 0.5em;
text-align: center;
width: 7em;
}
div#nav ul
{
background-color: transparent;
list-style-type: none;
margin: 0 0.5em;
padding: 0;
}
div#nav ul li
{
background-color: #777;
border: 1px solid #000;
color: #000;
margin: 0 0 0.25em 0;
padding: 0;
}