CSS - W3c Validator Problem

Question One

I just wanted to validate my css code and all is good except for some warnings. I am unclear as to what they mean or how to fix them. Does anyone know what these warnings are about?

CSS Validator Warnings
------------------------------------------

Question Two

When viewing my reviews page in IE there is little while lines dividing the table cells. Does anyone know why this is and how to fix it? Problem in is only in IE.

Page showing the white lines


Thanks in advance for feedback and help.

Regards,

CH...

Thought I'd run a page I'm working on through the W3C CSS validator... it doesn't seem to recognise decimals for the opacity property? Is this a bug, I don't think I've written anything incorrectly?

Hello all,

I understand that it is important to have your CSS & XHTML correctly validated. However, recently I have seen a surge of links usually at the footer of some websites which link directly to the W3C Validator website, 'proving' validation of the website.

Is their any particular reason for this?

Here is an example:
armadadesign.ca


I would appreciate any feedback, thanks!

hello,

about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets?

i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color...

i hope i explained my issue properly...
thanks for any thoughts or suggestions on this

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

Hello. I am new at css and web design so if these are easy problems please excuse.

First of all, the website url

http://www.onlinecasinoboss.com

In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like.

And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like.

I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender.

Just beginner bitching.

Thanks for the help!

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

I am new to css so I'm not sure what I've done wrong. My site looks exactly how I want it to in firefox but in ie, the middle column is too wide on the right side and is covering up the menu on the right. Any ideas as to what I've done wrong?

the site: www.list3n.com
the css: www.list3n.com/css/global.css

I have created this style

.class1 A:link {text-decoration: none;color:white;}
.class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold}
.class1 A:visited {text-decoration: none;color:white;}
.class1 A:active {text-decoration: none;color:white;}

In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font.

What can be the problem or something I am missing ??

Hi i have built a navigation system with css controled list, with dropdown effects that works well in both IE6 and FF 1.5 but the problem is that in FF the menu bar is not taking all the space that it is given to him (750px) on the right end of the menu navigation bar there is a white space that i can't get ride of. The navigation bar background is orange!

In IE there is no problem the entire navigation bar is Orange, but in FF there is 6px white space on the right end!

here si the code, i have added background almost everywhere to make taht space the same color as the rest of the menu but it doesn't help!


CSS
Code:

/* Positionning & Structure of 1st Level Menu */
#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 750px;
	display: block;
	background-color: #DA5D09;
	}
/* Positionning & Structure for Sub-Menus */
#navigation ul{
    display:block;
    /*margin:0;*/
    padding:0;
    list-style: none;
    margin: 0;
    background-color: #DA5D09;
    border-style: solid;
    border-color: #fff;
    border: 1px;

    }
	
#navigation li ul {
	position: absolute;
	top: 173px;
	display: none;
	}

/* Structure for 1st level Menu Items */
#navigation li {
    list-style: none;
    width: 124px;
    height: auto;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #DA5D09;
	}
/* Structure for Sub-Menu Items */
#navigation li li {
  display: block;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 124px;
}


/* Styles for 1st level Menu Items */
#navigation li a{
    text-align: center;
    background: #DA5D09;
    border-width: 0 2px 0 0;
    border-color: #fff;
    border-style: solid;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    padding: 10px 0;
    margin: 0;
        }
/* Styles for Sub-Menu Items */
#navigation li li a{
    text-align:left;
    background: #DA5D09;
    border-width: 1px 0 0 0;
    border-color: #fff;
    border-style: solid;
    font-size: 10px;
    display: block;
    text-decoration: none;
    padding: 5px;
    margin: 0px;
        }
/* The magic */
#navigation li:hover ul, #navigation li.over ul { display: block; }

The XHTML
Code:

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a>
      <ul>
        <li><a href="#">Muzik News</a></li>
        <li><a href="#">Interviews</a></li>
        <li><a href="#">Reviews</a></li>
      </ul>
    </li>
    <li><a href="#">Lifestyle</a>
      <ul>
        <li><a href="#">Urban reports</a></li>
        <li><a href="#">Style & Gear</a></li>
        <li><a href="#">Sports Corner</a></li>
      </ul>
    </li>
    <li><a href="#">Community</a>
      <ul>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Calendar</a></li>
      </ul>
    </li>
    <li><a href="#">Muzik</a>
      <ul>
        <li><a href="#">Muzik Lounge</a></li>
        <li><a href="#">Online Radios</a></li>
      </ul>
    </li>
    <li><a id="lastright"  href="#">Muzik Store</a></li>
  </ul>

The navigation UL is included in a global div (that contains the entire page) of 750 px as well!

I am a real newbie with css based design so you might notice my code is not very logic all the time and has a lot os redundancy but at least i am trying to convert to this new paradigm!

Thx in advance for the help!

I got the bellow css that I am using to display a drop down menu on my page.
On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text.

The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same.

How can I make it look the same in IE as in Firefox?

Drop down menu options
--------------------option 1
--------------------------------option 2
--------option 3
------------------------------------------------option 4

#menuh-container
{
position: absolute;
top: 8.2em;
left: 21.7em;
width:auto;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width:auto;
float:left;
margin:2em;
margin-top: 0em;
width:auto;
}

