|
CSS - What's Wrong With This Simple And Short Code?
a:hover {color: ##AECBE1}
a:link {text-decoration:none; color: #000000} A:visited{text-decoration:none; color: #000000} P {text-align:justify;font-size:8pt} Font {text-align:justify; font-size:7pt} h1 {font-size:24pt} h2 {font-size:18pt} BODY {SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #eeeeee; SCROLLBAR-ARROW-COLOR: #d8d8d8; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #eeeeee; } ^All in middle.css what's wrong with it? Ok, when I view my page, the justified part and everything else works, but the link wont change color when my mouse goes over it. WHY?!?!?! Similar TutorialsHave some problem with my css. Would appreciate some comments on how to do this: Here is the code: with explanation of what's not working: It's a small "complete" htm file..... Code:
<html>
<head>
<style>
.outer {
display: block;
background-color: #bbb;
border: 0;
padding: 0;
text-align: center;
font-family: Arial,sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a {
display: block;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a:hover {
text-decoration: underline; color: #fff;
}
.outer a:hover .text-top {
text-decoration: none; color: #000;
}
</style>
</head>
<body style="background-color:#888;">
<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>
I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>
NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr>
<td>
<div class="outer">
<a href="#">
<div class="text-top">
<br>Top text<br><br>
</div>
<div class="text-img">
<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
</div>
<div class="text-bot">
<br>Bottom text<br><br>
</div>
</a>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
hi everybody i made that topic in green bcz i love real betis im kind of new here it is a good forum really i have a problem that makes me crazy at fact 2 problems but i dont want to be rude lol so i will post 1 problem and sometime else i will post another one my problem is that i make a css page that i call style.css but even if i put the right code like that => PHP Code: <html dir = "rtl"> <head> <title>programming forums</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <p id="center">programming3 the best forums ever</p> </body> </html> but when i try this code i dont get what i want im i wrong in something guys ok im waiting for ur gifts :d i mean suggestions cyo lateeeeeer[/color] Hi, How come one can I write short form of hexadecimal(shorthand) #fff instead of normal #ffffff? How does it work? Does browser automatically assume that the rest is the same? Thank you. I have a body, a container div, and inside the container div, a head, navigation, content, and footer div. I have the background of the body filled in with a repeating background image .. and I have the footer div with clear: both, so it will show up below the content div, rather than just underneath it. The problem is the body background does not extend past the lower portion of the footer. How can I fix this? Link to Website I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content. No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes. Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling! Flaw/s in the code? I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu? For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/ Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :| Hi, I'm trying to use CSS and php includes to simplify my website admin. What I'm trying to do is create a banner area, a left column and a right column. Each section then calls another php page. I will eventually let the right column have the correct content instead of calling another page. My problem is that none of the basic formatting is being applied to my content. The menu.htm page in bold is also calling the style.css as is the c_index.php. I have tried seperating the layout CSS and the formating CSS but it did not make a difference. When I view both menu.htm and c_index.php in seperate windows they are affected by changes in the style.css! Would somebody be kind enough to explain where the error is? Here is my code: TEST PAGE Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Planet Phillip</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner"><?php include "header.php";?></div> <div id="leftcontent"><?php include "menu.htm";?></div> <div id="centercontent"><?php include "c_index.php";?></div> </body> </html> STYLE.CSS Code: a:active { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:link { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:visited { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:hover { color:#0000FF; text-decoration }
.hline { height: 1; color: #003300; text-align: left; margin-top: -6; margin-left: 36; margin-bottom:0 }
.date { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: left; margin-top: 0; margin-left: 36; margin-bottom: 0 }
.project { font-family: Verdana; font-size: 10pt; margin-left:60; font-weight: bold; margin-top:12; margin-bottom:2 }
.newsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:8 font-style:italic }
.newstext { font-family: Verdana; font-size: 10pt; text-align: justify; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.posted { font-family: Verdana; font-size: 10pt; text-align: right; margin-top:8; margin-bottom:30 }
.listtext { font-family: Verdana; font-size: 10pt; text-align: left; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.tabletext { font-family: Verdana; font-size: 10pt; text-align: justify }
.listsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:-12; font-style:italic }
.Mheader { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: right; margin-top: 0; margin-bottom: -18 }
.Mlink { font-family: Verdana; color: #003300; font-size: 16pt; text-decoration: none; text-align: right; margin-bottom: 18 }
#leftcontent {
position: absolute;
left:0px;
top:150pt;
width:120pt;
}
#centercontent {
margin-top: 50pt;
margin-left: 150pt;
}
#banner { margin-left: 60pt; margin-top: 30pt;}
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 Hi be gentle with me im new I am trying to put a backgroung image in my div the code i have used is below, in my styles file i have .backgroundbox { background-attachment: fixed; background-image: url(backpat1.png); background-repeat: no-repeat; background-position:top; height:600px; width:900px; position:relative; background-position: top left; top: 0px; left:0px;} and in the body i have <div class="biggestcolumn" "backpat1" align="center"> if someone could please tell me what ive done wrong. I'm having issues with the HTML/CSS, only in IE, on the following page: http://www.datamonkeys.co.uk/webmail/webmail/log_in.php It looks ok in FF....It has something to do with the absolute/relative positioning, i think.... can anyone help me out here? thanks.. Hello, I'm confused about how exactly to name classes in a specific situation. I'm getting unexpected results, and I'm not sure if it's browser support or my code. Does .classy a { something: something; } describe all anchors nested in an element with the class "classy"? Can I do that even? Or is it the same as .classy, a { something: something; } To describe two things that both have the same styles. Do I need comma's or is .classy .classless { something: something; } the same thing as .classy, .classless { something: something; } Thanks hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated. here is the CSS Code:
<style type="text/css">
html, body {padding: 0;
color: #000; background: #eee;
font-family: Arial, Veranda, sans-serif;
margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 3em 1em 0; margin: 0 0 0 0;
border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
margin: 0; padding: 2.5% 12.5%; clear: left;
border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
text-decoration: none; font-weight: normal;
border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc;
border-color: #eee #CCC #eee #ccc;}
</style>
and here is how it is being used in the html Code: <h1></h1> <ul id="nav"> <li><a href="/render/">?</a></li> <li id="current"><a href="/newmed/">contact us</a></li> <li><a href="/photos/">about globalhotel</a></li> <li><a href="/design/">my account</a></li> <li><a href="/webdev/">hotels</a></li> </ul> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> and finally here is a link to the page where i am having probs. thanks in advanced RF My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time. goto www.eldore.com Thanks My site looks as expected in IE, but Netscape...Fotget it. I can't figure it out, i've been at it for a long time. goto www.eldore.com Attached is my css file. Thanks This may not belong here. But it's about a CSS file, so I'll explain: I have css files in that are not having any effect. Using Firebug, I think I've narrowed the problem down to a server-side issue. Here are my headers: Request: Host: host User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: https:/host/page Cookie: ........... Response: Date: Tue, 27 Jul 2010 18:34:59 GMT Server: Apache/2.2.3 (Red Hat) X-Powered-By: PHP/5.1.6 Content-Length: 2613 Connection: close Content-Type: text/html; charset=UTF-8 It looks like the server is delivering the css file as text/html and the browser is not interpreting the css styles. Other css files work. For example (main.css): Request: Host: host User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 Accept: text/css,*/*;q=0.1 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: https://host/page Cookie: ..... Response: Date: Tue, 27 Jul 2010 18:34:59 GMT Server: Apache/2.2.3 (Red Hat) Last-Modified: Tue, 27 Jul 2010 16:21:07 GMT Etag: "136d7c-cba-e36a82c0" Accept-Ranges: bytes Content-Length: 3258 Connection: close Content-Type: text/css My server is Apache 2.2.3. I've tried adding "AddType text/css .css" to the httpd.conf file. But that had no effect. Any suggestions? I'm attempting to build my first purely-css site, and it's both exciting and quite frustrating. My latest frustration, after having found a 3-column format I like, is the footer. It looks fine in IE, but in Firefox its placement is entirely wonky - up under the header and behind the main content. Check it out at: http://www.theatrebayarea.org/v2/ and the css is he http://www.theatrebayarea.org/v2/css/default.css It does this whether I put the #footer <div> inside or outside the #frame <div>. Any ideas on why it's doing this, and how I could have it reliably appear at the bottom of the three columns? Thanks, Daniel I am trying to acheve a 2 coulumn layout, but I keep getting problems wilt the side-box. I am designing this layout for a system where users can insert content, so I am not sure how much content will be added to the two boxes. I am trying to show what I want to acheve in a picture-file: http://www.student.uib.no/~st11920/...out_problem.gif No matter how I do it I cannot get the surrounding DIV to expand horisontally according to the fixed content DIV's height. It will gladly expand to the liquid sized one, but the other one wich I have positioned absolute will not affect the surrounding DIV. My guess is that this is the expected result. The HTML is he http://www.student.uib.no/~st11920/...divproblem.html But my question is how can I do what I want with CSS? Hello all, I am completely new to web development and am trying to learn by building my own website. The issue I have run into is getting my css to work on my page. HTML: <html> <head> <LINK rel="stylesheet" type="text/css" href="style.css"> <title> The Shore Report </title> </head> <body> <img src="TheShoreReport.jpg" > <img src="Web Background.jpg" > </body> </html> CSS: body { background-color:#b0c4de; } Is there something wrong with my link or what? Hi I am using an external stylesheet to try to format some text, but its not working. This is what is in my stylesheet? PHP Code: .small{ font-size: 11px; font-family: verdana, arial, tahoma;} I then used this: PHP Code: <span class="small"><font color="#000000">my text</font></span> But its not formatting it. Any ideas? O.K. Here is my style sheet code ... Code: <style type="text/css">
channel-container
{
background-color:#66FF66;
width:500px;
margin:auto;
clear:both;
}
.channel
{
background-color:#CCFF00;
width:465px;
margin:auto;
}
.channel#
{
background-color:#99CC99;
width:35px;
margin:auto;
}
</style>
and here is some of the html .... Code: <div class=channel-container> <div style=channel>A&E</div> <div style=channel#>118</div> </div> <div class=channel-container> <div style=channel>ABC Family</div> <div style=channel#>180</div> </div> <div class=channel-container> <div style=channel>America Live</div> <div style=channel#>219</div> </div> <div class=channel-container> <div style=channel>Angel One</div> <div style=channel#>262</div> </div> <div class=channel-container> <div style=channel>Angel Two</div> <div style=channel#>266</div> </div> <div class=channel-container> <div style=channel>Cartoon Network (East)</div> <div style=channel#>176</div> </div> <div class=channel-container> <div style=channel>Cartoon Network (West)</div> <div style=channel#>177</div> </div> Now believe me I know this is not aesthetically appealing ... However I am just trying to get a base layout where I have a container I can change the background color on, or alter as I wish in the future. Then I want the channel name to show up, with the channel number in a separate cell .. All easily changable at will through the CSS rule modifications. Can anyone tell me what it is I am doing wrong here ? I am getting no formatting at all with the code I am using. On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around? Thanks |
|||||||