CSS - Ie7 Outline Anchor Bug (i Hope This.blur() Isnt The Solution)

I have a test template page I have created using two columns with dropshadows and an outline.

My question is, when I try to add other content within the div that creates the outline container....it does not expand the outline container, it creates a new outline container.

I need to put other elements other than text so, i need to resolve/better understand this issue.

the template page can be found at:
http: //www rustbug.com / mmtest / template.html

hello everyone,
does anyone know how can i connect both the outline and the border-radius?
it works fine beside the outline is square (btw both does not work on ie for some reason, why's that?)

code is:

Quote:
outline: #ffc614 solid 5px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px;


thank you.

Hi all,

I've tried both the "shorthand" and regular version of BORDER attribute, and neither works, Yet outline works fine (but I don't want to use that since IE7 doesn't support it).

Anyone able to troubleshoot this? Here's part of the CSS code (the ".thumb" class at the end is what's not working) and below that is the url.

CSS Code:
Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } #thumbBox{ /*Outermost DIV for thumbnail viewer*/ position: absolute; left: 2.5em; top: -4em; width: auto; height: auto; padding: .5em; padding-bottom: 0em; background: #313131; visibility: hidden; z-index: 5; cursor: hand; cursor: pointer; } #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */ font: bold 1em arial; line-height: 1.1em; color: white; padding: .5em 0; text-align: right; } #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */ background-color: #CCC; } #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/ position: absolute; visibility: hidden; border: .125em solid black; background-color: #EFEFEF; padding: .5em; z-index: 6; } .thumb { margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; border-style: dashed; border-color:#CCC; border-width:.125em; }

  

 .gallerycontainer{


 position: relative;


 text-align:right;


 margin-left: 0em auto;


 margin-right: 0em auto;


 /*Add a height attribute and set to largest image's height to prevent overlaying*/


 }


  


 #thumbBox{ /*Outermost DIV for thumbnail viewer*/


 position: absolute;


 left: 2.5em;


 top: -4em;


 width: auto;


 height: auto;


 padding: .5em;


 padding-bottom: 0em;


 background: #313131;


 visibility: hidden;


 z-index: 5;


 cursor: hand;


 cursor: pointer;


 }


  


 #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */


 font: bold 1em arial;


 line-height: 1.1em;


 color: white;


 padding: .5em 0;


 text-align: right;


 }


  


 #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */


 background-color: #CCC;


 }


  


 #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/


 position: absolute;


 visibility: hidden;


 border: .125em solid black;


 background-color: #EFEFEF;


 padding: .5em;


 z-index: 6;


 }


  


 .thumb {


 margin: .5em .5em .5em .5em;


 height: 8.5em;


 width: 8.5em;


 border-style: dashed;


 border-color:#CCC;


 border-width:.125em;


 } 

I don't think I have the 5 requisite posts, so here's the url in question (# = .) & (| = /)

http:||www#bauerbuiltmfg#com|db-series-planters#html


Thanks in advance for any help!

I tried everything I can think of in Opera, and no matter what I try, when I focus on a link I get selected highlight on the text. Is there some CSS way of hiding the highlight?
I've also posted in the JavaScript forum.

On my site which im using to practice css, the picture isnt being displayed on the main page. Why is this?

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Cheers

i am trying to make a link at the top of my blog stand out more. however i cant figure out how to override the default style sheet.

i am trying to make the following stand out mo

<center><font size=4 style="color: red"><u><a href="http://www.jwsuretybonds.com/apps.htm">Apply For Surety Bonds Online</a></u></font></center>

at: www.jwsuretybonds.com/blog

i use external stylesheet which is shown below. i have tried using <h1> which is set to center, ive tried using <p class="center"> and it still does not center. it only centers when i use the <center> tag...what gives? its fine in netscape, opera, and ie.....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ranid Photo Gallery</title>
<link rel="stylesheet" type="text/css"
href="stylesheet1.css" />
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff">

<div style="position: absolute; left: 10px; top: 200px; width: 740px; background-color: transperant; padding: 0px;">
<h1>Ranid Frog Photos</h1>

<p class="center"><table width=70% border=1 cellspacing=0 cellpadding=0>
<tr><td width=30%><h4><a href="images/raurora1.jpg"><img src="images/raurora1.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td>
<td width=30%><h4><a href="images/raurora2.jpg"><img src="images/raurora2.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td>
<td width=30%><h4><a href="images/.jpg"></a></h4><h4></td></tr>

</table></p>

<h5>:<a href="gallery.html">Back to the Gallery</a>:</h5>

</body>
</html>

My style sheet
Code:

  body {
    color: #000000;
    background-color: #ffffff;
    font-family: Georgia, "Times New Roman",
          Times, serif; 
}
}
  h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
  h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3 
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4 
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 15px }
h5 
{ 
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6 
{
line-height: 1pt ;
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
    color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center } 
.left {text-align: left } 
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
	COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
	COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
	COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
	COLOR: #2C31FF; TEXT-DECORATION: underline
}