#menuh a
{
text-align: left;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
width:auto;
}

/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color:#3399CC;
text-decoration:none;
}

/* menu on mouse-over */
#menuh a:hover
{
color: white;
background-color: #8FD400;
text-decoration:none;
width:auto;
}

/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:auto;
/* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 0px;
vertical-align: top;
width:auto;
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:46px;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:auto;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:block;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

Hello everyone,

for our intranet I have developed new application tools with tabs to change icons. it is working fine on IE7+ but having problem with IE6.

there are two divs in this applications and on IE 7+ both divs starts in new line. for some reasons in IE6 it comes in one line. what cna I put in the second div that will make it appear on new line. I have tried putting <p> tag but doesn't make any different.

Any suggestions.

thank you.

<div id="mytabsmenu" class="tabsmenuclass">
<span style="cursorointer">
<ul>
<li><a rel="gotsubmenu[selected]">Trust Applications</a></li>
<li><a rel="gotsubmenu">General Applications</a></li>
</ul>
</span>
</div>


<div id="mysubmenuarea" title="Applications Toolbar" align="center" style=" background-image:url(/templates/default/IconImages/iconBkgrd.jpg); background-position:top; background-repeat:no-repeat; margin:2px; padding-top:12px; padding-left:30px; vertical-align:bottom; height:50px;">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="/templates/default/js/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
</div>

Hi, I am having an issue using my CSS code, I have a drop down section on my menu bar on my site.

I'm trying to firstly just set the background of the whole bar,

Code:

#nav-m {
  font: normal 12px Verdana;
  font-weight: bold;
  width: 100%;
}
  
	#nav-m ul {
	  float: left;
	  left: 0;
	  padding: 2px 0;
	  text-decoration: none;
	  text-indent: 5px;
	}
  
	  #nav-m a {
		  display: block;
		  width: 10em;
		  w\idth: 6em;
		  color: #012345;
		  text-decoration: none;
		  padding: 0.25em 2em;
	  }
  
	  #nav-m a.daddy {
	  }

	  #nav-m li {
		  float: left;
		  padding: 0;
		  background-image: url(http://taxbusters.eu.com/images/nav-bar1.jpg);
		  background-repeat: no-repeat;
	  }

	  #nav-m li ul {
		  position: absolute;
		  left: -999em;
		  height: auto;
		  width: 14.4em;
		  w\idth: 13.9em;
		  font-weight: normal;
		  border-width: 0.25em;
		  margin: 0;
	  }
  
	  #nav-m li li {
		  padding-right: 1em;
		  width: 13em
	  }

	  #nav-m li ul a {
		  width: 13em;
		  w\idth: 9em;
	  }

	  #nav-m li ul ul {
		  margin: -1.75em 0 0 14em;
	  }
	  
	  #nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
	  left: -999em;
	  }
	  
	  #nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
	  left: auto;
	  }

	  #nav-m li:hover, #nav-m li.sfhover {
	  background: #bdd7e6;
	  }

however the background doesnt show up, and the font alignment isnt right, - there are so many problems

http://alturl.com/nfkp

Hi, I have a div with a form in it that's not displaying properly in IE. It's meant to display a breadcrumb menu and text input on opposite sides of the screen then followed by a hr, but in IE the input displays below the menu text and interferes with the hr...

CSS:

Code:

	

#contentHeader { 
   margin-top: 2px; 
   font: 11px lucida grande, verdana, arial, sans-serif; 
   padding-top: 2px; 
   clear: all; 
} 

#pathway { 
   float: left; 
} 
#searchForm { 
   text-align:right; 
   float:right; 
   margin-right: 5px; 
} 

html:

Code:

<div id="contentHeader"> 
      <span class="pathway">Home </span>       
<div id="searchForm"><form action='index.php' method='post'><input class="inputbox" type="text" name="searchword" size="15" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /><input type="hidden" name="option" value="search" /></form></div> 
   </div> 
   <hr /> 

you can see what happens here - http://jmaid.org/index.php?option=c...ntpage&Itemid=1 - How can I fix this?

TIA

I'm not sure how to search for this if it has already been discussed. So, if this sounds familiar - please forgive me. I am redesiging my website into a full CSS layout to replace all of my tables. This is the original site:
http://www.erikreagan.com
This is what I'm working on for the new CSS one:
http://www.erikreagan.com/testpage.html
I have two problems. The first is that my menu on the left does not work correctly in WinIE. I used z-index to get it to work in firefox but IE still won't display it correctly. Notice that the same exact menu is in the content area and it works properly in IE. I can't figure this out for the life of me.

Here's problem two. It refers to this page:
http://www.erikreagan.com/testpage.php
In this php version of the layout the menu is the same (good in FF but bad in IE). Notice on the left there is a link that says ">>My Blog". It does not work in firefox but does work in IE. Why is that? Someone please help me. I have done all I know to fix these problems and have gotten no where. I have asked friends who tell me 'just look at the code. it's there' and I can't find a thing. This is very frustrating. Someone please help! Thank you.

CSS file this all refers to:
http://www.erikreagan.com/main.css