CSS - Css Id Naming Problem

Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple

CSS code is

Code:

#css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}

and I have just added this line in my .php page

Code:

<div id="mybio"></div>

What can be the problem??

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

Need to know how the pull down menu and a browse button could take a style like


http://www.discovertravel.no/


i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox.

Hello all.

I've just started learning to code because I recently started a business and needed a website. I'm having a few issues.

I'm using the 960 Grid System plus a scroller found at queness.com

I can't post links here apparently, or I'd show you what I'm using.

The page renders fine in Firefox (Mac & PC) Safari (Mac & PC) IE 8 and Chrome.

IE 6 is screwed beyond understanding.

IE 7 Pushes me off the screen and links don't work.

And Opera squeezes my text together.

I have screen shots if necessary.

Here is a link to the site in question: ohmyyoga.com

I inserted a redirect script for IE 6-7. So you'll be redirected to my old site if you try the regular URL from either of those browsers. For the purposes of this, I've copied the site W/O the redirect.

The link is test2.ohmyyoga.com

The site validates CSS and XHTML. I'm sure it's something super simple. I'm just brand new to all of this. Any help would be appreciated.

Cheers

I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css.

Here is the css..
body {
margin:0;
padding:0;
}
div.container {
text-align:center;
}
div.center {
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:800;
text-align:left;
}
div.left {
float:left;
width:100;
height:500;
background-color:#007700;
}
div.right {
float:right;
width:130;
height:500;
background-color:#e8e8e8;
font-size:10pt;
}
div.header {
clear:both;
width:40%;
}
div.footer {
clear:both;
margin:0;
width:100%;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.topmenu {
float:right;
width:5em;
height:2em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
a.topmenu:hover {
background-color:#005500;
color:#e8e8e8;
}
a.topmenu:visited {
float:right;
width:5em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
li {
display:inline;
}
a.leftmenu {
color:#ffffff;
text-decoration:none;
}
a.leftmenu:hover {
color:black;
}
a.leftmenu:visited {
color:#ffffff;
text-decoration:none;
}

and here is the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="newstyle.css"/>
</head>
<body>
<div class='container'>
<div class='center'>
<img src="fdat_logo_short.jpg" width=250 />
<ul>
<li><a class='topmenu' href="contact.php">Contact Us</a></li>
<li><a class='topmenu' href="about.php">About Us</a></li>
<li><a class='topmenu' href="services.php">Services</a></li>
<li><a class='topmenu' href="news.php">News</a></li>
<li><a class='topmenu' href="home.php">Home</a></li>
</ul>
</div>
</div>
</body>
</html>

I'm trying to replace all the tables in my site for divs

This is a test page for the main div container. Inside this will be the 3 columns of the layout: http://www.djbrunofacca.com.br/index2.php

It renders ok in firefox but in ie 6.0 half of the box gets off the screen to the left. I've been trying to correct this for 8 hours straight and nothing.

heres the css for the whole 3 columns thing:

Code:

.box {
border:3px solid black;
position: absolute;
left; 0px;
width: 720px;
height: 100%;
}

.leftcol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
width: 140px;
height: 100%;
background-color: #333;
}

.maincol {
position: absolute;
padding-left: 15px;
padding-right: 15px;
top: 0px;
left: 110px;
width: 440px;
background-color: #0066cc;
}


.rightcol {
position: absolute;
padding-left: 5px;
padding-right: 5px;
top: 0px;
right: 0px;
width: 140px;
height: 100%;
background-color: #333;
}

thanks
bruno

Hello all,
Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help!

my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user)

ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage.

The custom div look like this:
#container {
background: #FFF url(../images/bkg_container.png) repeat-y;
min-height: 100%;
width: 1190px;
margin: 0 auto;
padding: 0 14px 0 14px;
}

#header {
background: url(../images/bkg_header.png);
height: 127px;
width: 1160px;
margin: 0;
padding: 15px 0 0 30px;
}

#menu-top-bkg {
background: url(../images/bkg_menu_top.png) no-repeat left top;
height: 128px;
width: 1190px;
margin: 0 0 -128px 0;
}

#wrapper {
overflow: auto;
background: url(../images/bkg_menu.png) repeat-y left;
min-height: 500px;
width: 1190px;
margin: 0;
padding: 0;
}

#menu {
float: left;
background: none;
min-height: 370px;
width: 159px;
margin: 0;
padding: 110px 0 0 0;
}

#content {
float: right;
background: url(../images/bkg_content.png) no-repeat right top;
min-height: 400px;
width: 763px;
margin: 0 0 0 25px;
padding: 15px 243px 10px 0;
}

#menu-bottom-bkg {
background: url(../images/bkg_menu_bottom.png) no-repeat;
height: 141px;
width: 1190px;
margin: -111px 0 0 0;
}

#footer {
background: url(../images/bkg_footer.png);
height: 100px;
width: 1190px;
margin: 0;
padding: 16px 0 0 0;
}

I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec.

I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly!
Many thanks to all,
doodlebug

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!

So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem.
I have tried so many hacks. And now I am at a loss of ideas,time and mind.
the site is
woodbuiltright
com
/
index-alpha1
php

It seems the "E-Page" Div does not expand to contain everything.

I have tried clearing divs but I must be missing something.
Thanks

Hello,

I'm new here and to CSS too. I've tried to fix this bug I had for a while, but haven't found any decent answers.

My problem resolves around this page :

http://www.dessinsdrummond.com/house_plans_collection.html

In IE, the page seems to appear correctly, however, in Firefox, the white DIV doesn't follow the content of my page, thus the layout doesn't appear very well... I'm guessing it is because the float property is set... I wonder if there is any ways to fix this problem.

