CSS - "remote" Rollover

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

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

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

Hi guys!

Let's say I have this IN BODY directly:

Code:

<div id="top_section">
...
</div>

<ul id="menu">
...
</ul>

Or should I do it like this:

Code:

<div id="top_section">
...
</div>

<div id="menu">
<ul>
...
</ul>
</div>

UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??)

Thank you

I have a very simple question:

I have this html code:
Code:

<div id="text">
<p><a>text</a></p>
<p><a class="red">text</a></p>
<p><a>text</a></p>
</div>

And this CSS style:
Code:

.red {  color: red;  }    
#text a{  color: blue;  }

I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side.

Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case,
which CSS does not recognize? If so, is there a way to disable this feature?
What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great.
Or, can we simply get rid of the height and width calls in "img src=" links?
Thank you for any attention to this.
Ed

need help on a background rollover, I have tried for hours now and have been unable to get this to work.

I have been working with CSS and have been unable to either change the background when rolling over nor making images visible when rolling over.

The site Iam working on is http://www.opticalflare.com and I want it so that when I roll over the birds in the tree that the background switches or the image appears of the man lifting his arm and pointing to text saying what the section is.

Best I could get was the opposite. I would get image change rolling over the background but it would go away ontop of the links.

Code:

body
{
background-color: #FFFFFF;
background-image: url(/images/bg1.jpg);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0 0 0 0;
}

.cssnav {
background-repeat: no-repeat;
background-position: right bottom;
background-image: url(/images/bg2.jpg);
white-space: nowrap;
visibility:hidden;
display: block;
margin: 0;
padding: 0;
}

.cssnav a {
display: block;
color: #000000;
float: bottom-right;
text-decoration: none;
}

.cssnav img {border: 0; }
.cssnav a:hover img{visibility:visible}

</style>

<!-- The links in the birds and letter -->

<div id="cssnav" style="position:absolute; right:150; bottom:385;">
<a href="/#.html"><img src="/images/link.gif" border="0"></a>

Greetings

I'd like to make a css remote rollover, but I'm hitting a bit of a snag. Most of the examples I've seen they use the same selector type usually within an unordered list <ul>. Then just use positioning to move both links away from one another.

What I'd like to do is have a link in one <ul>, like a menu bar, linked to a rollover effect in another <ul> altogether. In a different <div> altogether as well.

Is this possible? Off the top of my head I imagine you could do it with a <span> style that only has the a:hover code in it... but I'm not getting it to work right.

Anyone else have some ideas on this? Thanks in advance.

I have an existing nav with javascript rollovers but what I'm trying to figure out is how to make a background image swap (remote rollover) in the middle of the page where the main text is (nested table so not in the body) on hover of the nav buttons as well with css background:image.

I have seen many examples on the web using the image nested in the link with "span" and "div id=something" like "#imagecontainer" with absolute positioning.

What I don't get is, the "span" nor the "anchor" in the link doesn't reference the id=something so how does it know how to put it there? I'm used to targeting with the name attribute with other languages but this part of css baffles me.

If someone could just give me the basics of how this is done, you could save me alot of hair pulling.

Thank,

Dirkk

Hello,

I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page...
------------------------
A:LINK {font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-size:12pt;
font-weight:bold;}
-----------------------

but how can i make it so each class has a differnt a:link, a:visited, ect. Thanks!

http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.).

The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly.

I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too.

The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this.

Thanks.

I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it.

Any ideas on how to rectify this?

Code:

<td><input type="text" class="loginbox" size="13" /></td>

.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}

ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times?

Thnx

Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely.

Here is my site: www.msredimp.000webhost.info

At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it.

Is there a way to force the settings in Mozilla to normal size? Or any other way?

Thank you, and sorry for being such a newbie.