CSS - 2 Link Colors On A Page
I'm making a page and I've got an a:link specification. I want a separate specification for a part of the page under a .header tag. The background on that part of the page doesn't match the a:link color I have specified for the rest of the page. So I want one specifically for the .header tag.
Doesn't seem to be working though. How do you think I should throw it in there? Similar TutorialsHello all I need help please :-) I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working Code: <style type="text/css"> body { background-image: url(./images/pgbg.gif); color: #000000; /*the below link attributes does not work */ visited: color:#000000; text-decoration: none; link: color:#000000; text-decoration: none; focus: color:#000000; text-decoration: none; active: color:#000000; text-decoration: none; hover: color: #CC0000; } .header{ background-image: url(./images/header.png); background-color:#E6E6E6; position:absolute; width: 900px; height: 100px; left: 50px; top: 5px; } .navbox1{ /*General Links Navbox*/ background-image: url(./images/navbg.png); position:absolute; background-color:#E6E6E6; width: 170px; left: 60px; top: 115px; padding-left: 5px; /*the below link attributes does not work */ visited: color:#E6E6E6; text-decoration: none; link: color:#E6E6E6; text-decoration: none; focus: color:#E6E6E6; text-decoration: none; active: color:#E6E6E6; text-decoration: none; hover: color: #CC0000; } .navbox2{ /*Users Links Navbox*/ background-image: url(./images/navbg.png); position:absolute; background-color:#E6E6E6; width: 170px; left: 60px; top: 310px; padding-left: 5px; /*the below link attributes does not work */ visited: color:#E6E6E6; text-decoration: none; link: color:#E6E6E6; text-decoration: none; focus: color:#E6E6E6; text-decoration: none; active: color:#E6E6E6; text-decoration: none; hover: color: #CC0000; } .loginbox{ /*Login Box*/ background-image: url(./images/navbg.png); position:absolute; background-color:#E6E6E6; width: 170px; left: 60px; top: 400px; padding-left: 5px; } .content{ background-color:#E6E6E6; position:absolute; width: 700px; height: 455px; left: 250px; top: 115px; padding-left: 10px } .footer{ position:absolute; width: 700px; left: 100px; top: 585px; color: #D6E7D3; } </style> I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this? thanks Hi, Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website? Thanks Greetings all. I am building a site which displays data in tables, with different background colors and different text colors. I am using CSS for everything, and it's working out great. Very happy with it so far. What I want to do, and can't seem to figure out, is link / visited colors. In each line of data, some of the columns are links. I want to set the link text color to the same as the non-link text color. I can override the text color easily enough. If I want a row to be white on red, I do that by saying: <tr style="background-color: #f00; color: #fff" >. I cannot figure out how to change a link color. The cells in the row that are links, I want to make them white on red also. Not just the default link color for the page. Any help would, of course, be greatly appreciated. Thanks, Tom I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links. Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me. A little background for you...the lists are as follows: 1 - a list of currently open jobs in the company 2 - a list of all jobs in the company Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database. I've set-up a few link colrs in a style sheet - I see it working in mac IE, and Safari - but not IE in windows. Most of the formatting is being ignored. I'm going to try setting all attributes (link, visited, hover...) for each set but that seems like a reach. any ideas? the link: http://www.eightbyten.com/rc_store/shopcart_test.html the style sheet directly: http://www.eightbyten.com/rc_store/link.css Thanks! This is the new site I'm working on: http://animalemergencybloomington.com/Index2.html Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.) Right now I have this in the <head> css Code: Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style> <style type="text/css"> and this for the <body>: <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF"> adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover. I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo. I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover. Help? Thanks, Ez I'm just starting to experiment with external css files and I'm stuck on how to deal with setting color for the links. When I put this in the html page itself it works fine: <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> But when I instead move it to the body section of my external css file and link to that css from my html file, it doesn't do anything (link colors just go back to the default). I know I'm generally setting up the external css file correctly since the other things I set in that external file get picked up correctly (font family, font size, background image, etc.). Any magic to using link colors in an external sheet?? In case it helps, here is my css file: Code: body { background-color: #000033; color: white; background-image:url(balbkgnd.gif); a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} } td { font-size: 12.0pt; font-family: Trebuchet MS; a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} } th { font-size: 12.0pt; font-family: Trebuchet MS; a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} } This code works in IE but not in FF. Does Firefox not support these? <style type="text/css"> <!-- A:link { text-decoration: underline; color:"#ffffff"; } A:visited { text-decoration: underline; color:"#ffffff"; } A:active { text-decoration: underline; color:"#ffffff"; } A:hover { text-decoration: none; color:"#fffffff"; } Body { background:url(http://n0madism.tripod.com/mbg.jpg); background-color:#000000; background-repeat: no-repeat; font-family:Georgia; color:#ffffff; font-size:10 pt; text-align:left; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #FFFFFF; } td { font-family:Georgia; color:#ffffff; font-size:10 pt; } --> </style> I've searched the forum but can't find why my test with the following code works properly in IE (white link goinf yellowish on mouse over but not in FF or Op. It would be useful to correct this before going any further: Many thanks Robert ______________________________ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content="test" content="test"> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8895-1" /> <link rel="stylesheet" href="testcss.css" TYPE="text/css"> </head> <body topmargin="0"> <div align="center"> <table border="1" cellspacing="1" width="760" bordercolor="#243348" height="50"> <span class="menu"> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item1.htm">item1</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item2.htm">item2</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item3.htm">item3</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item4.htm">item4</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item5.htm">item5</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item6.htm">item6</a></td> <td width="40" align="center" bgcolor="#243348" height="50"><a href="item7.htm">item7</font></a></td> <td width="41" align="center" bgcolor="#243348" height="50"> <p align="center"><a href="item8.htm">item8</font></a></td> </span></table> </div> </body> ______________________________ .menu a {text-decoration:none; font-family: arial; font-size: 10pt } .menu a:link {color:#FFFFFF; } .menu a:visited {.color:#FFE2A8; } .menu a:hover {color:#FFE2A8; } .menu a:active {.color:#FFE2A8; Hello dear programers This my problem If anyone can help me,I will be so thanksfull,: I have a full site script package which is in php,(I dont knoe php !! ) There is a style.css file,which I could change in colors and fonts,...but I want to change a page with new design and colors and style,I tried to edit style.css file (I deleted,changed it :/body, td, .forTexts/ but NOTHING happend!!)to make this page OK,But I couldnt,page doesnt load with its fonts and colors. ------------------------------------------ I past the original style.css : form { margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;} .toptable { background-color: FF8D00; } a.toplink, a.toplink:hover, a.toplink:visited, a.toplink:active { color: white; text-decoration: none; } .forCopyright { font-family: Times New Roman; font-size: 11px; color: #EDD1D7; text-align: center; background-color: ff8d00; } body, td, .forTexts { font-family: Times New Roman; font-size: 13px; color: #000000; } a.menutxt, a.menutxt:hover, a.menutxt:visited, a.menutxt:active { font-family:Times New Roman; font-size: 13px; color: #F3FBB4; } .menutxt { font-family: Times New Roman; font-size: 12px; color: #000000; } th { font-family: Times New Roman; font-size: 12px; color: #000000; } .title { font-family: Times New Roman; font-size: 12px; color: #FFFFFF; background-color: #FF8D00; } .inpts { font-family: Times New Roman; font-size: 12px; color: #5D0400; background-color: #D1CDFF; border: 1px inset #000000; border-color: #000000; border-style:dashed; } .sbmt { font-family: Times New Roman; font-size: 13px; color: #1D0067; background-color: #cccccc; border: 5px outset #ffffec; } a.hlp, a.hlp:active, a.hlp:visited, a.hlp:hover { font-family: Times New Roman; font-size: 13px; color: black; text-decoration: none; cursor: help;} .line { background-color: 000000; } div.framebody { text-align: left; } td.inheader { background-color: cccccc; font-weight: bold; text-align: center; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; } td.item { background-color: cccccc; } h3 { font-weight: bold; font-size: 12px; } td.gray { color: gray; -------------------------------------------------------- and this is my new page styles : .style1 { color: #4c687e; font-weight: bold; font-size: 11px; font-family: Arial; } .style2 { font-family: Tahoma; font-size: 10px; } .style3 { font-size: 12px; font-weight: bold; color: #FFFFFF; } .style4 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #c10416; } .style5 {color: #FFFFFF} .style6 { font-size: 11px; font-weight: bold; } .style8 {font-family: Tahoma; font-size: 10px; color: #4c687e; } .style9 {font-size: 12px} .style10 { color: #0a2c50; font-family: Tahoma; font-size: 11px; } .style11 {color: #66809b} .style12 {color: #c10416} .style13 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #FFFFFF; } --------------------------------------------------- If I change the fonts and colors in new page manually,The page doesnt come up at all. please help me if you can. best regards Hello all, Is it ok to add the following on the same htm page??? The reason I think, and corrcet me if i am wrong, is that Netscape wants the IMPORT one as opposed to IE wanting the LINK one. Code: <link href="scripts/CoffsCoast.css" rel="stylesheet" type="text/css" /> <style type="text/css">@import url("scripts/CoffsCoast.css");</style> Hi All, I would like to figure out a way to have my menu item font stay a different color if the user is on that page. I thought that the a:active would do the trick, but apparently a link is only active immediately after clicked and does not carry over to the page that was linked. I am trying to stay away from images and javascript because I can't get them to look right against my background, so I was wondering if there was a css way to create this effect without changing every page. I have a header file that contains this menu because I will be updating it frequently with new links and pages and would rather only change it once... thanks! Hi all, I am making a test page for a client. It's a VERY simple site (he's a simple guy ), but I am having a little trouble with something that's probably pretty easy. For some reason, though I just can't get it to cooperate. The site is at www.bartlett-family.net/test On the footer, you'll notice that it also has a few links and those links have the SAME properties (through the CSS) as the other page links on the left and right. I don't want that. I want the links in the footer to be WHITE at all times, whether clicked, hovered over, etc. How can I do this? Thanks! Chris Thanks for taking the time to read my question. Is is possible to have different link attributes on different sections of a page? For example: I'd like to have all links on the menu section be white font, visited be black font, hover to be green font and active to be yellow font On the rest of the page, I'd like all links to be green font, visited to be blue font, hover to be yellow font, and active to be whtie font. here is my css: Code: @charset "iso-8859-1"; body { text-align:center; margin-top: 10px; background-color: green; /*background-color: #d8d8d8;*/ } #frame { width: 640px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: white; } #header { width: 640px; height: 100px; background-color: blue; } #menu { color: white; font-weight: bold; float: left; width: 100px; text-align: left; text-transform: uppercase; font-size: medium; background-color: #FD9800; font-size: 16px; border: medium solid #E0E0E0; padding: 4px; } #menu a.nav { width:92px; /*How can I have different colored links in this section v.s. the rest of the page?*/ } a:visited { color:#FFFF00; font-size: 12px; } a:hover { color:#FFFFFF; font-weight: bold; font-size: 12px; } a { color:green; font-size: 12px; } Hi there, I want to create a hyperlink to an external page from my web site. Is it possible to show that external content on my page without using frame set. From the attachment, link 1 & link 2 are external links inside a div. I want to show it on the second div on the bottom. Thanks. 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color:#060606; background:url(images/background.png) repeat-y left top; } ul, ul li { margin:0; padding:0; list-style:none; } ol, ol li { margin:0; padding:0; list-style:none; } div { margin:0; padding:0; } .clear { clear:both; } .wrapper { width:100%; height:1000px; border:1px solid #FF0000; } .header_wrapper { background:url(images/banner_bg.png) no-repeat left top; height:115px; width:100%; border-bottom:2px solid #FCE66F; } .header_wrapper .header { width:906px; height:115px; margin:0 auto; outline:1px solid #0000FF; } .header_wrapper .header .logo { float:left; left:0; top:0; width:136px; } .header_wrapper .header .title { float:left; margin-left:10px; padding-top:42px; width:491px; } .header_wrapper .header .right { width:245px; height:115px; float:right; outline:1px solid #0000FF; position:relative; } .header_wrapper .header .right .link { font:Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; color:#F4E8D1; padding-top:28px; width:145px; height:20px; outline:1px solid #0033FF; position:absolute; right:0; } .header_wrapper .header .right .search { width:245px; height:35px; outline:1px solid #FF0000; position:absolute; bottom:20px; right:0; } .header_wrapper .header .right .link ul li a { line-height:10px; border-left:1px solid #F4E8D1; float:left; text-decoration:none; margin-left:15px; padding-left:15px; color:#F4E8D1; } .header_wrapper .header .right .link ul li.first a { border:none; } .header_wrapper .header .right .link ul li a:hover { text-decoration:underline; } .container_wrapper { width:923px; margin:0 auto; background:#060606; outline:1px solid #FF0000; } .container_wrapper .nav { margin:0 auto; padding-top:30px; width:923px; height:32px; font:12px Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; } .container_wrapper .nav ul { list-style:none; margin:0; padding:0; } .container_wrapper .nav ul li { display:inline; margin-top:27px; } .container_wrapper .nav ul li a { padding:17px 35px; color:#FF6600; text-decoration:none; } .container_wrapper .nav ul li.first a { margin-left:30px; } .container_wrapper .nav ul li a:hover { background:url(images/hover_button1.png) center center no-repeat; color:#FF6600; } .container_wrapper .home_container { margin:0 auto; width:906px; outline:1px solid #0000FF; position:relative; } .container_wrapper .home_container .container_bg { background:url(images/body_bg.png) repeat-y left top; } .container_wrapper .home_container .left { float:left; width:219px; outline:1px solid #0000FF; margin-left:10px; } .container_wrapper .home_container .left .background { background:url(images/left_box_bg_img.png) repeat-y left top; } .container_wrapper .home_container .left .background .title { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color:#FDFD31; width:190px; border-bottom:2px solid #FF7811; margin-left:12px; padding-bottom:5px; padding-left:2px; } .container_wrapper .home_container .left .background .pruduct { width:190px; margin-left:12px; margin-top:5px; } .container_wrapper .home_container .left .background .pruduct ul li { font:12px Verdana, Arial, Helvetica, sans-serif; color:#FFF500; padding-bottom:5px; } .container_wrapper .home_container .left .background .pruduct ul li a { color:#FFF500; text-decoration:none; } .container_wrapper .home_container .left .background .pruduct ul li a:hover { color:#FFF500; text-decoration:underline; } .container_wrapper .home_container .contain_box { float:left; width:400px; margin:0px 10px 0 10px; } .container_wrapper .home_container .contain_box .contain_title { font:bold 14px Verdana, Arial, Helvetica, sans-serif; color: #FDFD31; padding:5px 0 8px 0; } .container_wrapper .home_container .contain_box .text { font:12px Verdana, Arial, Helvetica, sans-serif; color:#ffffff; font-style:normal; text-align:justify; } .container_wrapper .home_container .right { float:right; width:253px; outline:1px solid #0000FF; } .container_wrapper .home_container .right .right_box_bg { background:url(images/right_box_bg_img.png) repeat-y left top; } .container_wrapper .home_container .right .right_box_bg .daily_news { width:195px; height:120px; outline:1px solid #00FF00; margin:0 auto; padding:0; } .container_wrapper .home_container .right .right_box_bg .daily_news .News_title { font: bold 24px "Times New Roman", Times, serif; color:#000000; text-align:center; border-bottom:2px solid #FA7815; } .container_wrapper .home_container .right .right_box_bg .daily_news .news_scroll { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; width:175px; padding-left:20px; } .container_wrapper .home_container .right .right_box_bg .login_nox { width:230px; height:200px; outline:1px solid #0000FF; margin:0 auto; margin-top:20px; } .footer { margin:0 auto; width:906px; height:73px; background:url(images/footer2.png) no-repeat; margin-top:5px; outline:1px solid #0000FF; text-align:center; } .footer ul li { font:12px "Times New Roman", Times, serif; color:#C1A579; display:inline; line-height:80px; margin-left:20px; padding-left:20px; } .footer ul li a { font:12px "Times New Roman", Times, serif; color:#C1A579; text-decoration:none; } .footer ul li a:hover { text-decoration:underline; } </style> </head> <body> <div class="wrapper"> <div class="header_wrapper"> <div class="header"> <div class="logo"><img src="images/logo.png" height="171" width="136"/></div> <div class="title"> <img src="images/banner_title.png" width="500" height="56" /></div> <div class="right"> <div class="link"> <ul> <li class="first"><a href="">Register</a></li> <li><a href="">Login</a></li> </ul> </div> <div class="search"> <table width="245"> <tr> <td><img src="images/search_bg.png" width="179" height="27" /></td><td> <img src="images/go_button.png" width="49" height="29" /></td> </tr> </table> </div> <div class="clear"><!-- --></div> </div> <div class="clear"><!-- --></div> </div> </div> <div class="container_wrapper"> <div class="nav"> <ul> <li class="first"><a href="#">Home </a></li> <li><a href="#">Voluntee </a></li> <li><a href="#">About Us </a></li> <li><a href="#">Events</a></li> <li><a href="#"> Donate </a></li> <li ><a href="#"> Carrier with us</a></li> </ul> </div> <div class="clear"><!-- --></div> <div class="home_container"> <div><img src="images/body_top.png" width="906" height="12"></div> <div class="container_bg"> <div class="left"> <div><img src="images/left_box_top_img.png" width="219" height="14" /></div> <div class="background"> <div class="title">EVENTS</div> <div class="pruduct"> <ul> <li>* <a href="#">Whatexpect on Sundays</a></li> <li>* <a href="#">Location and directions</a></li> <li>* <a href="#">Where to go to wear</a></li> <li>* <a href="#">What for your child</a></li> <li>* <a href="#">Meet the staff</a></li> <li>* <a href="#">ExploreFaith.org</a></li> <li>* <a href="#">Mission Opportunities</a></li> </ul> </div> </div> <div><img src="images/left_box_bottom_img.png" width="219" height="15" /></div> </div> <div class="contain_box"> <div class="contain_title">Welcome to Elite Brigade</div> <div class="text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <div class="right"> <div> <img src="images/right_box_top_img.png" width="253" height="18" /></div> <div class="right_box_bg"> <div class="daily_news"> <div class="News_title">Daily News</div> <div class="news_scroll"> <marquee height="80" behavior="scroll" direction="up" scrolldelay="50" truespeed="truespeed" scrollamount="1" onmouseover="this.stop()" onmouseout="this.start()" > Put Your Images tag here </marquee> </div> </div> <div class="login_nox"></div> </div> <div><img src="images/right_box_bottom_img.png" width="253" height="17" /></div> </div> <div class="clear"><!-- --></div> </div> <div><img src="images/body_bottom_.png" width="906" height="23"/></div> </div> <div class="clear"><!-- --></div> <div class="footer"> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Copyright statement</a></li> </ul> </div> </div> </div> </div> </body> </html> Quote: Hi Friends........... Above code is an home page of website and I want that when user clicks on register link, the registration form(PHP File) displays below "Welcome to Ankit" by replacing "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> <br> <span style="font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</span> instead of another page. Anyone plz help me?????????????? Thx in advance............ I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color. What could be the cause of this? Thanks. wait, i just figured out that its the image that is a different color... so my new question is, why? Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why. Here is my css its at bestinefight.net/memberlist.php Code: /* Memberlist */ #navcontainer { width: 210px; margin-left:109px; } #navcontainer ul { margin-left: 0; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a { display: block; width: 200px; background-color: #4B4535; padding: 0px 0px 0px 10px; border: 0; } #navcontainer a:link, #navlist a:visited { font-size:10px; color: #dbdfaa; text-decoration: none; border: 0; padding: 0px 0px 0px 10px; outline:none; } #navcontainer a:hover, #navlist a:active { font-size:10px; background-color: #8B8063; color: #dbdfaa; border: 0; text-decoration:none; outline:none; } #profile_holder { background-image:url(profile.png); background-position:top; background-repeat:no-repeat; width:300px; height:200px; float:right; margin-right:30px; } #profile { width:260px; height:180px; margin: 40px auto; } #memberlist { width:250px; height:300px; float:left; } #memberlist_title { background-image:url(memberlist.png); width:228px; height:31px; margin-left:100px; } #memberlist_bottom { background-image:url(memberlist_bot.png); height:21px; width:210px; margin-left:109px; } Here is the code for my page. Code: <div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer"> <ul id="navlist"> <li><a href="#">Aslad</a></li> <li><a href="#">Bilos</a></li> <li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li> <li><a href="#">Brak</a></li> <li><a href="#">Cydian</a></li> <li><a href="#">Diablo</a></li> <li><a href="#">Equilibruim</a></li> <li><a href="#">Cydian</a></li> <li><a href="#">Faller</a></li> <li><a href="#">GoOsE</a></li> <li><a href="#">Melik</a></li> <li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li> <li><a href="#">Nekos</a></li> <li><a href="#">Normanalata</a></li> <li><a href="#">O'rian</a></li> <li><a href="#">Pooga</a></li> <li><a href="#">Romu'lis</a></li> <li><a href="#">Sena</a></li> <li><a href="#">Tepor</a></li> </ul> </div> <div id="memberlist_bottom"></div> </div> <div id="profile_holder"><div id="profile"></div></div> Suppose I have the following: 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" lang="en"> <head> <title>My site</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #outer_div { width: 800px; height: 300px; background-color: red; } .interior { background-color: #ffffff; } </style> </head> <body> <div id="outer_div"> <div class="interior"> <p>Hello I am some text. </p> <p>How are you today?</p> <p>Would you like some waffles?</p> </div> </div> </body> </html> The way this appears in FireFox (I haven't tested in other browsers yet) is that the 3 lines print on a white background that spans the width of the browser and then sits on top of the red background. The way that I would like it to appear is for the white background to extend only as far as the longest line. Also, I can't assume that it will only be paragraph tags, it may be links, images, headers, lists, well anything. My question is how can I achieve this? Basically I don't want the inner div to automatically be as wide as the outer div but only as wide as it needs to be. |