CSS - Alt Tag Property In Css For <img>

I'm trying to create some links that swap background images when you mouseover them. The non-CSS solution (which looks exactly how I want it to look) is located he

http://84.9.221.75/domains/backingt...Musicindex.html

My attempt at creating a CSS equivalent of those links is located on this page:

http://84.9.221.75/domains/backingt...Musicindex.html

I just need some help with the CSS I'm using on the latter page...I read up a little on how to do this, but it's obvious I'm still doing something wrong...

I need the buttons and the text inside the buttons to line up and appear like they do in the first URL....can anyone give me some pointers here? Thank you.

This style is use useful or not

@property-group title-style() {
color: #004080;
font-weight: bold;
}

@property-group standard-vmargins() {
margin: 1.33ex 0;
}

title,
subtitle,
titleabbrev {
display: block;
property-group: title-style();
property-group: standard-vmargins();
}


This is not support IE...

Hi,

i am very new to css and I am confused about the difference between

margin-top vs top

please help
Regards
Ltoso

Thanks for all the continued help/support. . . Makes learning CSS so much easier!

Link: www.vairlinecms.com

Question: I set the html up like this on purpose to grasp the concept. <p> tags are block level containers. So each new set of <p> tags should equal start on new line.

w/the float property holding a value of left, it floats all content to the left.

Since each instance of float occurs in its own container...the two different <p> sets should not be affected.

In short, the password: paragraph should be on a new line, not both on the same line. There should be no need to clear it because they are in their own containers - which are block level.

Where is my logic/understanding of CSS flawed?

HTML:
Code:

<div id="clientLoginBoxBody">
	<form action=#">
	<br />
	<p class="user">Username:</p>
						
	<p class="pass">Password:</p>
      </form>
</div>

CSS:
Code:

#clientLoginBoxBody p.user, p.pass {
float: left;
margin: 0;
margin-left: 10px;
padding: 0;
font-size: 12px;
text-align: right;
}

I'm pretty new to css but now use one css file for all of the formatting of my entire website. The only problem I see with that (I say problem because I can't figure out a way around it) is that all of my hyperlinks throughout the website have only one normal state, hover state, active state and visited state. Is there a way to make more than one hyperlink set of formats? Like if I wanted to make one for each page? I could do something like ahomepage:link, ahomepage:visited, ahomepage:active or something???

Code:

a:link, a:visited, a:active  { font-size:12px; font-weight:normal; font-family: times; text-decoration:none; color : #000000 }
a:hover                      { font-size:12px; font-weight:normal; font-family: times; text-decoration:underline; color : #000000 }

Ok what i want to happen is that when person clicks on a link i want a div to appear/be visible underneath that link. But i want that div to not take any space unless i click on a link.

I recently did something similar BUT the div was taking the space but was just hidden.

I am wondering if there is some way to make a <div> layer automatically expand to the full height of the screen similar to the way that one would use width=100% when talking about the width of a page.

I have a layer that I want to extend to the bottom of the page no matter what resolution the user has on their screen. Maybe the layer could just extend all the way until the next layer?

Any Ideas?

Thanks

Jamie

Hi all

i am using the CSS display property to show/hide selected text on a webpage. The user clicks on a link which then shows hidden text and then clicks on another link to hide the text. This works fine in IE but not in Mozilla.

does anyone know what i can do to make it work in Mozilla ?

atttached is a zip file of my webpage/code

thanx

chris

So, I have a div that is acting as a container. I contains a background image and colour that goes beyond the image should the image not be big enough for certain resolutions. Anyways inside this div container are 2 more divs, one with a set height that holds images, and another one below the first one that holds text. Now this text changes on a regular basis, but I don't really want to have to adjust the height of the container div everytime I add more text or take away text, I want it to automatically adjust the height as it needs to. I tried setting the height property to auto, but that didn't do anything. Just wondering if someone knows a way to do this?

html Code:
Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style = "text/css"> .main { width:200px; height:300px; position:absolute; background:yellow; top:0px; overflow:hidden; } .container { display:inline; position:absolute; width:100px; height:100%-; _height:100%; margin-bottom:auto; top:151px; bottom:0px; background:red; overflow:hidden; } .test { display:inline; position:absolute; width:100px; height:100%; background:blue; } </style> </head> <body> <div class ="main"> <div class="container"> <div class="test"></div> </div </div> asdfasasdfsdaf </body> </html>

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <style = "text/css">
        .main {
            width:200px;
            height:300px;
            position:absolute;
            background:yellow;
            top:0px;
            overflow:hidden;
        }
        .container {
            display:inline;
            position:absolute;
            width:100px;
            height:100%-;
            _height:100%;
            margin-bottom:auto;
            top:151px;
            bottom:0px;
            background:red;
            overflow:hidden;
        }

        .test {
            display:inline;
            position:absolute;
            width:100px;
            height:100%;
            background:blue;
        }
    </style>
</head>
<body>
<div class ="main">
    <div class="container">
        <div class="test"></div>
    </div
</div>
asdfasasdfsdaf
</body>


</html>

Basically I have a div that fills up the main div(main). The reason that there are 2 other divs is because one is slightly translucent and I didn't want the text to be translucent so it is for sitting on top of it and displaying the text, (I know it doesn't do that right now, this is just example code). My problem is that I want the div(test) to fill up the main div(main) from a certain point down, that is make it start 151px from the top and then expand until the bottom of the main div. I discovered that you can do this in firefox and opera by placing a - at the end of the height:100%. I don't know if this is correct, but it works. It does not work however in ie6. i can chop it using overflow:hidden;, but thats not really the functionality I want since the div in the final version will have a border on it. Is there someway to make it display the same way in Internet Explorer 6 as in firefox?

Thanks
akurtis

Hi,

I have recently changed to using a DIV layout when designing sites.

One problem i have noticed is that the margin:0 auto; doesn't work in IE5.5

What can I do to get around this?

Many Thanks,
Jonathan.

Trying to use css to make a border around an element, and am using:

.navbar { border: 1px solid red; }

In IE, it puts a border around the navigational bar, but in FF, it only puts 1 line above it. Even if I try independently adding:
border-left
border-right
border-bottom

etc, it only shows above for border-top and border-bottom and nothing for left and right.

I can place the code if needed, but I really just have a few words typed to try and get this to work. It's of strict doctype if that matters.

Does FF have something special I need to add to get border to work?

Thanks.

Safari does not recognize the CSS property overflow.

Does anyone have a workaround for this? I have been made aware of this bug just today, Safari does not handle this gracefully, it actually renders the div very very poorly, destroying it really.

I would remove the overflow element but i need it.

Hi,

In IE7 or IE6 clear works differently than in any other browser. I would show you my test page, but I can't post a url apparently.

Anyways, is there a fix for this or an explanation? I have tried in vain to find any information about this on Google. I thought a following sibling float can't be higher than its previous sibling.

Thanks!

www.clydesdaleframes.com/test/fortran.html

Does anyone know why my "next page" button's background is extending the full width of the text like that?

css is www.clydesdaleframes.com/test/styles.css

thanks in advance,
Chris