|
CSS - Beginners Frustration At Specificity Issue
Hi all, I have been teaching myself CSS for a website I am making, which has all been running smoothly until an issue today.
Basically the issue is with a .class DIV nested inside a #id DIV.. Code:
<div id="wrap">
......
<p>...</p>
.......
<div class="info_box">
........
<p>.....</p>
......
</div>
.......
</div>
Using CSS, i set the font color (among other things) for <p> to be different in the "wrap" id and "info_box" class.... and I was shocked to find that the styling I had written for the class was ignored, and it was using all the styling specified for the ID. After searching, I found that this is because of specificity, in which the #id has a higher specificity. Although I now know the cause, i am not sure what I should do? I would like to be able to keep "info_box" as a .class, because I would use it more than once on a page. The only solution I can think of is to make the "wrap" a .class, but this does not seem logical, as I only use it once. Please Help! Similar TutorialsI was playing around with CSS transitions, and I came across I problem I haven't been able to figure out. I have my a:links set up to fade to a different color and rise by 3 pixels when hovered over. But if the link is also an image, I want the image opacity to fade in without being raised up the 3 pixels. I would have thought simply adding "bottom: 0" to a img:hover would negate the raising, but apparently not. I'm not an expert in CSS specificity, but it seems like it's not a specificity issue since a img:hover is slightly more specific than a:hover. What can I do to prevent the image links from rising the 3 pixels on hover? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
body {
background: #c44032;
color: #f4f1de;
font-size: 20px;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}
a:link, a:visited {
color: black;
position: relative;
-webkit-transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
}
a:hover {
color: #ff6a5a;
position: relative;
bottom: 3px;
-webkit-transition: color .15s ease-out, bottom .15s ease-out;
transition: color .15s ease-out, bottom .15s ease-out;
}
a:link img {
opacity: .5;
border: 1px solid #c44032;
padding: 3px;
-webkit-transition: opacity .25s ease-out .1s;
transition: opacity .25s ease-out .1s;
}
a:link img:hover {
opacity: 1;
bottom: 0;
border: 3px solid white;
padding: 1px;
-webkit-transition: opacity .15s ease-out ;
transition: opacity .15s ease-out;
}
</style>
</head>
<body>
<p>Here is a <a href="#">text link.</a></p>
<a href="#"><img src="http://www.toprival.com/temp/balloon.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/cat.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/bee.jpg" height="64" width="64" border="0"></a>
</body>
</html>
I have this navigation menu I made for my online catalog that is comprised of some 300+ links that display in 3 levels of CSS-controlled menues. A root UL and 2 levels of subULs. It's located here . The menues all work fine except for a small area where the first submenu overlaps the root menu. Illustration . The problem is in mousing from one link in the list in the first submenu to the next link in the same list. (below or above) As the mouse pointer moves between the links, the menu changes to the sublist for the next link in the root menu instead of the next link in the already open submenu. The second level submenu (sub-submenu) doesn't have any problem. Links in the opened submenu can be moved between successfully if the pointer is moved out to an area that isn't shared with the root menu. Making any sense? This is HTML for the basic structu HTML Code: Original - HTML Code <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> These are the two CSS lines that are supposed to control the displays. css Code: Original - css Code ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none } li.folderli:hover ul.folderul, li.folderli:hover li.folderli:hover ul.folderul { display: block }
ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none }
Maybe my understanding is deficent, but I haven't been able to find the problem and I'm hoping someone of you can point it out for me, please? So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer Hello, I'm an amateur with CSS, and would appreciate if you could take some time to help me out! I have a CSS rule to render all bullets in my page with a different icon, including on the sidebars. But there's one single list (a secondary navigation bar) where I do not want any bullets. I am trying to override it, but am unable to. I'd be glad if you could review my CSS and tell me where I'm going wrong. Thanks a Ton! Code:
.sidebar li {
border-top:dashed #cccccc 1px;
}
.sidebar ul li {
padding:0 0 0 1.5em;
list-style-type: none;
list-style-image: none;
background-image: url(img/menu-leaf.gif);
background-repeat:no-repeat;
background-position: 0.3em 0.6em;
}
This is my navigation block Code:
#navigation-secondary a {
display:block;
color:#ffffff;
}
#navigation-secondary a:hover {
background-color:#369; /* to change color when hovered over */
}
The following method to override it doesn't work Code:
#navigation-secondary , #navigation-secondary ul,
#navigation-secondary ul li, #navigation-secondary a {
list-style-type:none;
list-style:none;
}
ul.secondary-links li, ul.secondary-links ul li {
background-image:none;
border-top: none;
}
I should mention, the top border has been overridden, but not the background image. My html code snippet (rendered via php) is here Code:
<div class="sidebar" id="sidebar-left">
<div id="navigation-secondary">
<ul class="links secondary-links">
<li class="menu-138 first"><a title="Link1 site" href="/link1">Link1</a></li>
<li class="menu-139"><a title="Link2 site" href="/link1">Link2</a></li>
<li class="menu-140 last"><a title="Link3 page" href="/link1">Link3</a></li>
</ul>
<div style="clear: both;"/>
</div>
I'd be glad if you could help me out. Thanks! Hi, I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem. Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design. In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible. I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order Here's a HTML snippet of what I have in the navigation: html4strict Code: Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>
I'm then using the following CSS to attempt to style this part: css Code: Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }
Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item". As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item. This gives me a navigation such as: > Home >> Directors If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black. Basically anything that isn't the current page should be black... At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation. N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out... Thanks in advance - please let me know if you need more details! I need some help. I'm considering going back to using tables for layouts. Not that there is anything inherently wrong with that, just that ive spent alot of time learning how to position with CSS .. Its just frustrating. Floats are NOT the way to implement columns. Could someone please tell me what Im doing wrong here? I want the column on the left's header to align up just perfectly with the header in the column on the right. Ive reduced padding and margins in both cases to zero, yet there is an un-accounted for positive space in FF and a negative space in IE. What the hell is this????? http://www.doublethinkdesigns.com/d...php?option=e_KL Some code: PHP Code: print("<div id=\"left_content\">\n"); print("<h3>Current Key List</h3>\n"); print("<div id=\"scroll\">\n"); // programming .. blah print("</div>\n"); // End Left Content print("</div>\n"); // Begin Right Content print("<div id=\"right_content\">\n"); print("<h3>Available Key Lists</h3>\n"); print("<form>\n"); // programming .. bleh print("<input type=\"submit\" value=\"Update Active List\">\n"); // End Right Content print("</div>\n"); And some CSS: Code: body
{
margin: 0px;
padding: 0px;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
color: #FFFFCC;
background: #000000;
}
/* CONTENT PARTITIONS */
div#single_div
{
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px 30px 0px 30px;
border: 2px solid blue;
}
div#left_content
{
width: 400px;
float: left;
margin: 0px;
padding: 0px 0px 0px 0px;
border: 2px solid red;
/*
text-align: center;
*/
}
div#right_content
{
margin: 0px 0px 0px 440px;
padding: 0px 0px 0px 0px;
border: 2px solid green;
}
How can I fit the following into a CSS file (external stylesheet)? Code:
<div id=Canterbury style="position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden"><table
border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="#FFB928"><!-- border colour --><table border=0
cellpadding=1 cellspacing=1>
<tr id="Canterbury1" bgcolor="#FFD784"><td><a class=menu href="#" onMouseOut="menuOut('rollimg2'),setBgColor(
'Canterbury1','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor('Canterbury1','#990000')" target=
_top><img src="rp.gif" border="0"> BBC Radio Kent</a></td></tr>
<tr id="Canterbury2" bgcolor="#FFD784"><td><a class=menu href="mms://ms1.capitalinteractive.co.uk/invicta_low"
onMouseOut="
menuOut('rollimg2'),setBgColor('Canterbury2','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor(
'Canterbury2','#990000')" target=_top><img src="wmp.gif" border="0"> Invicta FM</a></td></tr>
</table></td></tr></table></div>
I have a few other placenames as well, as you can see from www.radiofeeds.co.uk/maptest/csstest.html, but there are a few ids where I'd like to exclude these settings from. I know I can set the whole of the Canterbury block with: div#Canterbury,div#<any other placeneames> { position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden } But how can I also have the border colour (<td bgcolor="#FFB928">), bgcolor, onMouseOut and onMouseOver properties put into the CSS file? Please can I have the code for the CSS file and for the replacement code that goes back into the page. I'd like this to be efficient as possible. Hi, i'm very new to web design and learning as i go so apologies if this is a stupid question The website for the Red Hot Chili Peppers has a cool effect where the background color of the page changes when you hover over the navigation links Is it possible to achieve this with CSS? I have been experimenting with transitions but they don't seem to be able to do this thanks in advance for any help I'm having a difficult time trying to set up a certain layout using css & div tags. I am not capable yet to create post containing a url. However, I've created in my linked css sheet, #header, #sideinfo, #maincontent, & #footer. I attempted using the position:absolute; and figure out in %'s how to lay each div out (max %=100) some elements work fine, while others do not work. This is probably a severe noob question, but I appreciate any help on this as it will be used as building blocks for the next steps to come. Thank You again. Hi. Here's my site in development: bongbay.spacemakeover.com/homemade-bong.php In Internet Explorer it looks fine, the menu's align to the top fine - BUT in firefox there is a big annoying gap from the top. Does anyone please know how I can fix this?? My problem is that the site I'm developing for my church displays wonderfully in FireFox Opera Netscape BUT in IE the headings in the content block refuse to be transparent so that my background image shines through like it does for the rest of that block. Here's the page...any help would be appreciated much! Parkview Baptist Church I just noticed that if I resize the IE to a real narrow window, it stacks the first h2 and pushes the background down enough that all of that first h2 shows, but the subsequent on is not visible. Don't know if that helps or not... Best Regards, Jim I would rather be exposed to the inconveniences attending too much liberty than to those attending too small a degree of it. -- Thomas Jefferson Firstly I am a noob to design and code and am attempting to self teach so if this is in the wrong section I do appologize. I am attempting to create a designed content box and nearly have it working except I have one issue that has for the past week been causing the vain in my temple to pulsate rapidly! The content box has a total of 10 image boxes around the center text box. The problem is that the 2 side boxes that have a background image will not tile continuously as is intended when the text expands past a certain point as it lengthens. Here is the code that I have also I am using Dreamweaver CS3. If anyone could help me solve this you could very well be saving a life! I had images however apparently I am not able to use em so I hope its ok to pull a sneaky worldwideweb.axiomfiles.com/Files/213668/4junk2.png - shows the different cells worldwideweb.axiomfiles.com/Files/213668/4junk.png - shows the content box on the web after Ive lengthened the text area (which is a must on certain pgs and can be quite long) My Thanks in advance. Dee =============================== <table border=0 cellpadding=0 cellspacing=0 align="center" width="781"> <tr valign="bottom"> <td width="86" height="100"><img src=".../Files/213668/4topleftcentercorner.png" width="86" height="100"></td> <td height="74" valign="middle" background=".../Files/213668/4topcenter.png" bgcolor="#1C1C1E" alt=""> <div align="left"> <table border=0 cellpadding=0 cellspacing=0 width="291"> <tr valign="top"> <td width="291" height="50" align="center"> <div align="left"> $block[title]</div></td> </tr> </table> </div></td> <td width="46" height="100"><img src=".../Files/213668/4toprightcentercorner.png" width="86" height="100"></td> </tr> <tr align="left" valign="top"> <td height="100"><img src="...../Files/213668/4topleftcentercorner2.png" width="86" height="106" align="top"></td> <td height="100" rowspan="2" bgcolor="#1C1C1E" alt=""> <left> <font size=2> <left> <table> <tbody> <tr> <td width= 700 align="left"> <p align=left><font size=2> $block[content]</td></tr></tbody> </table></td> <td height="100" alt=""><img src="...../Files/213668/4toprightcentercorner2.png" width="86" height="106" align="top"></td> </tr> <tr> <td width="86" height="900" background="..../Files/213668/4leftsidecenter2.png"></td> <td width="86" background="..../Files/213668/3maintextbotrightcorner2.png" alt=""></td> </tr> <tr valign="bottom"> <td width="86" height="82"><img src="...../Files/213668/4botleftcentercorner.png" width="86" height="82"></td> <td height="80" background="http..../Files/213668/4botcenter.png" alt=""></td> <td width="86"><img src="..../Files/213668/4botrightcentercorner.png" width="86" height="82"></td> </tr></table> <p><BR><br><BR> WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. If you go he
Code: http://aissolutions.ca/clients/enerquality/training/courses/ you will see that when you click on the "expand text" link, it works fine in Firefox. However, in IE, the content gets "cut off" (the page doesn't expand with the content). Any ideas for a fix? Hey i don't know if this can be fixed by now i have looked everywhere and tried everything. i have a style sheet that does not work in IE6 and i don't know why. Code: body{
margin: 0;
padding: 0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color:red;}
#maincontainer{
width: 940px; /*width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #EAEAEA;
height: 90px /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 12px;
background: url(images/png_logo.gif) no-repeat right bottom;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 190px 0 188px; /*margins for content column. should be "0 right columnwidth 0 leftcolumn width*/
}
#leftcolumn{
float: left;
width: 188px; /*width of left column in pixel*/
margin-left: -940px; /*set margin to that of -(maincontainerwidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 195px; /*width of right column in pixel*/
margin-left: -195px; /*set margin to -(rightcolumnwidth)*/
background: #336699;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 2px; /*margins for inner div inside each column (to provide padding)*/
margin-top: 0;
}
A.menulink{
display: block;
width: 170px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 11px;
color: #000000;
border: none;
border: solid 1px #ffffff;
}
A.menulink:hover {
border: solid 1px #6100c1;
background-color: #f0e1ff;
}
the html code is Code: <!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=utf-8" >
<link href = "style.css" rel = "stylesheet" type = "text/css">
<title></title>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<h1>PowerNet Global
</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
Thank you for visiting PowerNet Global, please ignore the mess as we update our site to bring you more up
to date information to help you needs a little better. The site may continue to change over the next few months, if you have
any suggestions on how to improve our site to bring you better service please feel free to eamil us at
<a href="mailto:support@pngusa.net">Support@pngusa.net</a>
<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/tabnews.xml&up_ned=us&up_items=7&up_show_image=0&up_font_size=13pt&up_selectedTab=0&up_tabs=&up_last_url=&synd=open&w=315&h=260&title=Google+News&lang=en&country=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><strong>Navigation</strong>
<table border="0" width="180">
<tr>
<td ><h5>Sevice Information</h5>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="services.html" class="menulink">Overview Of Services</a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#e6e6e6"><a href="http://webmail.pngusa.net/src/login.php" class="menulink">View Mail</a>
</td>
</tr>
</table>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<script src="http://gmodules.com/ig/ifr?url=http://blog.outer-court.com/homepage/miniweb.xml&synd=open&w=180&h=330&title=Mini+Web&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB %7C0px%2C1px+solid+%230088CC&output=js" type="text/javascript">
</script>
</div>
</div>
<div id= "footer">
<a href="http://www.pngusa.net">Go back Home</a>
</div>
</div>
</body>
</html>
"
In IE6 the right column does not show up and i am unable to give a link as it is on internal test server. I am having an issue with IE using the .htc file to render the CSS menu system I have. I am not sure why though. I think it has to do with the server that I have the site up on. Unfortunitly, I am unable to do anything to the server, so I will have to work around this issue. The menu system works the way it should in Firefox, but not IE. So if you can look at it (in Firefox) and help me figure out what I need to do to make it work in IE I would greatly appreciate it. The site is: www.fired-up.ca |
|||||||