CSS - Assign Different Properties To Different Link Sets On Same Page (was "newb Question")

Hi!

How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden).

Thank you

Alrite,

I am trying to use a CSS to change the hover, visited, active, elements on a link. This works, however it does not seem to work when I use "#" links. I am tryin to use a dud link so that JavaScript can open another window.

Any ideas???

Thanks

I have an image I am using for my submit button, it has this "Link Box" around it that I want to go away. I just want the image shown and not the border or whatever is happening here.

I assume it is because it is a link. I use an external style sheet for the rest of the page, so if there is a suggestion for me to reference a style from the style sheet, this would be a huge help.

I have read about everything I could and still cannot find my answer.

Is there a way to get rid of the box around my image using CSS?

Here is what I have:

<input name="imageField" type="image" onClick="return valLoginForm(frmLogin)" src="images/b_login.gif" width="60" height="18" >

Thank you for your help.

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

Hi - i have forgotten how to assign different link "effects" to different links, so if someone could remind me i would be extreeeeemely greatfull !!!

Cheers

Jackson

Hello all,

I understand that it is important to have your CSS & XHTML correctly validated. However, recently I have seen a surge of links usually at the footer of some websites which link directly to the W3C Validator website, 'proving' validation of the website.

Is their any particular reason for this?

Here is an example:
armadadesign.ca


I would appreciate any feedback, thanks!

Tip of the tongue syndrome:

What is the CSS selector that affects all elements, again?

I remember it being "*" or something

I want to apply a thin border to everything on my layout so I can see where the positionings have gone.

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't.

Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id.

This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in.


CSS Code:
Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }

  

 .nav1 {float:left; position:relative;display:block;}


 .nav1 li {margin:0px; padding:0px; display:inline;}


 .nav1 li a {height:30px; float:left; list-style:none;}


 a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/


  


 #home a{


     float:left;


     background-image: url(images/nav_main_1.png);


     display: block;


     height: 30px;


     width: 132px;


     text-decoration: none;


     background-position: 0px -31px;


 }


  


 }


 #home a:hover, a.current{


     background-image: url(images/nav_main_1.png);


     background-position: 0px 0px;


 }


 #news a{


     float:left;


     background-image: url(images/nav_main_2.png);


     display: block;


     height: 30px;


     width: 131px;


     text-decoration: none;


     background-position: 0px -31px;


 }


 #news a:hover, a.current {  


     background-image: url(images/nav_main_2.png);


     background-position: 0px 0px;


 } 

html4strict Code:
Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul>

  

 <ul class="nav1">


         <li id="home" class="current"><a href="#"><span>Home</span></a></li>


         <li id="news"><a href="#"><span>News</span></a></li>                    


 </ul> 

Any help is greatly appreciated, I would imagine I am missing something simple.

Hi Guys,

I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif.

Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen.

I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible.

What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS?

Hi everyone,

I am trying to create a div that will "float" over an image when the mouse is moved over the image.

I have got the div to appear and disappear when the mouse is hovered over the image, however, unless the positioning is absolute the page grows according to the size of the floating div.

Below is the code I have used. I am almost certain there is a better way to do this. Possibly without the javascript. Any suggestions would be greatly appreciated!

CSS:
Code:

#test {
	background-color: #6374AB;
	display:none;
	position: relative;
	top: -52px;
	z-index: 2;
	width: 400px;
}

#container {
	background-color: #c0c0c0;
	width: 500px;
	border: 1px solid #000;
	padding: 10px;
}

#fakeImage {
	background-color: #00ff00;
	width: 100px;
	height: 50px;
	border: 1px solid #000;
}

.opaque {
	opacity: .7;
	filter: alpha(opacity=70);
}

javascript:
Code:

function makeVisible(whichNavs)
{
	document.getElementById(whichNavs).style.display="block";
}
function makeInvisible(whichNavs)
{
	document.getElementById(whichNavs).style.display="none";
}

HTML:
Code:

<div id="container">

<div id="fakeImage" onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');"><A HREF="javascript:">expanding link</A></div>

<div onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');" id="test" class="opaque">shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf </div>
</div>

Hi there,

I have xsl:
Code:

<div class="block">
  <table>
    <tr>
      <th>header1</th>
      <th>header2</th>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr></tr>
  </table>
</div>

and css:
Code:

.block{
  page-break-inside: avoid;
}

but it's not working, this should prevent page break in the middle of that table, but it does not. If the table happens to be in middle of page break the end of the table is printed to the beginning of next page.

If I replace page-break-inside: avoid; with page-break-befo always; it does break before the table. So what wrong with page-break-inside, it should work, right? What am I missing..? I guess it's something stuped.. please, help me out, thanks!

I am trying to centre my web contents with the following code via css:

.fixcenter {
width: 775px;
margin: 0px auto;
background: #ffffff;
color: #000000;
text-align: center;
}

It is working fine in both IE and Firefox.

Problem [FireFox Only]:
It center's the content in firefox, but when scroll bar appears, my contents jumps to left a little.
It looks bad that , contents jumps little left after loading.

Is there any solution: