Announcement

**coder_seth** · Mar 9, 2004, 06:59 PM

first off, here is how i would refine your styleshee. i would start by ditching your rule for <html> since it's unecessary, as far as i know. if there's something you know that i don't, by all means share, but i believe you'll get the same results without it. secondly, on your body rule, i would add a backup font-family in case people don't have "Cursive", unless you're not concerned with everybody getting a similar view. For instance, if "Cursive" was a serif font, but somebody didn't have it, they might default to a sans-serif font.

Code:

/*Basic elements*/
body {
   margin: 0px;
   font-family: "cursive", sans-serif(or serif, depending on what fits your style);
   background: #09F; /* i always like to keep my markup and code as minimalist as possible. this will give you the same effect. many rules can be condensed like this. */
}

Also, for hex values like that where the R, G, and B values are twin pairs like that (0099FF, or 669966 for example) you can condense those values to three digits: #09F for example is the same as #0099FF

Code:

a {text-decoration: none} /* no need to specify that text decoration rule umpteen times.. the pseudo class rules will inherit that unless you specify otherwise. i also like to get ride of the :link pseudo-class because it's unecessary. as far as i know, simply specifying "a" is equivalent */

a, a:visited {
   color: #00F;
   border-bottom: 1px dashed #00F;
}

a:hover, a:active, a:focus {
   color: #F00;
   border-bottom: 1px solid #F00;
}

a.image {border: none} /* here again, the pseudo classes will inherit, and the shorter rule is all you need */

img {border: none}

acronym {border-bottom: 1px dashed; cursor: help;} /* should probably specify a color for that border... */

li { list-style-type: none;}

use those same ideas to further condense the remaining rules.

as for the main issue, it's been a long day, and i have no idea.. do you have any javascript in your page that might be playing tricks with you?

if you could put together a page that exhibits the behavior you claim, perhaps somebody might be able to help. it's always best to give people access to what you're working on, unless it's a simple problem that can be addressed by citing a few blocks of code.

**shlagish** · Mar 9, 2004, 08:35 PM

