HTML - Html Border Around Div Layer

In a website i'm designing, there is a slideshow I created, and instead of using flash I used Windows Media Player. For some reason the html border attribute on both the <embed> and <object> tags, when viewed in Firefox, do not work.

Page with border problems

here is the code, if you want it:

Code:

<center>
<object id="MediaPlayer" 
             width="800" 
             height="650" 
             classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" 
             standby="Loading Windows Media Player components..." 
             type="application/x-oleobject" 
             codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"
             title="Pete's Mountain Road Slideshow"
             border="3"> 

<param name="filename" value="http://www.petesmountainroad.com/PetesMountain.wmv" />
<param name="Showcontrols" value="True" />
<param name="autoStart" value="False" />
<param name="wmode" value="transparent" />

<embed type="application/x-mplayer2" src=http://www.petesmountainroad.com/PetesMountain.wmv" 
              name="MediaPlayer" 
              autoStart="False" 
              wmode="transparent" 
              width="800" 
              height="650"
              title="Pete's Mountain Road Slideshow"  />
</object>
<br />
<p class="main">If you do not have Windows Media Player, you can view the video by following 
<a class="Link" href="http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx" target="_blank" title="Download Windows Media Player 11">this link</a> 
to download the program to your computer, then try to play it again.</p>
</center>
</body>
</html>

Hello everyone, I've been racing to learn html/css in the past couple weeks to throw up a website, and so far so good.
But: I've searched the internet and I cannot find an answer to my questions.

The page in question is:
http://www.andrew.cmu.edu/user/jonmille/projects.html
style sheet (relevant section is in the "Programming: List Settings" section)
http://www.andrew.cmu.edu/user/jonmille/style.css

You can see that the gray borders under the text/images have a small break in them. I assume it has something to do with the fact that I'm using two columns. How do I fix this and make a solid border (in a non hackish way)?
Note: if you say "use css/divs," I wrestled with those for about two hours before I gave up and made a table.

Secondly, in IE7, all the images/text are completely flushed left, ignoring the table padding. How can I fix this?
Note, I've never checked this site in IE6 or below, and never will, so if it looks wrong in IE6, then the user doesn't deserve to see my site anyway.

Thanks for your time!
Jon

Hi,

I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image.
I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page.

this is my code; any ideas how i can fix this?

<td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td colspan="6">

Any help would be greatly appreciated.

didn't get a reply in the css forum, here is the site..
http://www.pomatrock.brevard.k12.fl.us/goodnews.html

the css file is attached as a word doc.

if you go to any of the years..(2k5,2k6 etc) there is a div on the left side, used to cover up the dark brown with a light brown. Problem is, in Firefox it shows up way too long and adds a long extension of brown from the bottom of the page, but in IE it looks just fine. Some help would be greatly appreciated. :-D

thanks.

hi all,

is there a way to have a div layer 100% in height and 100% in width?

thanks

Hello all,
I'm having some trouble getting html to display in my <layer> tags, for example if I use the code:
HTML Code:

<layer src = "myfile.html">

The file that I'm trying to display does not show, even though it is in the same local directory. Has anyone else ever tried this successfully? Thanks!

this issue has been solved

This is kind of hard to explain so I hope you stay with me.

I have a site and everytime you navigate to a page everything is loaded. The same images the same background everything. So I firgured to help save the load time of pages I would make a frameset. Since the Only thing the on my site that changes is one layer with new text.

Unfortunately, the frameset won't work.
I use hidden layers as a drop down navigation for a few buttons when you hover over them. So if I were to use a framset the layer would then drop down but the mainframe would cover up the drop down navigation (which is a layer). I tried figuring out to get a layer to show up over all frames but I had no luck. I also messed around with z index but that still didnt work.

So my question is... is it possible to get a layer to change but not the entire page?

Here is the site, www.griffithband.com

If you look you will see that layer17 is the only layer that changes. Is there a way to get that to be the only thing to change when going to a new page rather then the entire page?
Layers 31, 30, and 29 are the drop down navigation, and the reason why I cannot use the frameset as they will not show becuase they go underneath the mainframe.

I'm in no way very fluent with any coding. I only work on this site and thats it.

Thanks in advance.

Here's the CSS code:
HTML Code:

 <style type="text/css">
<!--
body {
scrollbar-arrow-color: #425B5E;
scrollbar-base-color: #98A5A6;
scrollbar-face-color: #98A5A6;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #425B5E;
scrollbar-3dlight-color: #DEE7E8;
scrollbar-track-color: #DEE7E8;
scrollbar-darkshadow-color: #DEE7E8;
}

div#content {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}


.header {font-family: trebuchet MS; size: 11px; color: white; font-weight: none;
 BORDER-RIGHT: none 1px solid;
              BORDER-TOP: none 1px solid;
              BORDER-bottom: white 1px solid;
              BORDER-LEFT: none 1px solid; background-color: #660000;}


.head2 { font-family: verdana; font-size: 11px; color: #4A4A5B; background-color: #FFFFFF; border: #4A4A5B; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 1px; border-bottom-width: 1px; text-align:center; background-repeat: no-repeat; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}

.head { font-family: verdana; font-size: 14px; color: #64657E; background-color: none; border: #75AAB0; border-style: solid; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; text-align:center; background-image: url(head.gif); background-repeat: no-repeat; font-weight: bold; height: 26px; padding-top: 4px;}

b { color: #6D82A1; font-size: 11px; font-weight: bold; }

A:link
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:visited
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:active
{color:#beb8b8;text-decoration:none; cursor: default; font-weight: bold; border-bottom: 1px #C5CADC solid;}
A:hover
{color:#5b1435;text-decoration:underline; cursor:default; font-weight: bold; border-bottom: 1px #000000 solid;}


body 
{background-color: gray;
background-attachment: fixed;
background-repeat: repeat-y;
background-position: left;
font-family: arial; 
color: black; 
margin: 0px;
letter-spacing: 0px; 
font-weight: normal; 
font-size: 12px;
cursor: default;}

td { font-family: trebuchet ms; font-size: 11px; color: black; font-weight: normal; }
--> 


</style>

And here's the text itself;
HTML Code:

<html>
<head>


<link rel="stylesheet" media="all" type="text/css" href="simple/simple.css" />

<script src="simple/click_menu.js" type="text/javascript"></script>

<link rel="stylesheet" href="style.css" type="text/css">
<title>Ironman Football Academy | Don Bosco Prep</title>
</head>

<body onload="clickMenu('menu')">

<center><img src="mainimage.png">
<ul id="menu">
<li class="sub"><a href="#nogo1">Home</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Information</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Registration</a>
		<ul>

		</ul>
</li>
<li class="sub"><a href="#nogo1">Don Bosco Prep</a>
		<ul>

		</ul>
</li>
</ul>
</center>






</div>


<div id="content" style="position: absolute; z-index: 2; margin-left:auto; margin-right:auto; 
 top: 303px; width: 600px; height: 0px; overflow: visible">
<div class="header">&nbsp;Welcome</div>
We plan to change C-5 plane in such a way that the limitations and hazards involved with them might disappear or be 

lessened, advancing the study of aeronautics and its applications in technology. As the group researches the flaws 

associated with the structural mechanics, equipment, materials, and technology, we will develop a plan to inspire a 

more efficient plane. <a href="http://donboscoprep.org/istf/skystar/component2/task1.php"">Task 1</a>


</div>


</html>

Why isn't the text (with the header welcome) not centered?

I created the css below. It is a list that contains my navigation buttons on the left hand side of the page. The buttons work good. Now, I want to add some pictures to the left of the buttons. When I do this a space becomes apparent between the buttons. (top & bottom). I tried adding a layer but like I said it creates a space between buttons.
Any help is appreciated. Thanks,.



.Blockhead

#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #669966;
border-bottom: 1px solid #eee;
; background-image: none
}

#navcontainer a:link
{
color: #FFFF00;
text-decoration: none;
}

#navcontainer a:hover
{
color: #33FF99;
; background-image: none
; background-color: #669999
}
#navlist a:visited
{
color: #CCCCCC;
text-decoration: none;

Hello,

Please point me in the direction of button-layers.
In other words: How do I make a whole layer act as a link so that when a user clicks anywhere within a layer (and not ONLY on the link in the center of it), the whole layer acts as a button?

Thank you for your expertise!

Hi,
I'm working on a project and I want layers stacked to be visible and invisible through a button.
Anyone here that buys books on Amazon knows what I'm talking about.
Some books in Amazon have a "look inside" that when you click it opens like a layer where you can see some content of the book. This layer or whatever it is has an X button to close it.
This is what I want to do, but I don't have an idea of how this can be accomplished.
Any help will be appreciated.

Thanks

H guys,

I have a page that has a div layer which contains a table of 2 columns and numorous rows. I have managed to get the scrolling to work but i am having trouble keeping it in one place in all browsers. whenever i publish it through diferent browsers - i.e for examples shifts the entire div to the right and up. How do i fix the position of this div?

Please help...