any ideas?

I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!!

PHP Code:
<style type="text/css">
/**********   layout of the page        ***********/

#top {
    background-color:yellow;
    clear:both;
}

/*****************   Formatting top part of the page   **************/

#tag {
    float:left;
    margin-left:8em;
}
#login {
    float:right;
}
#logo {
    margin-left:2em;
    float:left;
    clear:left;
}
#searchBox {
    float:right;
    clear:right;
}
#links2 {
    clear:right;
    background-color:yellow;
}
#links2 li{
    font-size:0.8em;
    display:inline;
    float:right;
    text-decoration:none;
    list-style:none;
    padding:1em;
}
</style>
</head>
<body>
    <div id="top">
        <div id="tag">
            <p id="">Zahra Zahra Ltd</p>
        </div>
        <div id="login">
            <p>Login/Register</p>        
        </div>
        <div id="logo">
            <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a>
        </div>
        <div id="searchBox">
               <form action="search.php" method="post" style="margin:0em; padding:0em;">
        <label>What are you shopping for?</label>
        <input type="text" name="search" value="search" size="14"/>
        <input type="submit" name="submit" value="Go" />
        </form>        
        </div>
        <div id="links2">
            <ul>                
                <li>Contact Us</li>
                <li>Testimonial</li>
                <li>Return Policy</li>
                <li>News</li>
                <li>FAQ</li>
                <li>about us</li>
                <li>Home</li>
            </ul>
        </div>
    </div> 

Hi,

Im trying to make the orange column fixed width but it doesnt work, when I change the width of the browser window it still changes width.

Here is the link:
http://www.i3design.com/test/

Here is the CSS:
Code:

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.hidden { display: none; }

body { color: white; margin: 0; padding: 0; } /* Edited by Goldworker */
div.padded { display: block; }

div.content { width: 75%; margin: 0% 12.5%; } /* Added by Goldworker */

div.login { background-color: black; padding: 0% 12.5%; } /* Edited by Goldworker */
div.logo { background-color: grey; height: 50px; padding: 0% 12.5%; } /* Edited by Goldworker */
div.subnavigation { background-color: brown; }
div.main { color: black; background-color: orange; padding-left: 0px; padding-right: 0px; }
div.main div.body { background-color: white; min-width: 75%; }
div.main div.advertisements { width: 250px; display: inline; margin-right: 0px; }
div.footer { background-color: grey; }

Can anyone help. Also, is this well coded, or is it inefficient?

James

What is the best solution for enabling IE 6 and below to be able to display PNG 24 images correctly? I've seen several workarounds on the Web and wondered which one that most people are using?

Is there any way to remove tabindex from inline? I have tables in a form that are dynamically made with a php function I wrote. My problem is I cant specify tabindex in the loop because form elements in different tables will have identical index's. Any help is always appreciated.

Recently I started making my very first doctype=strict page and am trying to make it act the same way in IE and Firefox. After much time spent in research and experimentation I ditched tables in favor of DIVs cause 100% tends to be either too wide or too tall. The only good solution I could find is using javascript to calculate widths and heights. This is fine since the entire page is one big ajax playground.

So anyway, research says this is cause width/height percentages don't take padding and borders into consideration. Let's say I set an outer div to 100 pixels wide. Then I give it a 2 pixel padding on the left and right side. Then I give it a 1 pixel border on the left and right side. Then I add another DIV inside this container and set it to 100% width. For some reason, both IE and Firefox feels the need to calculate this as 106 pixels wide instead of 100 pixels. I'm not sure if the HTML standard says this has to be true, but I can find no justification for such a practice. I understand that they prefer that the 100 pixels apply to only the content - that padding and borders increase the width of the object. But I don't see why objects that are inside of that container would try to stretch wider than the content width.

I say all the above just in case there's something I'm missing and somebody would like to correct me.

So now for my question. Other than using javascript, is there a way to make sure that objects inside the container have the width of the container's content width rather than the container's actual width. Any answers must apply to the height as well, since I understand that there is a somewhat unreliable behavior (in my testing) where a DIV automatically takes up as much width as is available.

Hi,

I am struggling to find a solution for a drop down menu over a week in this site: http://tinyurl.com/47apbad

In firefox it looks good but not in IE6 and IE7, can someone help me to find a solution?

Code:

