Posts by Troy III Page 14

Troy III 272 Posting Pro

15 Years Ago

In my browser(opera), my background image takes up the full height off the screen, but on my friends(firefox) there appears a large black banner beneath it (black because that is the bgcolor)
I give you the css hopefully you guys can help me.
body {
color:#C00;
background-color:#000;
background-image:url('../background.jpg');
background-repeat:no-repeat;
background-position:top;
height:100%;
}

this will make your background image to fill the available space of the document, in Opera Safari and IE5.5 and up...,but I can't help you with firefox. You'll need to hack it.

html, body {
  height: 100%; Width: 100%;
  margin: 0;  padding: 0;  border: 0;
  background-image: url(background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100%;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.png',sizingMethod='scale');
}

UI / UX Design web-design

Troy III 272 Posting Pro

15 Years Ago

Re: tabbed menu breaks onto new line

Troy's prior answer, absolutely correct
short expl.
width:100 would work as width:100% defaults as pixels if no unit is set

Yes , and this is the main factor causing his menu items to drop as new lines since it defaults to 100px width. And the width of 100px is not even enough to accomodate them individualy.

float:left; is non-functional for a div that occupies the full width

Moreover he has positioned the menu wrapper element absolutely. Therefore it is ancored, so the float property will have no effect at all.

<strong> is a html enhancement that does nothing in css

Also causes the drop of css background statements involved erronuosly. And may rise some other unpredictable effects iin the document structure and layout rendering as a whole.

Regards

UI / UX Design web-design

Troy III 272 Posting Pro

15 Years Ago

Re: Automagically resize images?

Is there anyway to get images to be the "correct" size - i.e. fit the width of the text?
This is what currently happens:
http://engineeringnotes.net/personal/pictures.shtml
Thanks,
Dave

So you want them to be looking something like this (see attachment image)?
Add this line in your
CSS

#main img {width:100%}

UI / UX Design web-design

Troy III 272 Posting Pro

15 Years Ago

Re: tabbed menu breaks onto new line

hi my navigaion keeps on moving onto a new line and i cant seem to stop it. i have tried all that i can think of.

thanks

body{
height:100%;
width: 150%;
margin:0;
}
  
  #nav{
  clear:both;
  font-weight:bold;
  color:black;
  margin-left:4px;
  float:left;
  list-style-type:none;	
  background:url(navshadow.gif) no-repeat 8px 100% #fff;
  width:100;
  padding-bottom:21px;
  position:absolute;
  left:15%;

}
html>body #nav{
  margin-left:8px;
  background:url(navshadow.gif) no-repeat <strong>4px</strong> 100% #fff;
}
#nav li{
  list-style-type:none;
  float:left;
  margin:0 0 0 4px;
  padding:0 0 0 10px ;
  border-bottom:1px solid #999;
  background:url(tabgrey.png) #c0c0c0 top left no-repeat;
  
}
#nav li a{
  color:black;	
  background:url(tabgrey.png) transparent top right no-repeat;
  display:block;
  padding:0 10px 0 0;
  float:left;
  
}
#nav li.cur,
#nav li.over,
#nav li:hover
{
  background:url(tabblue.gif) #3c785c top left no-repeat;
  border-bottom:1px solid #2c6b2c;
}

#nav li strong,
ul#nav li.cur a,
ul#nav li.over a,
ul#nav li:hover a
{
  display:block;
  color:#fff;
  padding:0 10px 0 0;
  text-decoration:none;
  background:url(tabblue.png) transparent top right no-repeat;
}

  
  


  </style>
  <script type="text/javascript">
/*<![CDATA[*//*---->*/

function rollover()
{
  if(!document.getElementById || !document.createTextNode){return;}
  var n=document.getElementById('nav');
  if(!n){return;}
  var lis=n.getElementsByTagName('li');
  for (var i=0;i<lis.length;i++)
  {
    lis[i].onmouseover=function()
    {
      this.className=this.className?'cur':'over';
    }
    lis[i].onmouseout=function()
    {
       this.className=this.className=='cur'?'cur':'';
    }
  }
}
window.onload=rollover;