lol, I have been putting so much useless code in there, thanks for the pointers.
As for the main problem, when I apply another style, it doesn't occur, so it's not the hmtl (which has no javascript at all btw, it's just divs with ids and lists and h3s and h5s, nothing complicated)
I will host my site for the purpose of demonstrating my problem, just give me a second: by the way, don't laugh at the content, it's a template page, not a real page, and there is a lot of stuff in there because I wanted it to span downwards a lot

Here it is

To view the problem, visit the page with IE and mouse over the links in the #footerLinks div (XTHML,CSS,Link3) at the bottom left of the page using the bleuwy style (default)
btw, if you see any javascript in the source, it has been added by angelfire and does not count since the problem occurs even on my local hard drive.
The only javascript I have is the switchStyle() function.
Here is the angelfire-less code:

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />

<title>An original title</title>

<link rel="stylesheet" type="text/css" title="bleuwy" href="bleuwy.css" />
<link rel="alternate stylesheet" type="text/css" title="noStyle" href="noStyle.css" />
<link rel="alternate stylesheet" type="text/css" title="uglyOne" href="uglyOne.css" />
<link rel="alternate stylesheet" type="text/css" title="linear" href="linear.css" />

<script type="text/javascript">
<!--

function switchStyle(title)
{
var i, a, main;
for (i=0;(a=document.getElementsByTagName("link")[i]);i++)
{
if(a.getAttribute("rel").indexOf("style")!=-1 && a.getAttribute("title"))
{
a.disabled = true;
if(a.getAttribute("title") == title)
{
a.disabled = false;
}
}
}
}

-->
</script>

</head>
<body id="TheBody">

<div id="Container">
 <div id="header">
  <h1 id="title">An original Title</h1>
  <h3 id="subTitle">An original subTitle</h3>
 </div>
 <div id="Main">
  <h3>Site information</h3>
  <div>
  <h5>Using <acronym title="Cascading Style Sheets">CSS</acronym></h5>
<p>This page is basically the template of a good page that uses correct <acronym title="Cascading Style Sheets">CSS</acronym> and a <a href="http://www.alistapart.com/articles/alternate/">Style switcher</a>. This is my first try at this, but I'm not bad. <acronym title="By The Way">Btw</acronym>, this page's <acronym title="Cascading Style Sheets">CSS</acronym> <a href="http://jigsaw.w3.org/css-validator/check/referer">validates</a>.</p>
  </div>
  <div>
  <h5>Strict <acronym title="eXtensible HyperText Markup Language">XHTML</acronym></h5>
<p>In this site, I also have correct <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> that <a href="http://validator.w3.org/check/referer">validates</a>. (validating links can be found at the bottom of the page.)</p>
  </div>
 <div>
  <h5>New styles</h5>
<p>I'm going to try having at least 1 more style to choose from. Right now, I have 4 choices. <a href="javascript: switchStyle('noStyle')">No style</a> (for printing?), the default style, <a href="javascript: switchStyle('bleuwy')">Bleuwy</a>, <a href="javascript: switchStyle('uglyOne')">uglyOne</a> and <a href="javascript: switchStyle('linear')">linear</a>. I don't know what my other style will look like, but I'll try to make it nice.</p>
  </div>
 <div>
  <h5>Javascript?</h5>
<p>I don't know if I sould add javascripts to this page.  I try figuring out if it's "compatible" with everything I want it to be (all browsers).  Of course, having javascript will never be "necessary" for this page.  But some cool features would be nice.</p>
  </div>
 <div>
  <h5>That's it!</h5>
<p>That's pretty much all there is. I know about <acronym title="eXtensible HyperText Markup Language">XHTML</acronym>, <acronym title="Cascading Style Sheets">CSS</acronym> and javascript. And that's what there will be on this page! It's basically just a model for the "perfect" validating page. So if I ever need to make a real website, I'll know where to start from.</p>
  </div>
  <div>
   <h5>Validations</h5>
<p>I am happy to be able to put the following images on my web page, because it validates as <acronym title="eXtensible HyperText Markup Language version 1.0 Strict">XHTML 1.0 Strict</acronym> and as <acronym title="Cascading Style Sheets">CSS</acronym>.<br /><br />
<a href="http://validator.w3.org/check/referer" class="image"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> &nbsp; <a href="http://jigsaw.w3.org/css-validator/check/referer" class="image"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS 3!" height="31" width="88" /></a>
</p>
  </div>
 </div>
 <div id="NavigationLinks">
  <ul>
   <h5>Change Style</h5>
   <li><a href="javascript: switchStyle('noStyle')">No style (for printing)</a></li>
   <li><a href="javascript: switchStyle('bleuwy')">Bleuwy</a></li>
   <li><a href="javascript: switchStyle('uglyOne')">uglyOne</a></li>
   <li><a href="javascript: switchStyle('linear')">linear</a></li>
   <li><a href="#">Link5</a></li>
  </ul>
  <ul>
   <h5>Resources links</h5>
   <li><a href="http://www.w3.org"><acronym title="World Wide Web Consortium">W3C</acronym></a></li>
   <li><a href="http://www.codingforum.net/showthread.php?threadid=20862"><acronym title="HyperText Markup Language">HTML</acronym>&<acronym title="Cascading Style Sheets">CSS</acronym></a></li>
   <li><a href="http://www.codingforum.net/showthread.php?threadid=17254&highlight=javascript+documentation">Javascript</a></li>
  </ul>
  <ul>
   <h5>Reffered-to links</h5>
   <li><a href="http://www.alistapart.com">A list apart</a>
    <ul>
     <li><a href="http://www.alistapart.com/articles/alternate/">Style switcher</a></li>
    </ul>
   </li>
  </ul>
 </div>
 <div id="footerLinks">
  <ul>
   <li><a href="http://validator.w3.org/check/referer">XHTML</a></li>
   <li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
   <li><a href="#">Link3</a></li>
  </ul>
 </div>
</div>

</body>
</html>

And here is the faulty stylesheet (bleuwy.css)

Code:

/*Basic elements*/
html { margin: 0px; padding: 0px; }
body { margin: 0px; padding: 0px; font-family: cursive; background-color: #0099FF; }
a:link, a:visited { text-decoration: none; color: #0000FF; border-bottom: 1px dashed #0000FF; }
a:hover, a:active, a:focus { text-decoration: none; color: #FF0000; border-bottom: 1px solid #FF0000; }
a.image:link, a.image:visited, a.image:hover, a.image:active, a.image:focus { border-width: 0px; }
img { border-width: 0px; }
acronym { border-bottom: 1px dashed; cursor: help; }
li { list-style-type: none; }

/*Specific objects*/
#Container { text-align: center; }

#header { color: #990066; font-style: italic; margin-bottom: 100px; }
#header h1 { margin-bottom: 0px; }
#header h3 { margin-top: 0px; }

#Main { width: 60%; float: right; border: 1px solid #000000; background-color: #99CCFF; margin-right: 5%; }
#Main h3 { background-color: #000000; color: #FF0000; font-family: monospace; margin-top: 0px; }
#Main h5 { background-color: #999999; margin-bottom: 0px; }
#Main p { margin-top: 0px; }

#NavigationLinks { text-align: right; font-family: sans-serif; }
#NavigationLinks ul { border-width: 1px 5px 0px 0px; border-style: solid; border-color: #330000; width: 200px; background-color: #99CCFF; }
#NavigationLinks li { line-height: 150%; background-color: #99CCFF; padding-right: 5px; }
#NavigationLinks li a:hover, #NavigationLinks li a:active, #NavigationLinks li a:focus { background-color: #CCFFFF; }
#NavigationLinks li ul { border-width: 0px; width: 100px; margin-left: -100; }
#NavigationLinks li ul li { list-style-type: disc; }

#footerLinks { margin-top: 20px; }
#footerLinks li { float: left; font-size: 75%; }
#footerLinks li a:link, #footerLinks li a:visited { background-color: #CCCCCC; border-width: 0px 1px; border-style: solid; border-color: #330000; }
#footerLinks li a:hover, #footerLinks li a:active, #footerLinks li a:focus { border-bottom: 1px solid #FF0000; background-color: #000000; }

Thanks for any help.
I didn't make the changes in the css you suggested, I will get to it later and will update when it's done.

**shlagish** · Mar 9, 2004, 08:36 PM

oh, and by the way, to re-enable scrolling (once the problem occured), reload the page.

**shlagish** · Mar 9, 2004, 08:55 PM

I'm trying to edit my stylesheet to make it shorter.
I seem to be having trouble with boders.
This isn't working:

#footerLinks li a, #footerLinks li a:visited { background: #CCC; border: 0px 1px solid #300; }
No borders are showing at all.
What's wrong?

hmm, it works in IE, not in firebird..

and this works:

#footerLinks li a:link, #footerLinks li a:visited { background-color: #CCCCCC; border-width: 0px 1px; border-style: solid; border-color: #330000; }

**coder_seth** · Mar 9, 2004, 09:43 PM

look closely at that border rule, and you'll see why the STANDARDS COMPLIANT browser didn't render your border, whereas the buggy, allbeit more forgiving of human error, IE did.

also, fyi, this is how the page you linked looks in Firefox for me right now:

now, about your disappearing content. did you notice, as i did, that it's not just those three footer links, but the entire bottom two sections of your sidebar area? the links to ALA, W3C, etc? they all trigger the disappearing content. but then what i also noticed is that it reappears once you mouse over any of the other links.

just wanted to share that.. i'm gonna look closer at your markup and style code now..

**coder_seth** · Mar 9, 2004, 10:26 PM

more on CSS shorthand: http://home.no.net/junjun/html/shorthand.html

as for that weird issue.. i don't know man. that's odd. i gotta take a break from code for the day though. good luck!

**Willy Duitt** · Mar 9, 2004, 11:59 PM

I do not think IE likes your use of a:focus

eg: #NavigationLinks li a:focus { background-color: #CCFFFF; }

.....Willy

Edit: FWIW: Here's a link which shows the psuedo class focus HTML equivelent is a javascript function.

**shlagish** · Mar 10, 2004, 05:33 PM

coderseth:

look closely at that border rule, and you'll see why the STANDARDS COMPLIANT browser didn't render your border, whereas the buggy, allbeit more forgiving of human error, IE did.

You wouldn't beleive how much I looked at that border thing.
Could you tell me what the problem is, I really can't find it...

also, fyi, this is how the page you linked looks in Firefox for me right now:

If your talking about the weird javascript text that appears at the top, that's angelfire's code that's not showing properly, lol, try running the page on your harddrive, it wont appear..

Thanks for the link, I'll go look at it now

And thanks for the attempted help as well as for the actual help, hehe

Willy:

I do not think IE likes your use of a:focus

Do you KNOW this, or your just making a wild guess?
Also, is using focus (or that javascript equivalent) important at all for tab navigation, or will tab-navigators not mind this?

I will try removing the :focus stuff to see if that is the problem, but I doubt it since ALL my links have :focus and only SOME of them have a problem...

Thanks for the help, if you have any other suggestions, yell.

**shlagish** · Mar 10, 2004, 05:45 PM

Willy, I tried taking out :focus, no change..
coderseth: I went to your link, nothing new there, except for confirming I'm not doing anything wrong in my border defenition, lol

**Willy Duitt** · Mar 11, 2004, 12:16 AM

Originally posted by shlagish
coderseth:Willy:

Do you KNOW this, or your just making a wild guess?
Also, is using focus (or that javascript equivalent) important at all for tab navigation, or will tab-navigators not mind this?

I will try removing the :focus stuff to see if that is the problem, but I doubt it since ALL my links have :focus and only SOME of them have a problem...

If you read my message carefully I said I think

What I do know is that the psuedo class focus is not supported by IE. I thought I was helping by offering a possible cause of your problem.

I'm sorry for wasting both your time and mine.

.......Willy

BTW: If you would like an absolute answer. I would be more than happy to provide you with my PayPal account Info. PM if you are interested and I'm sure we can work something out.

**mindlessLemming** · Mar 11, 2004, 03:22 AM

Originally posted by shlagish

This isn't working:

#footerLinks li a, #footerLinks li a:visited { background: #CCC; border: 0px 1px solid #300; }

and this works:

#footerLinks li a:link, #footerLinks li a:visited { background-color: #CCCCCC; border-width: 0px 1px; border-style: solid; border-color: #330000; }

This is what I used, and it works.

Code:

#footerLinks li a:link, #footerLinks li a:visited { 
background: #CCC; 
border:1px solid #300; 
border-top:none; border-bottom:none;
}

I have been unsuccessful in makng IE recognise :focus w/out javascript. If you use it, make sure you delcare your psuedo-classes in this order:

link;visited:focus:hover;active;
I read this rhyme somewhere that I use to remember it:
Lord
Vader's
Former
Handle;
Aniken.

**me'** · Mar 11, 2004, 12:01 PM

Originally posted by coder_seth:
first off, here is how i would refine your styleshee. i would start by ditching your rule for <html> since it's unecessary, as far as i know.

This was a fair way back, but just to let you know: it's not. Most user stylesheets give some padding/margin to html as well as body.

**coder_seth** · Mar 11, 2004, 12:36 PM

:\

hmm. i've never had an issue with that. what UAs are you referring to?

**coder_seth** · Mar 11, 2004, 12:38 PM

the problem with your border definition is that you specify two widths, the first one being 0, and i believe that is why you are having the problem. i've never see or heard of a border shorthand where you can specify different widths, if that was your intent, for different sides. i don't believe it works that way for border.

Announcement

Page automatically jumps up when hovering certain links...

Page automatically jumps up when hovering certain links...

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment