CSS - Css Problem: Restrict Code To Inside A Div

Can any of you tell me why with the a:link/visited set with border:none
(as in the example at the bottom of the e-mail), I get a box around an
image inside a link:

<a href="communication.php"><img src="resources/president.jpg"></a>

Working on a MAC, I noticed that the border only appears in
Firefox but not in Safari, Opera and OmniWeb. Can anyone
tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet?

STYLESHEET:

a {text-decoration: none;}
a:link { color: #000000; border: none;}
a:visited { color: #000000; border: none;}
a:hover { color: #bbbb00; border: none;}
a:active { color: #000000; border: none;}

.image{border-width:0px; border: none;}

hi

my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability)

form
{
margin: 0px;
padding: 0px;
}
.mydiv
{
float: left;
}

html looks vaguely like:

<div class="mydiv"><form name="blah" action="blahblah">
.... all form controls
</form></div>

PROBLEM!!!!

in mozilla, none of the form elements display.
in ie, everything displays as expected.

PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE.

thanks in advance.
d

Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)?

The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON.

How can I adjust my CSS so both versions work?

GOOD VERSION
Code:

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

BAD VERSION
Code:

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
</a>

THANKS

Hi, I have a realy strange problem that I'm hoping someone can shed some light on.

I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor.

<a href=""><h2>Some text</h2></a>

Using firebug I saw that the html gets duplicated like so:

<a href=""></a>

<h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places!

<a href=""></a>

and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>.

In the stylesheet the anchor has display:block;

Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before!

Thanks.

APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE.

Hi Guys looking for a spot of help please.

IE is driving me up the wall.

Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still.

Just when they click the item image within the anchor it does nothing.

Here is a slim version of the HTML :

Code:

<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
		<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
		<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
		<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
		<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
		<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
		<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
		<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
		<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
		<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
		<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
		<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
		<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
		<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
		                  
        </ul>  

CSS Code:

Code:

ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

ul li {

  	display:block;
	list-style:none; 
	margin:0; 
	padding:0; 
	border:0; 
	text-align:center;
	float:left;
	width:118px;
	height:133px;  
}

ul li a{
	display:block;
	border-right:1px solid #e2f5fe;
	outline:none;
	text-decoration:none;
	background:#FFF;
	padding:3px 2px 3px 2px;
	line-height:15px;
}

ul li a:hover{
	background:#e2f5fe;
	color:#fe0084;
}

ul li span.box_wrap { 
	display:block;
	background:#FFF;
	height:127px;
}

ul li span.box_wrap span{
	padding:0px 3px;
	font-size:12px;
} 

ul li span.img { 
	padding:2px 0px 2px 0px;
	display:block;
}

Just when you try to click any of the images within the boxes its not clickable. Really stumped.

Any help or pointers would be greatly appreciated. Thanks in advance!

Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table.

so i don't want to use absolute positioning, as the position would change if the window size changes...

My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"...
The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore...

If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore...

Here you can see the code i used for both example 1 and example 2:

example 1:

<html>
<head>
<title>relative problem - example 1</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table border=1>
<tr>
<td width="640" height="480">
<div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



example 2:

<html>
<head>
<title>relative problem - example 2</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<table border=1>
<tr>
<td width="640" height="480">
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

thx for letting me know...

I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically.

Thanks for reading.

I am having a big problem with my website. It works great on every browser except ie7.

The 3 big icons do not appear in a row but one below another, and the 4 boxes on the bottom cannot be displayed.

The website is (www dot sdcomptech dot com) Any help is appreciated, everything works but ie7.

Hope, Im posting in the right spot having trouble with my webpage codes..... I am new also to this area.... Here is the code I am using it will be below my message. I have it where I can change the color but I cannot get it to be side by side like for the top of a web page..... Can anyone help me??? Also any websites out there that will show me how to make buttons like this one I got off internet..... Not really sure if it is html or css, or what . I know alot about html but never seen this type.... hope all have a good day.
Michelle

<% ' Define the stylesheet %>
<STYLE TYPE="text/css">
<!--
#mybutton {border-style: inset;
border-color: #72B70F;
background-color: #77CA12;
text-decoration: none;
width: 120px;
text-align: center;}

A.buttontext {color: white;
text-decoration: none;
font: bold 12pt Verdana;
cursor: hand;}
-->
</STYLE>

<% ' Create the button %>
<A HREF="http://www.geocities.com/vjcandles/Prices.html" CLASS="buttontext">
<DIV ID="mybutton">
Our Prices
</DIV></A>

<% ' Create the button %>
<A HREF="http://www.geocities.com/vjcandles/index.html" CLASS="buttontext">
<DIV ID="mybutton"> home page </DIV></A>

Hello,
This look good on IE not on FF, why?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div#username {
	position:relative;
	width:508px;
	height:72px;
	margin:2px;
	padding:4px;
	border:1px #CCCCCC solid;
	border-bottom-width: 20px;	
}
</style>
</head>

<body>
<div id="username" >div<br />div<br />div<br />div<br />div<br />div<br />div<br />div<br />
</div>
</body>
</html>

I need several div's inside each other, to be padded 10px. I use the code bellow and the result is in image here , I also drawn what I want to accomplish. Can you help me ?


PHP Code:
.class-help_section_method {

    border: solid 1px #D9D9D9;
    -moz-border-radius: 7px 7px 7px 7px;
    background-color:#E1F9FF;
    padding:10px;
    width:100%;

}

.class-help_section_method_sub {

    border: solid 1px #D9D9D9;
    -moz-border-radius: 7px 7px 7px 7px;
    background-color:#FFFFFF;
    padding:10px;
    width:100%;
    

}

.class-help_section_niv {

    border: solid 1px #D9D9D9;
    -moz-border-radius: 7px 7px 7px 7px;    
    background-color:#F3F3F3;
    padding:10px;
    width:100%;

} 

I have a fixed-width site and the content is enclosed inside a 750px div. I need to center a div inside that main container. I know I can use margin and text-align but then all of the divs in the main container will be centered where I only want one div to be centered. Any help would be much appreciated. Thanks!

I have a problem with positioning divs and here is the html code
Code:
HTML

<div id=wrapper>

<div id=header>
header contents
</div> <!-- end header -->

<div id=body>

<div id=profile>
<div id=avatar>
avatar data goes here
</div> <!-- end avatar -->
<div id=userdata>
user data goes here
</div> <!-- end userdata -->
</div> <!-- end profile -->

</div> <!-- end body -->
<div id=footer>
footer goes here
</div> <!-- end footer -->
</div> <!-- end wrapper -->

The problem is that the footer div is supposed to be below the body div but it is wrapped by the userdata div and i rellay sdo not kno why!

I will post the CSS in another post

Thanks

Hi All,

How can I enable the inside bordder of a TD in html.

Thans in advance