/*--*//*]]>*/
</script>
  
  
 </head>
 <body>
 
 <img src="logo.jpg" width="40%" />

 
 
<ul id="nav">
	<li class="cur"><strong>About jjjjjjjjjjjjjjjjjUs</strong></li>
  <li><a href="index.html">Garden Centre</a></li>
  <li><a href="step2.html">Dahlias Kitchen</a></li>
  <li><a href="step3.html">Kool Kamping</a></li>
  <li><a href="step4.html"></a>Pets Corner</li>
  <li><a href="step4.html"></a>Suttons Buildings</li>
</ul>

Delete everything marked RED

UI / UX Design web-design

Troy III 272 Posting Pro

15 Years Ago

Re: css ul menu cross browser issue

I have an issue with my css ul menu bar not displaying AT ALL in IE 7. Works perfectly in FF, IE 8 and Safari 4. Displays but not correctly in Safari 2. Can someone take a look at the code and give me the necessary fixes?

These are only some of structural errors found in your html code.

Validation Output: 21 Errors
# Error Line 46, Column 8: XML Parsing Error: Opening and ending tag mismatch: p line 33 and div
</div>
# Error Line 67, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 20 and body
</body>
# Error Line 70, Column 7: XML Parsing Error: Opening and ending tag mismatch: body line 18 and html
</html>
# Error Line 70, Column 7: XML Parsing Error: Premature end of data in tag div line 4
</html>
# Error Line 70, Column 7: XML Parsing Error: Premature end of data in tag html line 2
</html>
You should correct these before anybody tries to help you. Perhaps, the problem will go away by itself after you've done this. check out with the minimum height auto value firefox doesn't like that either. Try some other value or clear it altogether, its just sitting there.
Fast solution sugestion:

#content {
	width:900px;
	background-image: url(images/bkgd_tan_tan900px.gif);	background-repeat: repeat-y;	
	position: absolute;	
	top: 143px;
	min-height: auto;/*
 	height: auto;

delete both reds!

UI / UX Design html-css web-design

Troy III 272 Posting Pro

15 Years Ago

Re: Convert .wav file into bytes

I want to convert wav file into bytes and then read it..plz can you help me to implement this using C#..i would be very thankful for your cooperation..I'l be presenting my proj in few days so i need to implement this as soon as possible.

Well...
I'm sorry to have to say this to you, but HTML and CSS are not capable of doing much of anything with your wav files except playing them, and what I really meant to say is that you are in the wrong section of the forum.

UI / UX Design web-design

Troy III 272 Posting Pro

15 Years Ago

Re: image rollover script explanation help

Hi, Troy III
this my old script that before i posted
i tested both your script and this old script

<html>
<head>
	<title>A More Effective Rollover</title>
	<script> 
 window.onload = rolloverInit;
 function rolloverInit() {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);

		}
	}
}
 function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;
 thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	thisImage.onmouseover = rollOver;	
}
 function rollOut() {
	this.src = this.outImage.src;
}
 function rollOver() {
	this.src = this.overImage.src;
}
 </script>
	<style > 
body {
	background-color: white;
}
img {
	border-width: 0;
}
</style>
</head>
<body>
	<a href="next1.html"><img src="images/button1_off.gif" width="113" height="33" alt="button1" id="button1"/></a>&nbsp;&nbsp;
	<a href="next2.html"><table><tr><td><img src="images/button2_off.gif" width="113" height="33" alt="button2" id="button2" /></td></tr></table></a>
	
</body>
</html>

i changed the code

if (document.images[i].parentNode.tagName == "A")

if (document.images[i])

after then il also works
what does it mean to write code just like so

if (document.images[i].parentNode.tagName == "A")

i know A tag is parent tag of img tag but i dont understand for what reason i must declare that this is Parent node of img tag.
does it necessary to write it
thanks for attention

Yes!
In that classic approach to the problem - it is absolutely necessary.
Because there is no other way to know that you are changing only the images that should hover.

Because with that script if you don't test if the current image is e child of A lement the script will add the hover functionality even …