|
CSS - Css Adding Extra (mysterious)height, Text Colour Wont Change!
Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either.
Code:
body
{
background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
top:0;
width: 100%;
height: 900px;
Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css. Help will be greatly appreciated EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts. Similar TutorialsUm... OK so I wrote a post asking if anybody knew why something was displaying incorrectly on my site, but due to forum rules I wasn't allowed to include any links. So how can I show you the problem if I can't show you? Also, the link saying "see forum rules for more information" didn't have any more information. Like, how many posts until I can ask for help and actually show what the problem is? Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) I'm assuming this is going to be a CSS issue. I have a table cell which contains text, and for the sake of accessibility, I'm allowing text resizing and would like to prevent the table cell from changing in height when the font size is increased. Basically, as the font size increases, the width of the cell is the only thing that will change, not the height. First, is this possible? Second, if so how can this be achieved? I'm pretty sure that I've seen other sites do this, just can't remember where. Thanks in advance! Hi all, I would be very grateful if someone could help me out with a coding problem. Basicaly, I have two columns and I want both to fill with the background colours with the same height. My sample coding is below. (NOTE: Ive had to remove the urls from the DOCTYPE and <html>, please replace with correct code). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml" > <head><title>100% Height CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #all{ WIDTH: 950px; PADDING-TOP:0px; MARGIN: 3px auto 0px; POSITION: relative; BACKGROUND-COLOR: #fff; FLOAT: left; } #leftside{ FLOAT:left; WIDTH:169px; MARGIN: 0px; PADDING: 0px; BORDER-RIGHT: 1px solid #999; POSITION: relative; BACKGROUND-COLOR: #ededed; } #rightside{ BORDER: 0px solid #000; WIDTH:775px; FLOAT:left; POSITION: relative; MARGIN: 0px 0px 0px 5px; BACKGROUND-COLOR: #F4CDD8; } </style> </head> <body> <div id="all"> <div id="leftside">a<br>b<br></div> <div id="rightside">c<br>d<br>e</div> <div> </body> </html> In the above example I would like the "leftside" div to stretch to the same height height as the "rightside" div filling the area up with the "leftside" background colour and also extending the 1px border. All help much appreciated. Thanks Soph Hi, I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change: Code: /* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }
I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row. Code:
<td class="row4" onmouseover='window.status="{$info['name']}";
this.style.backgroundColor=iOver;' onmouseout='window.status="Done";
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>
Thanks, Prism128 PS: The iOver and iOut (in the second code) are colour references in a php file Hi, I have some text which has a line through it, i.e. .sale_originalprice { color:#666666 ; font-family: Verdana, Arial ; font-size:10pt ; font-weight:normal; text-decoration: line-through; } What I want to do is change the line-through colour to red. But the text should remain grey (i.e. #666666) Is this possible? I tried text-line-through-colour: red; already but that didnt work Thanks! Thanks for taking the time to read my question. I have posted what I'm working on at http://www.scopicdesigns.com/ZoneAll/NewIndex.htm I have put a yellow background on the main nav container to illustrate my problem. There seems to be extra height to the .NavContainer in IE6, but it is not there in IE7 or FF. I've tried adjusting all my margins and paddings, but nothing seems to work. I also tried increasing the width of the .NavContainer, thinking that there was some sort of overflow from the last button or something, but that didn't work either. How do I get rid of this? Thanks, Brad Hay everyone! Trying to change the scrollbar colour... The problem is that it changes the font size of the menu at the top and shifts some other stuff around, generally annoying stuff. BUT!, the scrollbar colour does change!! Any help would be great Here is the code from the begininng.... <STYLE type="text/css"> <!-- BODY { scrollbar-face-color: #000000; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #333333; scrollbar-darkshadow-color: #333333; scrollbar-shadow-color: #333333; scrollbar-arrow-color: #000000; scrollbar-track-color: #333333; } --> </STYLE> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- DW6 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link rel="stylesheet" href="emx_nav_left.css" type="text/css"> <script type="text/javascript"> <!-- ....blah blah blah and the rest of the site! Cheers - i'm probably being really dumb! JonOSaX I have a block that im trying to change the colour of when a user moves their mouse over it, but it isnt a link. At the moment its a div and the css for the block is simply: .postbitleft { background-color: #0B198C; } (aside from the size attributions which are already defined. What do i need to add to that CSS for it to change colour when someone hovers over it? Can i actually use CSS for that or will i have to use javascript? Regards, James I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
Can anyone tell me how to change the background colour of all tooltip texts on a web page? Cheers. When you make a normal drop down menu in a form tag you get your text field and then that small grey box with the down arrow in it. Is it possible to change that grey colour to some other colour? Thanks. Hi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; }
But it doesn't change the links text colour. In CSS, is it possible to define certain colours for a certain piece of text? For example, in the site I'm doing at the moment, the paragraph font-colour is black, but when the text ''CrudeSep'' comes up, I would like The 'sep' piece of the text to be in orange. This would save me having to make an image to do this! Any help appreciated. Hi. I think this is probably a simple question for you guys. I have a web page with lots of input text boxes. What I would like is when the cursor is in the text box, the background changes to yellow from white. And as an added bounus. Some are originaly grey to indicate required input and maybe even a difrent active colour. Lots of websites do this so must be simple. TIA Desmond. Hello everyone. I have a site that uses a PHP command to pull the PHP modifier from the URL and use that as a class for a header. Those classes each have their own BG image in my external stylesheet. On any browser other than IE win it works fine, headers change as the class changes. On IE win though only the first one (my "about" class) works, the rest default to the standard header. I have re-typed the rest to see if it was just a text problem but nope. Everything validates fine. The page is http://holiday.mrpunkin.com/about.php My classes are as follows: they all modify the "mid" div as you can see: Code: #mid.about {background: transparent url("/img/headers/mid_about.gif");}
#mid.activities {background: transparent url("/img/headers/mid_activities.gif");}
#mid.food {background: transparent url("/img/headers/mid_food.gif");}
#mid.travel {background: transparent url("/img/headers/mid_travel.gif");}
#mid.resident {background: transparent url("/img/headers/mid_res_rel.gif");}
#mid.health {background: transparent url("/img/headers/mid_health.gif");}
#mid.fitness {background: transparent url("/img/headers/mid_fitness.gif");}
#mid.maintenance {background: transparent url("/img/headers/mid_bg.gif");}
#mid.construction {background: transparent url("/img/headers/mid_construction.gif");}
#mid.employment {background: transparent url("/img/headers/mid_employment.gif");}
Does anyone know why IE Win won't recognize the different BG images and use those? When I view the source I can tell that its outputting the class name correctly, so thats not the issue. Please get back to me asap. Thanks. I have a few lines of text which have different formatting setups. But there seems to be an extra space between the two lines of text. Why is this? Here is the css for the text: Code:
h1{
color:#534741;
text-decoration : none;
font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
padding-left: 18px;
}
h2{
font-size: 16px;
color:#1133aa;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
h3{
font-size: 12px;
color:#534741;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
Here is the text itself: Code:
<div id="centerformbottom">
<h1>or call</h1>
<div id="centerformbottomleft">
<h2>Janine Todd</h2>
<h3>312.848.9388
<a href="mailto:janine@imaginehealthsolutions.com ">janine@imaginehealthsolutions.com </a></h3>
</div><!--centerformbottomleft-->
<div id="centerformbottomright">
<h2>Bob Brodell</h2>
<h3>312.659.4242
<a href="mailto:bob@imaginehealthsolutions.com">bob@imaginehealthsolutions.com</a></h3>
</div><!--centerformbottomright-->
</div><!--centerformbottom-->
Here's a link to the page itself: http://www.childevangelismncwi.org/ImageHealth/Contact.htm Thanks! Having a little trouble. I'm creating a horizontal nav menu with a bg image for each li, but can't seem to get the height set for the li in css. Using this code: Code: nl#navBar {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
nl#navBar li{
list-style-type: none;
display: inline;
}
nl#navBar li a:before {
content: url(../images/navbutton_left.gif);
}
nl#navBar li a:after {
content: url(../images/navbutton_right.gif);
}
nl#navBar li a{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg.gif);
}
nl#navBar li a:hover{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg_hover.gif);
}
I have tried several different variations of code putting height attributes and displays as block, but no combination seems to work. |
|||||||