/* -- top menu --*/
			
		#main-menu {
			width:980px;
			padding-top: 15px;
			padding-bottom: 10px;
		}

			#main-menu ul {
				list-style:none;
				padding:0px;
				margin-left:15px;
				font-size:15px;
				margin-bottom:0px;
				text-transform:uppercase;
			}

				#main-menu ul.sf-menu li {
					float:left;
					*width:80px;
					margin-left: 5px;
				}
			
					#main-menu ul.sf-menu li:hover {
						background-image:url(images/main-manu-bg-li.png);
						height:31px;
						background-repeat:repeat-x;
						display:block;
						color:#333333;
					}
			
						#main-menu ul.sf-menu li a{
							padding:5px 10px 0 10px;
							*padding:5px 8px 0 8px;
							color:#fff;
							height: 31px;
						}

							#main-menu ul.sf-menu li.current_page_item a {
								background-image:url(images/main-manu-bg-li.png);
								height:31px;
								background-repeat:repeat-x;
								display:block;
								color:#333333;
								padding-right: 10px;
								padding-left: 10px;
								font-weight:bold;
								margin-bottom:-5px;
								float:left;
								/*width: 80px;*/
							}
							
							#main-menu ul.sf-menu li.current_page_item a:hover {
								margin-top:0px;
							}
							
							#main-menu ul.sf-menu li.current_page_ancestor a {
								background-image:url(images/main-manu-bg-li.png);
								height:31px;
								background-repeat:repeat-x;
								display:block;
								color:#333333;
								padding-right:10px;
								padding-left:10px;
								font-weight:bold;
								margin-bottom:-5px;
							}
							
				#main-menu ul.sf-menu li ul {
					background:url(images/topnav_bg.gif);
					padding:0px 15px;
					margin:0px;
					margin-top:-7px;
					-moz-border-radius: 0 0 8px 8px;
				}
			
					#main-menu ul.sf-menu li li ul.children {	
						margin:0 0px 0 45px;
						background:url(images/topnav_bg.gif);
					}

							#main-menu ul.sf-menu li.current_page_ancestor li a {
								background-image:none;
								color:#fff;
								padding-left:0px;
								padding-left:0px;
								padding-top:10px;
								padding-bottom:0px;
								font-weight:normal;
							}
							
							#main-menu ul.sf-menu li.current_page_ancestor li:hover a {
								margin-bottom:1px;
							}

							#main-menu ul.sf-menu li.current_page_item li a {
								background-image:none;
								color:#fff;
								padding-left:0px;
								padding-left:0px;
								padding-top:10px;
								padding-bottom:0px;
								font-weight:normal;
							}

						#main-menu ul.sf-menu li li a {
							padding:0px 0px;
							padding-top:10px;
							padding-bottom:10px;
							margin:0px;
							height:auto;
							background:none;
						}
						
							#main-menu ul.sf-menu li li:hover {
								background:none;
								padding:0px;
								margin:0px;
								padding-bottom:4px;width:240px;
							}

							#main-menu ul.sf-menu li li a:hover {
								color:#a6b4bc;
								background:none;
								padding:0px;
								padding-top:10px;
								padding-bottom:12px;
								
							}
												
						#main-menu ul.sf-menu li li {
							padding:0px;
							margin:0px;
							background:none;
						}

I seem to have had success creating a cross-platform method for centering tables.

#centeredTable {

display:table;
width: auto;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

You can view an example he
http://jim.centerfuse.net/css/table...ed-example.html

IE ignores display:table and doesn't successfully interpret margin: auto, but text-align: center seems to take care of centering the table in IE.
Tested in Opera 7, IE 6, IE 5.5, Mozilla 1.5.
(I have the top margin in there just to move it away from my header a bit.)
It does require that you set a width on your table, or it will simply fill the entire page, though you could get around that with a container DIV (like this: http://jim.centerfuse.net/css/table...able_width.html ).

I thought others might be interested in seeing this, since it seems to be a common problem. I had originally developed a slightly more complicated way of doing what I need to do, but this seems to work just as well.
My main concerns are that future versions of IE will break this code because of added support for display:table and margin:auto, or that the specs for display:table; will change in the future, since it seems to be entirely unsupported in some browsers (namely IE).

Comments/Flames welcome

-Jim Keller

No, i'm not pregnant, nor can i be (male and all), but here's my question...

I've got a menu from bullets, and i did this:

Code:

#nav-menu li:first-child {
border: none;
}

Naturally, it looks perfect in Firefox, but IE6 ignores it.

Please note, i'm extremly new to CSS, asin.. just started saturday lol... but i'm a quick learner!

Anyone know of a work around that'll hide the border in ie6?

Thanks!