Thanks!

Ok i want more than one div on the same line.... but this code isnt working. My divs are formatted to look like tables... just so you know.

Code:

<center>

<div class="top">
 <div class="header">
 Header, Yo!
 </div>
</div>

 <div class="bg">

   <div class="left">
    <div class="header2">
    Yo, Fool! Title!
    </div>
   </div>

   <div class="main">
    <div class="header2">
    MAIN TITLE HERE
    </div>
   </div>

   <div class="right">
    <div class="header2">
    Yo, Fool! Title!
    </div>
   </div>

</center>

I am currently trying to build a website for a church, and have run into a little css coding problem:

It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?)

The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css"


Any help is greatly appreciated Thank you in advance.

Hi,
I resolved the problem I was having before - thank you for the help. Now I have a new problem. If you look at the url www.northshorewebdesign.net/testsite/about, you'll see the sub page navigation on the left. The spacing netween the list items changes when you goe to a sub page - it wasn't doing that before. I have no idea what is causing it. Can anyone determine what would cause this? I checked using firebug and the items are associated with the correct css and this wasn't happening before

i am making a website....and i am new to css.....so i don't know how to correct the problem.....!

my problem is of margin.....my website layout gets affected by different web browsers...!
my layout gets affected when some one restores the window...!
please help...!

here is my css code...:

Code:

body, ul, ol, li, p, h1,h2, h3, h4, h5, h6, form, blockquote{
margin:0px;
padding:0;
}
body{
margin: 60px 0px 0px 180px;
font: normal 11px Verdana,Arial,Helvetica,sans-serif;
color:#333333;
background-position:top left;
background: #202020 url(images/bgr.jpg) no-repeat;
background-position: center top;

}
 
#top{
position:relative;
margin:0 auto;
width:980px;

background-repeat:no-repeat;
background-position:0 29px;
}

#head{
height:120px;
position:relative;
}

#start{
height:40px;
position:relative;
background-image:url(images/start.png);
background-repeat:no-repeat;
width: 980px;
}

#main{
position:relative;
float:left;
width:960px;
padding-left:10px;
padding-right:10px;
border-left: 1px solid #232a36;


background-image:url(images/line.gif);
background-repeat:repeat-y;


}
#top .content{
position:relative;
float:left;
width:640px;
margin-right:20px;
}
.sidebar{
position:relative;
top:-155px;
right:205px;
float:right;
width:300px;
background-color: #ffffff;
}

.sidebar-footer{
position:relative;
top:-129px;
right:-95px;
float:right;
width:300px;
background: #1C2634 url(images/sidebar-footer.jpg) no-repeat scroll center top;
height: 10px;
}

.bsa{
position:relative;
float:left;
width:278px;
padding: 10px;
}

.bsa2{
position:relative;
float:left;
width:278px;
background: #FFFFFF url(images/advertiser.jpg) repeat-y;
border-right: 1px solid #3b73a5;
border-bottom: 1px solid #3b73a5;
margin-bottom:1px;
padding: 15px;
}

.footer{
position:relative;
clear:both;
width:928px;
top:-40px;
padding:40px 20px 20px 20px;
background-image:url(images/footer-top.jpg);

background-repeat:no-repeat;
background-color:#FFFFFF;
margin-left:1px;
float:left;

}

.footer_meta{
text-align:center;
margin:5px 0 ;
clear:both;
}

/*--------------------head--------------------*/
#head h1 a{
top:1px;
left:20px;
text-indent:-9999px;
position:absolute;
outline:none;
width:380px;
height:100px;
z-index:2;
}

.description{
position:absolute;
top:0;
text-indent:-9999px;
}

/*------------------content--------------------*/


.breadcrumb, .entrys, .featured_entry, .featured_entry2, .navigation{
width:600px;
line-height:34px;
background-image:url(images/bg_box_content.jpg);
background-repeat:no-repeat;
background-position:top left;
border:1px solid #b2b2b2;
background-color:#fff;
padding:0 20px;
margin-bottom:14px;
position:relative;
float:left;
}

.entrys{
line-height:22px;
padding:20px;

}

/*------------------top menu--------------------*/

div#navHeader {background: url(images/bg_skeletonTop.png) no-repeat 0px 45px; height: 90px; position:relative;}

ul#menu {margin-left: 20px;}
	ul#menu li {float:left; margin-right: 5px; list-style: none;}
	ul#menu li a {display: block; color:#FFFFFF; font-size: 1.25em; font-weight: bold; text-decoration: none; height: 45px; padding: 1px 0 0 20px; float:left;}
	ul#menu li a:hover {color:#00a2ff;}
	ul#menu li a span {display: block; padding:12px 20px 31px 0px; }
	
	ul#menu li.navSelected a, ul#menu li.current-cat a, ul#menu li.current-cat-parent a {background: url(images/bgnavLeft.png) no-repeat scroll 0 1px; color:#fff}
	ul#menu li.navSelected a:hover, ul#menu li.current-cat a:hover {color:#f2f2f2;}
	ul#menu li.navSelected a span, ul#menu li.current-cat a span, ul#menu li.current-cat-parent a span {background:url(images/bgnavRight.png) no-repeat top right;}

#subMenu {clear:both;}
	#subMenu ul {font-size: 0.9em; font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial; }
	#subMenu ul {position:absolute; padding: 8px 0 8px 0; bottom:0; left:20px}
	#subMenu ul li {float:left; margin-right: 10px; color:#7c8d93; list-style: none;}